Variants: allow nesting inside of media queries (feature request)

[L-Blondy]

Hi there,

I looked into the docs and into the type definitions and I could not find any solution to that problem. I also did not find any issue for this so I decided to open this issue hoping that you guys find the time to review it.

Let me first give a bit of context.
I am building a theming plugin (tw-colors).
Users already have the possibility to declare a default theme using the option defaultTheme: 'my-theme-name'.

createThemes({
   'my-light-theme': ...,
   'my-dark-theme': ...,
   'my-other-theme': ...,
}, {
   defaultTheme: 'my-light-theme'
})

In this case I can define the variant like this:

addVariant('my-light-theme', [
   `:root&`,
   `:is(:root > &:not([data-theme]))`,
   `:is(:root &:not([data-theme] *):not([data-theme]))`,
])

I want to add support for the following

createThemes({
   'my-light-theme': ...,
   'my-dark-theme': ...,
   'my-other-theme': ...,
}, {
   defaultTheme: {
      light: 'my-light-theme',
      dark: 'my-dark-theme',
   }
})

The problem is that I could find no way to nest the variants inside the @media (prefers-color-scheme: light) media query

I tried the following with non success:

addVariant('my-light-theme', [
   `@media (prefers-color-scheme: light){:root&}`,
   `@media (prefers-color-scheme: light){:is(:root > &:not([data-theme]))}`,
   `@media (prefers-color-scheme: light){:is(:root &:not([data-theme] *):not([data-theme]))}`,
])

Would it be possibile to enable such syntax or maybe something like this ?

addVariant('my-light-theme', [
   {
      '@media (prefers-color-scheme: light)': [
         `:root&`,
         `:is(:root > &:not([data-theme]))`,
         `:is(:root &:not([data-theme] *):not([data-theme]))`,
      ]
   }
   // more stuff here
])

[adamwathan]

Hey! What you tried should work, it does work in Tailwind Play for example:

https://play.tailwindcss.com/1QfWZQhxAu?file=config

[L-Blondy]

I am the worst, there was a typo in my setup... sorry about that

Thx for your time!