parcel icon indicating copy to clipboard operation
parcel copied to clipboard

CSS @layer support with imported styles

Open jh3y opened this issue 1 year ago • 2 comments

🐛 bug report

CSS @layer support doesn't work for me with external styles as it would with the spec.

For example;

@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css') layer(normalize);

is valid and can be seen in use here. I've tried doing the @import wrapped in @layer to see if that could be a workaround but it hasn't worked and ignores the @layer. Is there a workaround here?

🎛 Configuration (.babelrc, package.json, cli command)

Default configuration.

🤔 Expected Behavior

@layer spec is respected and either the styles are inlined into a layer or I can use the external import method from above.

😯 Current Behavior

Ignores @layer completely.

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

Software Version(s)
Parcel
Node
npm/Yarn
Operating System

jh3y avatar Aug 09 '22 22:08 jh3y

Possibly the same, though this one seems to be for external styles rather than bundled styles. #8162

devongovett avatar Aug 22 '22 01:08 devongovett

CSS layers are fully supported by all browsers. Too bad our tools are holding us back 😢

Offirmo avatar Feb 17 '24 10:02 Offirmo