Laravel mix bootstrap

Yes, with npm run prod, the file is minified. The duplicate lines disappear.

There's also some new lines.

@lavelforum Maybe it is due to media queries? Are you sure that one of them isnt wrapped in one?

@Sinnbeck After searching, i saw that the lines i was thinking new are in source and destination file. But not at the same place !

@lavelforum Sorry I dont know what that means :) So its duplicated both places or?

@Sinnbeck There's some lines not in the same place between source and destination.

But there's also some duplicate lines with npm run dev :

source

::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }

destination

::-webkit-file-upload-button { font: inherit; }

::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }

with npm run prod, the duplicate lines disappear.

So, the problem is for npm run dev with duplicate lines.

@lavelforum Not sure why that happens. Best bet is to try and google solutions for webpack (as laravel mix is just an interface for webpack). Also make sure you have the latest version of mix (6.x)

Again my best guess is that its due to some sort of media query or similar, but without the source files, I cannot say.

@Sinnbeck The source file is bootstrap.css v5.0.1

I will search for webpack on google.

@lavelforum Is it this? That seems to be scss

https://getbootstrap.com/docs/5.1/getting-started/download/#source-files

Or where did you find it?

@Sinnbeck https://getbootstrap.com/docs/5.0/getting-started/download/

The Compiled CSS and JS part.

It's version 5.0.2

Inside the zip, there is the bootstrap.css file.

The result is the same as for v5.0.1 : duplicate lines

@lavelforum I am a bit confused. I opened the source and it has those two segments already?

This is taken directly from the source file

//FIRST
::-webkit-file-upload-button {
  font: inherit;
}

::file-selector-button {
  font: inherit;
}
//SECOND
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

So the only problem is that webpack changes the order a bit?

@Sinnbeck I found only in file bootstrap.css V5.0.2 line 427

::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }

Which line did you find

::-webkit-file-upload-button { font: inherit; }

@lavelforum Ah sorry I had 5.1.3. Are you absolutely sure you dont have 2 copies lying around, cause it fits perfectly with the contents of 5.1.3

@Sinnbeck Only one file v5.0.1

I did npm run dev for the 5.1.3

OK, no more difference for ::-webkit-file-upload-button

But some other new lines in the source destination, like

.form-control:-ms-input-placeholder { color: #6c757d; opacity: 1; }

.form-floating > .form-control:-ms-input-placeholder { color: transparent; }

.form-floating > .form-control:not(:-ms-input-placeholder) { padding-top: 1.625rem; padding-bottom: 0.625rem; }

It seems that webpack add the -ms propertiies.

@lavelforum Ok I had a chance to try compiling it, and it does indeed add it again in a slightly altered version. But as bootstrap does this exact thing in the newest version, I would assume that it is to ensure some broader browser compatibility or similar.

@Sinnbeck Maybe the bootstrap team also used webpack and modified the file accordingly.

At first I was worried that the differences added by mix/webpack would break the css file.

Thanks for your time and help

@lavelforum I have never had issues with it not working. Webpack is quite good at making sure that it will still be parsed the same (or better afterwards) :)