Support for @custom-variant and inheritable themes

[Bartek532]

Basically what I'm trying to achieve is when adding a variant for some theme

@layer theme {
  :root {
    @variant orange {
      --primary: oklch(0.7 0.1 100);
    }
  }
}

I'd also want to be able to set this theme on a isolated part of the app (e.g. one component) instead of global app. On the web this could be easily achievable using @custom-variant e.g.:

@custom-variant orange(&:is(.theme-orange *));

Then, when I add a className like "theme-orange" to some element, all descendants of this element will use the variables for this variant. While this is working smoothly for web TailwindCSS, it doesn't work at all in Uniwind (works on Nativewind tough).

Would it be possible to implement something like this in the core of the library or find some workaround how can I achieve this? It's really the last thing that keeps me from migrating fully to Uniwind....

Thanks in advance!

[jpudysz]

We're still experimenting with possible solutions. Will get back to you when we figure it out.

[Brentlok]

I'm closing this one since I've created a new discussion with our proposed solution. Feel free to leave your opinions there - #315