Using the replaceDeclarations feature of postcss-nested-ancestors you can reference parent selectors of nested blocks not only in your selectors themselves, but also in your declarations. For example:
.cell {
padding: .5em;
&--id {
composes: ^&; /* replaced with `composes: .cell;` */
font-weight: 500;
}
&--value {
composes: ^&; /* replaced with `composes: .cell;` */
font-style: italic;
}
}This would enable pretty straight forward BEM-ish composition, where the user only needs to add a modifier class (.cell--id) and the base class (.cell) gets applied automatically.
However, the replacement composes declaration is invalid, since the class name is prefixed with a dot.
Build Error (CSSModules) in foo.css:27:5
postcss-modules-scope: referenced class name ".cell" in composes not found
I could write a postcss plugin that removes the leading dots automatically or adds an unclass(^&) function or something like that, but this seems like a rather simple change that could be made in this plugin, possibly behind a flag.
Using the
replaceDeclarationsfeature ofpostcss-nested-ancestorsyou can reference parent selectors of nested blocks not only in your selectors themselves, but also in your declarations. For example:This would enable pretty straight forward BEM-ish composition, where the user only needs to add a modifier class (
.cell--id) and the base class (.cell) gets applied automatically.However, the replacement
composesdeclaration is invalid, since the class name is prefixed with a dot.I could write a postcss plugin that removes the leading dots automatically or adds an
unclass(^&)function or something like that, but this seems like a rather simple change that could be made in this plugin, possibly behind a flag.