Stop working when contains @layer declaration

[otomad]

IMPORTANT: clean-css is now in a maintenance mode. PRs are still welcome, and I will try do an occasional bugfix relase.

Precheck

• Do a quick search and make sure a bug has not yet been reported;
• do a quick check if the bug still exists in the latest patch version;
• finally, be nice and have fun!

Environment

• clean-css version - npm ls clean-css: 5.3.3
• node.js version - node -v: v20.6.1
• operating system: Windows 11 23H2 22631.2861

Configuration options

const CleanCSS = (await import("clean-css")).default;
new CleanCSS({});

Input CSS

@layer theme, layout, utilities;

Example from https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

Actual output CSS

Nothing. And even ignore the following CSS rules.

Warning

Invalid character(s) 'utilities;' at 1:22. Ignoring.

Expected output CSS

@layer theme,layout,utilities;

[kerryj89]

Ran into this problem also, @layer declaration gets removed but the @layer {} nesting remains. I changed to cssnano for now. Side note: cssnano doubles the time it takes to process my css compared to clean-css.

[otomad]

Ran into this problem also, @layer declaration gets removed but the @layer {} nesting remains. I changed to cssnano for now. Side note: cssnano doubles the time it takes to process my css compared to clean-css.

Suggest to use lightningcss. cssnano can accept @layer declaration but just ignore it, and lightningcss can even remove the spaces after the commas from the @layer declaration.

[daniele-orlando]

Same issue here where valid layer code gets removed from output.

<style>
@layer reset, libs, app;
</style>

outputs to

<style>
</style>