Add codemod for migrating @variants and @responsive directives

[RobinMalfait]

This PR migrates the @variants and @responsive directives.

In Tailwind CSS v2, these were used to generate certain variants of responsive variants for the give classes. In Tailwind CSS v3, these still worked but were implemented as a no-op such that these directives don't end up in your final CSS.

In Tailwind CSS v4, these don't exist at all anymore, so we can safely get rid of them by replacing them with their contents.

Input:

@variants hover, focus {
  .foo {
    color: red;
  }
}

@responsive {
  .bar {
    color: blue;
  }
}

Output:

.foo {
  color: red;
}

.bar {
  color: blue;
}

[RobinMalfait]

• Add codemod for migrating the @screen directive #14749
• Add codemod for migrating @variants and @responsive directives #14748 👈
• next

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @RobinMalfait and the rest of your teammates on Graphite

[RobinMalfait]

The confusing part here is that if you use @variants hover

@variants hover {
  .foo {
    color: red;
  }
}

If you then use it in your html as:

<div class="hover:foo focus:foo foo">hello world</div>

Then the following CSS is being generated:

.foo {
  color: red;
}
.hover\:foo:hover {
  color: red;
}
.focus\:foo:focus {
  color: red;
}

Which means that the variants listed in @variants don't matter. But foo is treated as a utility. So maybe the better solution is to wrap this in @layer utilities and migrate it to an @utility instead 🤔

[philipp-spiess]

@RobinMalfait Ah, yeah, I think you're right we should migrate this to @utility to not break stuff. Fun that it doesn't matter which variants you used anymore but makes it easier for us at least 🙈

[RobinMalfait]

Haha yeah that is a bit confusing. In v2 we generated everything ahead-of-time, and later introduced the just-in-time in v3. So in v2 we needed that information to generate all the CSS.

[philipp-spiess]

Need to add the migrateVariantsDirective rule to the defaults now 🙈 Let's add a full integration test to make sure it indeed works

[RobinMalfait]

Should be good to go now

[philipp-spiess]

Merge activity

• Oct 22, 12:07 PM EDT: The merge label 'merge-queue' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
• Oct 22, 12:08 PM EDT: A user added this pull request to the Graphite merge queue.
• Oct 22, 12:15 PM EDT: A user merged this pull request with the Graphite merge queue.