6.0.0+ generates invalid CSS when used in development mode

[alan-agius4]

• Operating System: darwin x64
• Node Version: 14.17.1
• yarn 1.22.10
• webpack Version: 5.51.1
• css-loader Version: 6.2.0

Expected Behavior

When used with extract css mini, css-loader 6.0.0+ breaks absolute @import rules in development mode because it generates invalid CSS since these rules must precede all other types of rules, except @charset.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/@import#description

Actual Behavior

Development mode (incorrect)

/*!****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./file.css ***!
  \****************************************************************************************/
body {
    font-family: 'Manrope';
}
/*!******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./file-2.css ***!
  \******************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap);
/*!**********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./file-2.css (1) ***!
  \**********************************************************************************************/

production (correct)

@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap);
body {
    font-family: 'Manrope';
}

Code

https://github.com/alan-agius4/css-loader-issue-import

How Do We Reproduce?

git clone git@github.com:alan-agius4/css-loader-issue-import.git
cd css-loader-issue-import
yarn
yarn webpack

[alexander-akait]

hm, it should never work as expected, you set styles: ["./file.css", "./file-2.css"],, it like you write:

body {
    font-family: 'Manrope';
}

@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap);

it is invalid by CSS spec, @import should be always on top

[alexander-akait]

Found a bug

[alexander-akait]

Anyway I recommend to use @import on the top (we have workaround for this case)

[alexander-akait]

webpack-contrib/mini-css-extract-plugin#815

[alan-agius4]

In some cases though you don't have control of the @import yourself. Example, when the 2 files are from 3rd party dependencies, where each of the file declares an import root, top level, when they get concatenated the output will be invalid.

@alexander-akait thanks for the quick turnaround.

[alexander-akait]

In some cases though you don't have control of the @import yourself. Example, when the 2 files are from 3rd party dependencies, where each of the file declares an import root, top level, when they get concatenated the output will be invalid.

Make sense, I will add more tests to avoid regressions in future

[alan-agius4]

Thanks!

[alexander-akait]

https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v2.2.1