Sharing common properties between selectors (hover, focus, before, after, etc...)

[seanmaisch]

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...

export const button = style({
	// ...

	":hover, :focus": {
		background: "red"
	},
})

...or...

export const root = style({
	// ...

	"::before, ::after": {
		content: "",
	},
})

...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.

const sharedProperties: CSSProperties = {
	content: "",
	// ... other properties
};

export const root = style({
	// ...

	"::before": {
		...sharedProperties,
		// ... and so on
	},

	"::after": {
		...sharedProperties,
		// ... and so on
	},
});

Thanks for taking a look!

[askoufis]

This can be achieved using the selectors property on the style API (also available on other functions):

export const foo = style({
  selectors: {
    ["&::before, &::after"]: sharedProperties,
  },
});

[seanmaisch]

Awesome, thanks for the quick response and after everything I tried, I guess I didn't realize I could format it that way! I can confirm this works great for my needs. I am happy to have asked though, because I wasn't able to find anything in the documentation that specifically covered this use case, but I hope others find this message in the future and utilize the power of the selector approach.