Understanding css-modules "composes" with multiple inherited classes

[douglasjunior]

I'm trying to use css-modules composes with multiple class levels, but it's working for part of my need.

My project is configured with vite and lightningcss.

I have the following scenario:

component.module.css

.classA {
  composes: fontSizes--headingMedium from global;
  background-color: magenta;
}

.classB {
  composes: classA from '.';
  text-align: center;
}

.myComponentClass {
  composes: classB from '.';
  border: solid 1px red;
}

theme.css (imported globally in my App.tsx)

.fontWeights--bold {
  font-family: Arial, sans-serif, NunitoSans-Bold;
  font-weight: bold;
}

.fontSizes--headingMedium {
  composes: fontWeights--bold from '.';
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0;
}

Result appearance

Result HTML

Result CSS

So, note that the composes: fontWeights--bold from '.'; was ignored by the css-modules transpilation.

What I'm doing wrong?

Reproducible example: https://codesandbox.io/p/sandbox/lightningcss-css-modules-composition-demo-6k9x67

[douglasjunior]

The most strange part, is that if I remove from '.'; from the local classes, the result is even worse:

With postcss this part of problem doesn't happen, so I can omit the from '.'; and I have the same previous result.

component.module.css

.classA {
  composes: fontSizes--headingMedium from global;
  background-color: magenta;
}

.classB {
  composes: classA;
  text-align: center;
}

.myComponentClass {
  composes: classB;
  border: solid 1px red;
}

Result appearance

Result HTML

Result CSS

Note that the classA was completely ignored.

[pascalduez]

Hello,

in the first example and codesandbox, theme/index.css is a gobal CSS file, not processed by css modules. So composes does not have any effect and is ignored by the browser.

Not 100% sure of the setup used here, but usually if you wanted to make it a css module, you'd have to rename it theme.module.css, but that would make it a full css module (every class scoped).
I guess you will need to make a clear decision about what's global and what's not here ;)
Maybe a Heading component?

[Thiry1]

Note that the classA was completely ignored.

I think it is the same problem as https://github.com/swc-project/swc/issues/7737.