Template migrations: Add automatic var injection codemods

[philipp-spiess]

In v4, we're removing automatic var injection (please refer to this PR for more detail as to why).

Automatic var injection made it so that if you have a candidate like bg-[--my-color], v3 would automatically wrap the content of the arbitrary section with a var(…), resulting in the same as typing bg-[var(--my-color)].

This PR adds codemods that go over various arbitrary fields and does the var(…) injection for you. To be precise, we will add var(…) to:

• Modifiers, e.g.: bg-red-500/[var(--my-opacity)]
• Variants, e.g.: supports-[var(--test)]:flex
• Arbitrary candidates, e.g.: [color:var(--my-color)]
• Arbitrary values for functional candidates, e.g.: bg-[var(--my-color)]

[adamwathan]

In v3, some utilities didn’t automatically wrap things in var() (there’s a list in the codebase somewhere), so we should make sure not to mod those ones here 👍🏻

[RobinMalfait]

I don't know if these are correct, because
supports-[--test] maps to @supports (--test: var(--tw)) which essentially tests whether the browser understands CSS variables.

But supports-[var(--test)] maps to @supports var(--test) which I think is invalid? (at least I can't get it to work in Safari with any value I throw at it)

https://play.tailwindcss.com/CC7NDpsJfg

[philipp-spiess]

Ah, I got this from your list here: https://github.com/tailwindlabs/tailwindcss/pull/13657/files#diff-5c09a7c68a4426650ba1209e3be9652052750e24131acb607e09e5efea477dacR1619-R1624

supports-[var(--test)] mapping to @supports var(--test) seems to be at least compatible with v3 though 🙈

[RobinMalfait]

Hmm I see. While this is compatible with v3, it's still wrong (aka will never match). So the question is:

1. Do we want to fix it (could be a breaking change since it's already broken right now)
2. Do we get rid of the supports variant in this case (or the candidate entirely because it won't do anything anyway)
3. Do we do what v4 expects, where it maps to --test: var(--tw) (which essentially is the fix from 1.)
4. Don't do anything

[RobinMalfait]

Looking nice! Just a few suggestions