Sharing common properties between selectors (hover, focus, before, after, etc...) #1166
-
I'm wondering if there's a way to combine element selectors to share common values using Vanilla Extract. Every attempt I make to write code like...
...or...
...is met with Typescript errors. It'd be great if there was some sort of support or documentation if this is possible or not. Forgive me if this has already been discussed, but I couldn't find it in the Issues or Discussions after much searching. Right now, I've had to resort to destructuring and spreading the shared CSS values in another const like so, which works fine, but adds some unnecessary bloat to the final compiled code if you ask me.
Thanks for taking a look! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
This can be achieved using the export const foo = style({
selectors: {
["&::before, &::after"]: sharedProperties,
},
}); |
Beta Was this translation helpful? Give feedback.
This can be achieved using the
selectors
property on thestyle
API (also available on other functions):