CSS-modules: composes

[kenOfYugen]

Jetpack is awesome @KidkArolis !
I have created a test case for CSS-modules here, npm t should point it out.
CSS-modules seem to work, but I can't get composes to inherit properties.
No matter what I tried, I couldn't fix it, hence the issue report.

.parent {
  background-color: black;
  color: green;
}

.child {
  composes: parent;
  color: red;
}

Expected:

.child {
  background-color: black;
  color: red;
}

Actual:

.child {
  color: red;
}

[KidkArolis]

Thanks! I'm using css modules quite a bit with jetpack, but never used composes. Will have a look at this issue soon.

[KidkArolis]

Heya, had a quick look, it's an issue with the way the HTML is constructed in your test case, you're missing the quotes around the class name:

-<p class=${styles.child}>Should have black BG, red text</p>
+<p class="${styles.child}">Should have black BG, red text</p>

Results in:

-<p class="styles--child___Ta3_R" styles--parent___1dfVw="">Should have black BG, red text</p>
+<p class="styles--child___Ta3_R styles--parent___1dfVw">Should have black BG, red text</p>

Or for better readability, replacing class names with just child and parent:

-<p class="child" parent="">Should have black BG, red text</p>
+<p class="child parent">Should have black BG, red text</p>

[kenOfYugen]

Ahh, thanks for taking a look. My test was bad too, sorry for wasting your time.

Leaving the following reasoning for the record, in case someone stumbles upon the same mixup.
In the examples folder, class is specified without the quotes.

jetpack/examples/with-css-modules/index.js

Line 5 in 5e18a5b

<div class=${styles.container}>

And I thought that it acts like the webpack css-modules demo with JSX. Apparently it doesn't.

[KidkArolis]

Ah, I should fix that exampe indeed!
Yeah, doing html with strings like that is generally not advisable, but keeps the example really minimal. This wouldn't happen with jsx.