Configurable Specificity?

[mwood23]

We're using vanilla extract for styling snippets that render onto other people's pages. We love it because of how compressible it can be and that there's no runtime cost on the pages we render on. One thing I was wondering is could we programmatically set the specificity for the styles?

Example:

<style>
/* styles from the page that I can't control */
.foo a {
  color: black;
}
</style>
<style>
 /* vanilla extract styles */
._8fnbyhj {
  color: red;
}
</style>

<div class="foo">
  <a class="_8fnbyhj">testing</a>
</div>

With the example above the color will be black and our styles are overridden. We never want our styles to be overridden for our use case.

What I'd love to be able to do is to turn up the specificity of all vanilla extract styles to make them look like this:

<style>
/* styles from the page that I can't control */
.foo a {
  color: black;
}
</style>
<style>
 /* vanilla extract styles */
._8fnbyhj._8fnbyhj._8fnbyhj._8fnbyhj {
  color: red;
}
</style>

<div class="foo">
  <a class="_8fnbyhj">testing</a>
</div>

I know this is a bizarre request, and I don't think it's something that should live in the core lib. I'd love some direction on if this is possible and how I could implement this. Otherwise I'm having to rely on inline styles. 😦

[liam-jones-lucout]

This seems like a great idea

[pgonzalez-santiago]

For that I have used: https://www.npmjs.com/package/postcss-increase-specificity and it works perfectly.

ps: Also I think the best solution to avoid css override is to use shadow dom but currently it is not possible to use it with vanilla-extract: #488

[mwood23]

I did end up solving it with web components and built a way for vanilla extract to be web components friendly. Here's the source: https://github.com/mwood23/preact-island-starter

[smitev]

@mwood23 your approach seems like a nice solution, but it's executed during runtime, so there is screen flickering while doing the style injection in the shadow-dom. Any fix for that?