Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong order of imports causing broken CSS file #1597

Closed
andresbm05 opened this issue May 9, 2024 · 2 comments · Fixed by #1600
Closed

Wrong order of imports causing broken CSS file #1597

andresbm05 opened this issue May 9, 2024 · 2 comments · Fixed by #1600

Comments

@andresbm05
Copy link

Bug report

I'm trying to build my app which contains a scss file like this:

/*! /* webpackIgnore: true */
@import url("/assets/themes.css");
@import "~normalize.css";
// ...

I need the relative URL to be kept because that file is not available at build time, that's why I use webpackIgnore: true.

The problem is that these imports are being resolved in inverse order, so the resulting CSS file looks like this:

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ // ... ALL NORMALIZE STYLES
@charset "UTF-8";/*! /* webpackIgnore: true */@import url(/assets/themes.css) //...

This causes this warning (which I think should be an error)

Warning: ▲ [WARNING] All "@import" rules must come first [invalid-@import]

    brand.styles.333111hafft76be9.css:354:0:
      354 │ @import url("assets/themes.css");
          ╵ ~~~~~~~

  This rule cannot come before an "@import" rule

    brand.styles.333111hafft76be9.css:11:0:
      11 │ html {
         ╵ ^

Actual Behavior

The imports are resolved in inverse order

Expected Behavior

Imports should keep the defined order, even more if they are CSS imports that have to be kept on top.

How Do We Reproduce?

As explained above, it can be reproduced with this code:

/*! /* webpackIgnore: true */
@import url("/assets/themes.css");
@import "~normalize.css";

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
OS: Windows 11 10.0.22621
CPU: (12) x64 Intel(R) Xeon(R) W-10855M CPU @ 2.80GHz
Memory: 13.05 GB / 31.75 GB
Binaries:
Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (123.0.2420.97)
Internet Explorer: 11.0.22621.1
Monorepos:
Lerna: 5.2.0
Packages:
webpack-bundle-analyzer: 4.7.0 => 4.7.0

@alexander-akait
Copy link
Member

There is a fix #1600

@alexander-akait
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants