[dimal]

I've been hoping for something like this. One of the remaining problems with CSS is that the only native way to reuse any complex functionality is with a class. Classes are applied in the DOM. This is how we end up with utility classes, but utility classes don't mesh well with component based styling, where all your styles for a component live in a file alongside the JS.

So I use mixins for style reuse so that I can always look at the component CSS (and follow any explicit imports) to see what styles are applied. If you have some styles from utility classes and some from component-level styles, there's always increased cognitive load because when you're looking at the component CSS you often don't realize that the utility class is there.

I get the sense that this is one of the reasons why people like Tailwind. Then there's no confusion - everything is in utility classes, in one place. But I can't read that mess. I need line breaks and separation of concerns. That's just me.

This proposal kind of scratches my itch, but from what I can tell, these functions and mixins are still globally defined, so while they're better than utility classes, they still leave a bit to be desired for me. I'd like CSS to behave like any reasonable language and use explicit imports. But I'm sure that getting imports right and avoiding blocking is not an easy problem.