Understanding "composes" peer classes

[douglasjunior]

I'm trying to use 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:

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.

[douglasjunior]

Sorry, I think that I need to open this issue in the lightningcss GitHub, right?