Migrate supports theme keys

[RobinMalfait]

This PR is a follow up of #18815 and #18816, but this time let's migrate the supports theme keys.

Let's imagine you have the following Tailwind CSS v3 configuration:

export default { content: ['./src/**/*.html'], theme: { extend: { supports: { // Automatically handled by bare values (using CSS variable as the value) foo: 'foo: var(--foo)', // parentheses are optional bar: '(bar: var(--bar))', // Not automatically handled because names differ baz: 'qux: var(--foo)', // ^^^ ^^^ ← different names // Custom grid: 'display: grid', }, }, }, }

Then we would generate the following Tailwind CSS v4 CSS:

@custom-variant supports-baz { @supports (qux: var(--foo)) { @slot; } } @custom-variant supports-grid { @supports (display: grid) { @slot; } }

Notice how we didn't generate a custom variant for data-foo or data-bar because those are automatically handled by bare values.

I also went with the longer form of @custom-variant, we could use the single selector approach, but that felt less clear to me.

@custom-variant supports-baz (@supports (qux: var(--foo))); @custom-variant supports-grid (@supports (display: grid));

[RobinMalfait]

👋 bye bye blocked theme keys

We still have aria, data and supports handling in: https://github.com/tailwindlabs/tailwindcss/blob/feat%2Fupgrade-supports-theme/packages/tailwindcss/src/compat/theme-variants.ts

This is still necessary in case the config file could not be migrated due to other issues. So didn't get rid of that part.