@value or composes using other modules bypasses other postcss plugins

[viveleroi]

I'm using Vite 4.0.4 (in a react project) which uses this postcss plugin for CSS Modules support.

I am also using the postcss-nesting plugin in my project. It appears that when classes are imported using the @value or composes syntax, the imported CSS bypasses other postcss plugins. In my case, this means nested CSS is leaking into my output.

For example when I use composes on a class in another modules file (which has nested CSS):

composes: formfield from '../../forms.module.css';

All of the nested code gets printed to the DOM - it somehow was not parsed into output CSS.

In textarea.module.css:

.textarea {
  composes: formfield from '../../forms.module.css';
}

in forms.module.css:

.formfield {
  cursor: text;

  &:not([disabled], [readonly]):focus {
    border-color: red;
  }
}

Expected CSS

.textarea {}

.formfield {
  cursor: text;
}

.formfield:not([disabled], [readonly]):focus {
  border-color: red;
}

Actual CSS

._formfield_1kfbh_12 {
  cursor: text;

  &:not([disabled], [readonly]):focus {
    border-color: red;
  }
}

._textarea_tj61n_1 {
}

Chromes then shows tons of invalid CSS properties in the inspector, and it breaks the actual CSS I'm trying to apply.

I originally filed the issue for postcss-nesting but they confirmed it's not their issue:

csstools/postcss-plugins#796

[romainmenke]

In PostCSS API terms :

It seems that CSS Modules related logic runs on OnceExit.

Any CSS inlined/imported through composes won't be processed by plugins that run on earlier events like Rule.

[arty-name]

I also use postcss-modules indirectly: through Vite and Astro. Looks like it is causing broken background URLs for me, as demonstrated here

[alvaro-cuesta]

Can confirm this happens to me too when using @value from .... I'm just trying to import an external class from another file because I need to use it in a complex selector, but it breaks my file in multiple ways (nesting and other plugins like postcss-simple-vars).