This reproduces a behaviour in Vite where PostCSS isn't applied to styles included via composes.
- Install dependencies & run app
npm install
npm run dev
- Open app in browser and inspect dynamically added
<style>tags
I exect to see the styles I include with .foo via `composes: component from "./component.module.css" to be valid (with PostCSS plugins applied). Expected result:
._component_xs2hm_5 {
color: red;
color: var(--color-red);
}
._component_xs2hm_5 ._nested-component-class_xs2hm_13 {
width: 100%;
}
._foo_1mrk0_1 {
color: blue;
color: var(--color-blue);
}
._foo_1mrk0_1 ._nested-bar_1mrk0_7 {
width: 100%;
}Note that the styles in main.module.css are valid in that nesting has been deconstructed (by postcss-nested) and property fallbacks have been added (via postcss-preset-env + importFrom).
The styles included via composes are not processed by PostCSS. They are included in the <style> tag as-is, resulting in invalid CSS.
._component_xs2hm_5 {
color: var(--color-red);
._nested-component-class_xs2hm_13 {
width: 100%;
}
}
._foo_1mrk0_1 {
color: blue;
color: var(--color-blue);
}
._foo_1mrk0_1 ._nested-bar_1mrk0_7 {
width: 100%;
}(I believe the class names of the composed class are transformed because in this reproduction I also import component.module.css separately in index.jsx).
The same bug can be observed in the production build.
