search

vanilla-extract-css / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript
https://vanilla-extract.style
MIT License
9.6k stars 291 forks source link

Alternative Theming #653

Closed j closed 1 year ago

j commented 2 years ago

Hello, great library. It's been working great, however I'm trying to back-port to use this and the lack of child selectors is making our theming rough.

We want to support the ability to apply a stylesheet to a root element to then modify all sibling elements.

See the example markup below.

<div class="container design-theme-a">
  <div class="inner">
    <div class="design">
      // ..design components here
    </div>
  </div>
</div>

I want to simply just apply design-theme-a to the container and have design-theme-a be able to over-ride any child stylings.

I don't want to use CSS variables either because I want users to style how they want and not have to just use variables everywhere.

j commented 2 years ago

I saw the discussion regarding this same need and saw that the way to do it is using globalStyle. This caveat alone makes me want to use something else.

askoufis commented 1 year ago

By disallowing child selectors you can be confident that your classname only applies styling to the elements you've attached it to. This is an intentional decision made by the library, and as you've mentioned, the workaround for this is to use globalStyle.

It's not unexpected that you ran into this kind of issue when migrating from another styling solution, but hopefully the end result will be more maintainable CSS going forward.

Keen to hear more about what you ended up using: did you continue with Vanilla Extract or did you pivot to something else?

For now though I'm gonna close this issue.