Issue Processing Descendant Selectors
avoision opened this issue · comments
Let me start by saying that I am unsure whether this is a true issue, or whether there is a gap in my understanding of how CSS Modules should be implemented.
I am using Gulp and postcss-modules, working with a very basic set of CSS and sample HTML files. I also have a small Gulp task that simply replaces instances of class="xxx" with css-module="xxx" in the HTML.
Original HTML: <div class="one">Lorem ipsum</div>
Converted HTML: <div css-module="one">Lorem ipsum</div>
This process works great, and without any issues at all. But I did notice that when trying to process descendant selectors, there was a (silent) error. The following does not work as expected:
Original HTML: <div class="one two">Lorem ipsum</div>
Converted HTML: <div css-module="one two">Lorem ipsum</div>
Are descendant selectors not meant to be supported?
Yes, each tag could have only one CSS module. So css-module="one two" is invalid.
Though, in your CSS file you can combine them:
.one-two {
composes: one two;
}In your HTML you'd have css-module="one-two" then. Consider this just as a syntax example. Concatenating automatically all CSS classes into one CSS module name probably isn't a good idea.