[v4] disabling new :hover variant

[cossssmin]

What version of Tailwind CSS are you using?

v4.0-beta.2

What build tool (or framework if it abstracts the build tool) are you using?

@maizzle/framework@v5.0.0-beta.32 (modified for Tailwind v4 testing, repro below)

What version of Node.js are you using?

v20.10.0

What browser are you using?

N/A

What operating system are you using?

Windows 11

Reproduction URL

https://github.com/maizzle/tailwindcss.v4-test

See the starter/_dist/emails folder for the compiled HTML, with CSS.

Describe your issue

<style>
    @import "tailwindcss/theme";
    @import "tailwindcss/utilities";
    @variant hover (&:hover);
</style>

<a class="hover:text-red-200">...</a>

Compiled CSS:

.hover\:text-red-200 {
  &:hover {
    color: var(--color-red-200);
  }
}

Expected:

.hover\:text-red-200:hover {
  color: var(--color-red-200);
}

[adamwathan]

Hey! Yeah all variants in v4 are implemented using nesting, and running things through Lightning CSS for production builds is what flattens the nesting down. So as long as you do a production build you should see the expected selector 👍

[cossssmin]

Any way of flattening it without doing something like NODE_ENV=production maizzle build? It also minifies the output and I need to avoid that in emails 🙈

EDIT: nevermind, I'll just use Lightning CSS APIs directly 👍