Implement compat for <alpha-value> from v3

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -37,6 +37,10 @@ export function applyConfigToTheme(
       continue
     }
 
+    if (typeof value === 'string') {
+      value = value.replace(/<alpha-value>/g, '1')
+    }
+
     let name = keyPathToCssProperty(path)
     if (!name) continue
 

packages/tailwindcss/src/compat/plugin-api.test.ts

@@ -299,6 +299,93 @@ describe('theme', async () => {
       "
     `)
   })
+
+  test('plugin theme colors can use <alpha-value>', async () => {
+    let input = css`
+      @tailwind utilities;
+      @theme {
+        /* This should not work */
+        --color-custom-css: rgba(255 0 0 / <alpha-value>);
+      }
+      @plugin "my-plugin";
+    `
+
+    let compiler = await compile(input, {
+      loadModule: async (id, base) => {
+        return {
+          base,
+          module: plugin(
+            function ({ addUtilities, theme }) {
+              addUtilities({
+                '.css-percentage': {
+                  color: theme('colors.custom-css / 50%'),
+                },
+                '.css-fraction': {
+                  color: theme('colors.custom-css / 0.5'),
+                },
+                '.css-variable': {
+                  color: theme('colors.custom-css / var(--opacity)'),
+                },
+                '.js-percentage': {
+                  color: theme('colors.custom-js / 50%'),
+                },
+                '.js-fraction': {
+                  color: theme('colors.custom-js / 0.5'),
+                },
+                '.js-variable': {
+                  color: theme('colors.custom-js / var(--opacity)'),
+                },
+              })
+            },
+            {
+              theme: {
+                colors: {
+                  /* This should work */
+                  'custom-js': 'rgb(255 0 0 / <alpha-value>)',
+                },
+              },
+            },
+          ),
+        }
+      },
+    })
+
+    expect(
+      compiler.build([
+        'bg-custom',
+        'css-percentage',
+        'css-fraction',
+        'css-variable',
+        'js-percentage',
+        'js-fraction',
+        'js-variable',
+      ]),
+    ).toMatchInlineSnapshot(`
+      ".css-fraction {
+        color: color-mix(in oklch, rgba(255 0 0 / <alpha-value>) 50%, transparent);
+      }
+      .css-percentage {
+        color: color-mix(in oklch, rgba(255 0 0 / <alpha-value>) 50%, transparent);
+      }
+      .css-variable {
+        color: color-mix(in oklch, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
+      }
+      .js-fraction {
+        color: color-mix(in oklch, rgb(255 0 0 / 1) 50%, transparent);
+      }
+      .js-percentage {
+        color: color-mix(in oklch, rgb(255 0 0 / 1) 50%, transparent);
+      }
+      .js-variable {
+        color: color-mix(in oklch, rgb(255 0 0 / 1) var(--opacity), transparent);
+      }
+      :root {
+        --color-custom-css: rgba(255 0 0 / <alpha-value>);
+      }
+      "
+    `)
+  })
+
   test('theme value functions are resolved correctly regardless of order', async () => {
     let input = css`
       @tailwind utilities;

packages/tailwindcss/src/compat/plugin-functions.ts

@@ -30,6 +30,10 @@ export function createThemeFn(
 
       let configValue = resolveValue(get(configTheme() ?? {}, keypath) ?? null)
 
+      if (typeof configValue === 'string') {
+        configValue = configValue.replace('<alpha-value>', '1')
+      }
+
       // Resolved to a primitive value.
       if (typeof cssValue !== 'object') {
         if (typeof options !== 'object' && options & ThemeOptions.DEFAULT) {