Substitute @variant inside utilities

Author: thecrypticace

packages/tailwindcss/src/design-system.ts

@@ -23,7 +23,7 @@ import { Theme, ThemeOptions, type ThemeKey } from './theme'
 import { Utilities, createUtilities, withAlpha } from './utilities'
 import { DefaultMap } from './utils/default-map'
 import { extractUsedVariables } from './utils/variables'
-import { Variants, createVariants } from './variants'
+import { Variants, createVariants, substituteAtVariant } from './variants'
 
 export const enum CompileAstFlags {
   None = 0,
@@ -86,6 +86,12 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
           ast.map(({ node }) => node),
           designSystem,
         )
+
+        // JS plugins might contain an `@variant` inside a generated utility
+        substituteAtVariant(
+          ast.map(({ node }) => node),
+          designSystem,
+        )
       } catch (err) {
         // If substitution fails then the candidate likely contains a call to
         // `theme()` that is invalid which may be because of incorrect usage,

packages/tailwindcss/src/index.test.ts

@@ -4678,14 +4678,19 @@ test('JS APIs support @variant', async () => {
       loadModule: async () => ({
         path: '',
         base: '/root',
-        module: ({ addBase }: PluginAPI) => {
+        module: ({ addBase, addUtilities, matchUtilities }: PluginAPI) => {
           addBase({ body: { '@variant dark': { color: 'red' } } })
+          addUtilities({ '.foo': { '@variant dark': { '--foo': 'foo' } } })
+          matchUtilities(
+            { bar: (value) => ({ '@variant dark': { '--bar': value } }) },
+            { values: { one: '1' } },
+          )
         },
       }),
     },
   )
 
-  let compiled = build(['underline'])
+  let compiled = build(['underline', 'foo', 'bar-one'])
 
   expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
     "@layer base {
@@ -4700,6 +4705,16 @@ test('JS APIs support @variant', async () => {
       .underline {
         text-decoration-line: underline;
       }
+
+      @media (prefers-color-scheme: dark) {
+        .bar-one {
+          --bar: 1;
+        }
+
+        .foo {
+          --foo: foo;
+        }
+      }
     }"
   `)
 })