@value or composes using other modules bypasses other postcss plugins

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:

https://github.com/csstools/postcss-plugins/issues/796

Reproduce the issue with the textarea.module.css and forms.module.css examples, using Vite 4.0.4 with postcss-nesting and CSS Modules. Trace how imported CSS from @value or composes moves through the plugin pipeline; done means nested selectors are transformed before the CSS reaches the DOM, matching the expected output.