How to wire vanilla with astro scoped styles?

[jcayzac]

I use the :where scoping strategy, so all my component classes .foo are compiled as .foo:where(.astro-<hash>).

vanilla-extract styles are not scoped.

I can get the <hash> value programmatically, but then I have no idea how to pass it to vanilla-extract so that it generates scoped css.

Is this something that would require addFunctionSerializer? Or maybe creating a new adapter?

[askoufis]

Styles generated by Vanilla Extract are scoped via a unique classname identifier, rather than the method astro uses (which now involves attribute selectors rather than :where).

Are you trying to achieve this same output with Vanilla Extract styles?

[jcayzac]

Astro's behavior depends on your configuration. Last I checked, using the :where strategy was still the recommended method.

I'd like the scoping to be based on astro's scoped class name.

[askoufis]

You're correct that it is configurable, though I'm not sure if the :where strategy is necessarily recommended, given its drawbacks.

Regardless of that, there's no way to customize the scoping strategy used by Vanilla Extract, nor are there currently any plans to make it customizable.

Astro scopes its styles to enforce encapsulation: a style defined inside an astro component can only ever apply to that component. Vanilla Extract generates unique hashes for each style in order to scope them, but it isn't concerned with how you actually use your styles. It's up to the user to decide where to apply or not apply each classname. Both Astro and Vanilla Extract can be used at the same time, and I don't really see any value in forcing Vanilla Extract to conform to Astro's style scoping as they're trying to achieve different things.