Nested CSS parsing broken/bypassed when composing class from another css modules file

[viveleroi]

Bug description

I'm using this plugin with CSS Modules via Vite 4.0.4 (in a react project).

I'm trying to uses composes on a class in another modules file. That class has nested CSS. When I import that CSS using:

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

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

If I import that css module directly in my TS:

import formStyles from '../../forms.module.css' and apply formStyles.formfield to my element's className, everything works as expected, which is why I'm filing the bug here.

When I move the class to a global css file and use composes: formfield from global;, the nesting works as expected.

Source 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

```css
._formfield_1kfbh_12 {
  cursor: text;

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

._textarea_tj61n_1 {
}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

None

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Nesting

Plugin version

10.2.0

What OS are you experiencing this on?

Windows

Node Version

18.9.1

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

Hi @viveleroi
Thank you for reaching out.

This doesn't appear to be an issue with postcss-nesting.
I think it is a bug in CSS Modules.

Can you file an issue on their repo?

As a work around you can avoid composes.

[romainmenke]

You can also use postcss-import

@import url('../../forms.module.css');

.textarea {
  composes: formfield;
}

I've created a minimal reproduction that illustrates the fix : https://github.com/romainmenke/vite-css-modules--postcss--bug-1#readme

---

Going to close this because it has been confirmed that the issue is coming from CSS Modules.

The way they import/inline classes with composes prevents other PostCSS plugins from processing the imported CSS. There is nothing we can do about this.

[viveleroi]

Thanks for the effort and alternate solution. Can you recommend the best place for me to file this issue? Vite?

[romainmenke]

I am not familiar with either Vite or CSS Modules :/

I think only the author of the PostCSS plugins related to CSS Modules can fix this.
So maybe somewhere here : https://github.com/css-modules

[viveleroi]

I've filed an issue for the postcss modules plugin vite uses.

Looking into the import plugin, it looks like it will only work for composes because that will add the imported class to the element, hiding the fact that the class name hash is different than what is was in the original file. I don't think the import is at all aware of the css module system, so it's just causing new hashes to be made.

I noticed this when trying to target an imported class. The class in my DOM was _secondary_ysq2o_63 yet the class written to the CSS was ._secondary_11xe0_82

._inputWithButton_11xe0_69 ._secondary_11xe0_82{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

I've tried various things to fix it, they just seem incompatible.

[romainmenke]

Ah, yes, I indeed don't know anything about CSS Modules, so I am unable to verify if the output is valid.

I was only able to determine that the plugins like postcss-nesting run as intended when postcss-import is used.

Good to know that postcss-import does not fix the issue!
Thank you for sharing this.