search

postcss / postcss-import

PostCSS plugin to inline at-import rules content
MIT License
1.38k stars 115 forks source link

Ignored imports cause re-ordering of CSS #536

Closed romainmenke closed 11 months ago

romainmenke commented 1 year ago

This has been part of this plugin since the first release :

https://github.com/postcss/postcss-import/blob/319c4f7fedac842b9d2ff997e7b87738d6373fee/index.js#L77

current code :

https://github.com/postcss/postcss-import/blob/4dbc9317cc2d1887b380fb1a89c14fb350548f9c/lib/parse-styles.js#L29-L37

@import "foo.css";
@import "https://font.service/my-font.css";
@import "bar.css";

It will be re-ordered by postcss-import :

@import "https://font.service/my-font.css";
foo{}
bar{}

I think we should at least warn when this scenario happens :

RyanZim commented 1 year ago

Yeah, a warning would be prudent here.

romainmenke commented 1 year ago

I didn't find a good way to add a warning for this edge case without adding a lot of complexity.

I did however recently created a stylelint plugin with some warnings for edge cases in CSS bundlers.

I also added a warning for this edge case there : https://github.com/csstools/postcss-plugins/blob/3163647e778da39116303234e82f0049f7f07560/plugins-stylelint/no-invalid-at-import-rules-when-bundling/index.test.js#L61-L67

I suggest we close this issue as won't fix