Remove <alpha-value> from theme values when upgrading

integrations/upgrade/js-config.test.ts

@@ -29,6 +29,8 @@ test(
                 400: '#f87171',
                 500: 'red',
               },
+              steel: 'rgb(70 130 180 / <alpha-value>)',
+              smoke: 'rgba(245, 245, 245, var(--smoke-alpha, <alpha-value>))',
             },
             fontSize: {
               xs: ['0.75rem', { lineHeight: '1rem' }],
@@ -174,6 +176,9 @@ test(
         --color-red-500: #ef4444;
         --color-red-600: #dc2626;
 
+        --color-steel: rgb(70 130 180);
+        --color-smoke: rgba(245, 245, 245, var(--smoke-alpha, 1));
+
         --text-*: initial;
         --text-xs: 0.75rem;
         --text-xs--line-height: 1rem;

packages/@tailwindcss-upgrade/src/migrate-js-config.ts

@@ -114,6 +114,16 @@ async function migrateTheme(
       continue
     }
 
+    if (typeof value === 'string') {
+      // This is more advanced than the version in core as ideally something
+      // like `rgba(0 0 0 / <alpha-value>)` becomes `rgba(0 0 0)`. Since we know
+      // from the `/` that it's used in an alpha channel and we can remove it.
+      //
+      // In other cases we may not know exactly how its used, so we'll just
+      // replace it with `1` like core does.
+      value = value.replace(/\s*\/\s*<alpha-value>/, '').replace(/<alpha-value>/, '1')
+    }
+
     if (key[0] === 'keyframes') {
       continue
     }