I would like to be able to compose utility classes into components.
You can do it using the PostCSS @apply plugin
:root{
.some-utility:{
property: value;
}
}
.some-utility {
@apply .some-utility;
}
.some__component--active{
@apply .some-utility;
}
But, the originator of the @apply plugin has stopped maintaining it, and the W3C has dropped @apply from consideration.
The plugin still works of course, and packages like Tailwind CSS are still using the @apply principal. But if the idea of PostCSS is to write CSS in the real syntax, we're kidding ourselves by continuing to use dropped proposals.
In this instance @apply is acting exactly like a mixin. So you could do the same thing in SCSS while using a supported syntax.
@mixin some-utility {
property: value;
}
.some-utility {
@include some-utility;
}
.some__component--active {
@include some-utility;
}
And lastly, the simplest way to achieve this might be LESS. You can skip writing a separate mixin and class since LESS lets you make them one and the same.
.some-utility {
property: value;
}
.some__component--active {
.some-utility();
}