@parcel/optimizer-css rejects CSS namespaces on the ground they should appear earlier in the CSS about parcel HOT 2 OPEN

See https://drafts.csswg.org/css-namespaces/#syntax

Any @namespace rules must follow all @charset and @import rules and precede all other non-ignored at-rules and style rules in a style sheet.

@import rules must also come before other rules: https://drafts.csswg.org/css-cascade-5/#at-import

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset and @layer statement rules) and must not have any other valid at-rules or style rules between it and previous @import rules, or else the @import rule is invalid.

I believe this will also error in Parcel in the next version (once Lightning CSS is used to implement the CSS packager).

So to fix your issue, you should move the @import to the top of the file.

from parcel.

Hi @devongovett thanks a lot for your time and for your answer. TIL about this CSS rule!

I understand it's not Parcel's job but I believe when bundling different CSS files, the CSS bundler should automatically hoist those namespace definitions. Otherwise it requires a precise control over all the CSS used in the app.

Is Lightning CSS the right place to request such a feature? Or is Parcel planning to implement its own CSS bundler in the future?

from parcel.