Some CSS styles not being applied correctly after webpack build

[clickwithclark]

Current behaviour 💣

Some CSS styles may not be applying properly

Expected behaviour ☀️

All CSS styles to work properly at all times

Reproduction Example 👾

I am very new to webpack but I have noticed that some of my CSS was not being applied unless I specifically set the minify property to false. It took me many hours to determine this and I am not yet certain if it was my improper use of the CSS loaders or not but I would still like to report it here for other users to be able to have a fix on demand.

Environment 🖥

Node.js v14.15.5
win32 10.0.19043
npm 7.24.1
├─┬ clean-webpack-plugin@4.0.0
│ └── webpack@5.56.0 deduped
├─┬ css-loader@6.3.0
│ └── webpack@5.56.0 deduped
├─┬ css-minimizer-webpack-plugin@3.0.2
│ └── webpack@5.56.0 deduped
├─┬ html-loader@2.1.2
│ └── webpack@5.56.0 deduped
├─┬ html-webpack-plugin@5.3.2
│ └── webpack@5.56.0 deduped
├─┬ mini-css-extract-plugin@2.3.0
│ └── webpack@5.56.0 deduped
├─┬ sass-loader@12.1.0
│ └── webpack@5.56.0 deduped
├─┬ style-loader@3.3.0
│ └── webpack@5.56.0 deduped
├─┬ url-loader@4.1.1  #not being used i am using the 'asset/resource' method instead
│ ├─┬ file-loader@6.2.0 #not being used i am using the 'asset/resource' method instead
│ │ └── webpack@5.56.0 deduped
│ └── webpack@5.56.0 deduped
├─┬ webpack-cli@4.8.0
│ ├─┬ @webpack-cli/configtest@1.0.4
│ │ └── webpack@5.56.0 deduped
│ └── webpack@5.56.0 deduped
├─┬ webpack-dev-middleware@5.2.1
│ └── webpack@5.56.0 deduped
├─┬ webpack-dev-server@4.3.0
│ └── webpack@5.56.0 deduped
├─┬ webpack@5.56.0
│ └─┬ terser-webpack-plugin@5.2.4
│   └── webpack@5.56.0 deduped
└─┬ workbox-webpack-plugin@6.3.0
  └── webpack@5.56.0 deduped

html-webpack-plugin@5.3.2

  plugins: [
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './template.html',
      minify: false, //<- for styles to work
    }),

Minify:true /or unset

Here you see most styles loading but for some reason, not the styles concerned with the input field.

Minify:false

Here all the styles are being applied correctly

If I can reproduce this bug better I will update but for now I am hoping the title at lease can help someone else, It took me forever!

[jantimon]

Thanks for opening this issue - it's hard to tell anything without a reproduction..
Minification is done by html-minifier-terser

[stale[bot]]

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.