It seems natural to parallel BEM - Block Element Modifiers - for the abstractions present.
Right now, I have Box that is the only element in the global block with "mixin" utility modifiers. There's a lot of awkward <Box componentName ... /> and I'm sure there are Namespaces that don't translate well.
Your React code follows a similar pattern, too. For example a Card might have Card.Header and Card.Text. The API should look the same?
I think this would also be a great way to make CSS Modules more compatible.
questions
[x] Are proxies supported wide enough?
We just use the proxy to make accessing elements lazy. In most situations, there shouldn't be an alarming number of styles in a single module and it should be performant to brute-force it. I'm also considering a "pick" argument.
[x] Are there other simpler ways to express this?
This is still a good question. I considered making element stuff just properties on Box. You end up making your own curried versions of Box and there's no point. You could also write a wrapper that injects these things, but is that simpler?
[x] Can it be done without any constants in javascript?
The element level allocation allows you to re-export your CSS modules with new functionality in each of your feature modules. CSS modules already produce javascript interop, this just extends it at runtime and needs to be cached.
It seems natural to parallel BEM - Block Element Modifiers - for the abstractions present.
Right now, I have
Boxthat is the only element in the global block with "mixin" utility modifiers. There's a lot of awkward<Box componentName ... />and I'm sure there are Namespaces that don't translate well.Your React code follows a similar pattern, too. For example a
Cardmight haveCard.HeaderandCard.Text. The API should look the same?An idea I have is to use a proxy:
I think this would also be a great way to make CSS Modules more compatible.
questions
[x] Are proxies supported wide enough?We just use the proxy to make accessing elements lazy. In most situations, there shouldn't be an alarming number of styles in a single module and it should be performant to brute-force it. I'm also considering a "
pick" argument.This is still a good question. I considered making element stuff just properties on Box. You end up making your own curried versions of Box and there's no point. You could also write a wrapper that injects these things, but is that simpler?
The element level allocation allows you to re-export your CSS modules with new functionality in each of your feature modules. CSS modules already produce javascript interop, this just extends it at runtime and needs to be cached.