Description
When I set polyfill: true in panda.config.ts and process my entry CSS file through @pandacss/dev/postcss, I expected the final CSS output to contain no @layer syntax at all — since the whole point of the polyfill is to make the output safe for browsers that don't support cascade layers.
index.css:
@layer reset, base, tokens, recipes, utilities;
But what happened instead is that the original @layer reset, base, tokens, recipes, utilities; order declaration from my source CSS is preserved in the final output.
output:
@layer reset, base, tokens, recipes, utilities;
:root {
--made-with-panda: "🐼";
}
*, :before, :after, ::backdrop {
--blur: /*-*/ /*-*/;
--brightness: /*-*/ /*-*/;
...Link to Reproduction
Steps to reproduce
- follow the https://panda-css.com/docs/installation/rsbuild#start-a-new-project to init。
- add
polyfill: true in panda.config.ts and run build.
JS Framework
React & TS
Panda CSS Version
1.11.1
Browser
Operating System
Additional Information
Because I’m the provider of a component library, other apps may use my components and compile their CSS with @csstools/postcss-cascade-layers or postcss-preset-env. In that case, the reserved @layer reset, base, tokens, recipes, utilities; causes my CSS to be expanded with a large number of unexpected not(#\#) selectors, which makes my styles much higher priority than intended.
Description
When I set polyfill: true in
panda.config.tsand process my entry CSS file through@pandacss/dev/postcss, I expected the final CSS output to contain no @layer syntax at all — since the whole point of the polyfill is to make the output safe for browsers that don't support cascade layers.index.css:
But what happened instead is that the original @layer reset, base, tokens, recipes, utilities; order declaration from my source CSS is preserved in the final output.
output:
Link to Reproduction
Steps to reproduce
polyfill: trueinpanda.config.tsand run build.JS Framework
React & TS
Panda CSS Version
1.11.1
Browser
Operating System
Additional Information
Because I’m the provider of a component library, other apps may use my components and compile their CSS with
@csstools/postcss-cascade-layersorpostcss-preset-env. In that case, the reserved@layer reset, base, tokens, recipes, utilities;causes my CSS to be expanded with a large number of unexpectednot(#\#)selectors, which makes my styles much higher priority than intended.