migrate theme(…) to --theme(…)

Author: RobinMalfait

packages/@tailwindcss-upgrade/src/codemods/migrate-theme-to-var.test.ts

@@ -35,11 +35,11 @@ it('should migrate `theme(…)` to `var(…)`', async () => {
       }
     `),
   ).toMatchInlineSnapshot(`
-    "@media theme(--breakpoint-sm) {
+    "@media --theme(--breakpoint-sm) {
       .foo {
         background-color: var(--color-red-900);
-        color: theme(--color-red-900 / 75%);
-        border-color: theme(--color-red-200 / 75%);
+        color: --theme(--color-red-900 / 75%);
+        border-color: --theme(--color-red-200 / 75%);
       }
     }"
   `)

packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts

@@ -14,7 +14,7 @@ test.each([
   ['[--value:theme(spacing[1.25])]', '[--value:--spacing(1.25)]'],
 
   // Should not convert invalid spacing values to calc
-  ['[--value:theme(spacing[1.1])]', '[--value:theme(spacing[1.1])]'],
+  ['[--value:theme(spacing[1.1])]', '[--value:--theme(spacing[1.1])]'],
 
   // Convert to `var(…)` if we can resolve the path
   ['[color:theme(colors.red.500)]', '[color:var(--color-red-500)]'], // Arbitrary property
@@ -26,13 +26,13 @@ test.each([
   ['bg-[theme(colors.red.500,red)]', 'bg-(--color-red-500,red)'],
 
   // Keep `theme(…)` if we can't resolve the path
-  ['bg-[theme(colors.foo.1000)]', 'bg-[theme(colors.foo.1000)]'],
+  ['bg-[theme(colors.foo.1000)]', 'bg-[--theme(colors.foo.1000)]'],
 
   // Keep `theme(…)` if we can't resolve the path, but still try to convert the
   // fallback value.
   [
     'bg-[theme(colors.foo.1000,theme(colors.red.500))]',
-    'bg-[theme(colors.foo.1000,var(--color-red-500))]',
+    'bg-[--theme(colors.foo.1000,var(--color-red-500))]',
   ],
 
   // Use `theme(…)` (deeply nested) inside of a `calc(…)` function
@@ -47,11 +47,11 @@ test.each([
   //   to a candidate modifier _if_ all `theme(…)` calls use the same modifier.
   [
     '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]',
-    '[color:theme(--color-red-500/50,theme(--color-blue-500/50))]',
+    '[color:--theme(--color-red-500/50,--theme(--color-blue-500/50))]',
   ],
   [
     '[color:theme(colors.red.500/50,theme(colors.blue.500/50))]/50',
-    '[color:theme(--color-red-500/50,theme(--color-blue-500/50))]/50',
+    '[color:--theme(--color-red-500/50,--theme(--color-blue-500/50))]/50',
   ],
 
   // Convert the `theme(…)`, but try to move the inline modifier (e.g. `50%`),
@@ -75,52 +75,52 @@ test.each([
   ['bg-[theme(colors.red.500/12.34%)]', 'bg-(--color-red-500)/[12.34%]'],
 
   // Arbitrary property that already contains a modifier
-  ['[color:theme(colors.red.500/50%)]/50', '[color:theme(--color-red-500/50%)]/50'],
+  ['[color:theme(colors.red.500/50%)]/50', '[color:--theme(--color-red-500/50%)]/50'],
 
   // Values that don't contain only `theme(…)` calls should not be converted to
   // use a modifier since the color is not the whole value.
   [
     'shadow-[shadow:inset_0px_1px_theme(colors.white/15%)]',
-    'shadow-[shadow:inset_0px_1px_theme(--color-white/15%)]',
+    'shadow-[shadow:inset_0px_1px_--theme(--color-white/15%)]',
   ],
 
   // Arbitrary value, where the candidate already contains a modifier
   // This should still migrate the `theme(…)` syntax to the modern syntax.
-  ['bg-[theme(colors.red.500/50%)]/50', 'bg-[theme(--color-red-500/50%)]/50'],
+  ['bg-[theme(colors.red.500/50%)]/50', 'bg-[--theme(--color-red-500/50%)]/50'],
 
   // Variants, we can't use `var(…)` especially inside of `@media(…)`. We can
   // still upgrade the `theme(…)` to the modern syntax.
-  ['max-[theme(screens.lg)]:flex', 'max-[theme(--breakpoint-lg)]:flex'],
+  ['max-[theme(screens.lg)]:flex', 'max-[--theme(--breakpoint-lg)]:flex'],
   // There are no variables for `--spacing` multiples, so we can't convert this
-  ['max-[theme(spacing.4)]:flex', 'max-[theme(spacing.4)]:flex'],
+  ['max-[theme(spacing.4)]:flex', 'max-[--theme(spacing.4)]:flex'],
 
   // This test in itself doesn't make much sense. But we need to make sure
   // that this doesn't end up as the modifier in the candidate itself.
-  ['max-[theme(spacing.4/50)]:flex', 'max-[theme(spacing.4/50)]:flex'],
+  ['max-[theme(spacing.4/50)]:flex', 'max-[--theme(spacing.4/50)]:flex'],
 
   // `theme(…)` calls in another CSS function is replaced correctly.
   // Additionally we remove unnecessary whitespace.
   ['grid-cols-[min(50%_,_theme(spacing.80))_auto]', 'grid-cols-[min(50%,--spacing(80))_auto]'],
 
   // `theme(…)` calls valid in v3, but not in v4 should still be converted.
-  ['[--foo:theme(transitionDuration.500)]', '[--foo:theme(transitionDuration.500)]'],
+  ['[--foo:theme(transitionDuration.500)]', '[--foo:--theme(transitionDuration.500)]'],
 
   // Renamed theme keys
   ['max-w-[theme(screens.md)]', 'max-w-(--breakpoint-md)'],
   ['w-[theme(maxWidth.md)]', 'w-(--container-md)'],
 
   // Invalid cases
-  ['[--foo:theme(colors.red.500/50/50)]', '[--foo:theme(colors.red.500/50/50)]'],
-  ['[--foo:theme(colors.red.500/50/50)]/50', '[--foo:theme(colors.red.500/50/50)]/50'],
+  ['[--foo:theme(colors.red.500/50/50)]', '[--foo:--theme(colors.red.500/50/50)]'],
+  ['[--foo:theme(colors.red.500/50/50)]/50', '[--foo:--theme(colors.red.500/50/50)]/50'],
 
   // Partially invalid cases
   [
     '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]',
-    '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]',
+    '[--foo:--theme(colors.red.500/50/50)_var(--color-blue-200)]',
   ],
   [
     '[--foo:theme(colors.red.500/50/50)_theme(colors.blue.200)]/50',
-    '[--foo:theme(colors.red.500/50/50)_var(--color-blue-200)]/50',
+    '[--foo:--theme(colors.red.500/50/50)_var(--color-blue-200)]/50',
   ],
 ])('%s => %s', async (candidate, result) => {
   let designSystem = await __unstable__loadDesignSystem(
@@ -158,7 +158,7 @@ test('extended space scale converts to var or calc', async () => {
     '[--value:var(--spacing-miami)]',
   )
   expect(themeToVar(designSystem, {}, '[--value:theme(spacing.nyc)]')).toEqual(
-    '[--value:theme(spacing.nyc)]',
+    '[--value:--theme(spacing.nyc)]',
   )
 })
 
@@ -183,6 +183,6 @@ test('custom space scale converts to var', async () => {
     '[--value:var(--spacing-2)]',
   )
   expect(themeToVar(designSystem, {}, '[--value:theme(spacing.3)]')).toEqual(
-    '[--value:theme(spacing.3)]',
+    '[--value:--theme(spacing.3)]',
   )
 })

packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.ts

@@ -149,7 +149,7 @@ export function createConverter(designSystem: DesignSystem, { prettyPrint = fals
 
       // Multiple `/` separators, which makes this an invalid path
       if (parts.length > 2) {
-        return null
+        return `--theme(${parts.join('/')})`
       }
 
       // The path contains a `/`, which means that there is a modifier such as
@@ -227,7 +227,9 @@ export function createConverter(designSystem: DesignSystem, { prettyPrint = fals
 
     let modifier =
       parts.length > 0 ? (prettyPrint ? ` / ${parts.join(' / ')}` : `/${parts.join('/')}`) : ''
-    return fallback ? `theme(${variable}${modifier}, ${fallback})` : `theme(${variable}${modifier})`
+    return fallback
+      ? `--theme(${variable}${modifier}, ${fallback})`
+      : `--theme(${variable}${modifier})`
   }
 
   return convert
@@ -239,6 +241,8 @@ function substituteFunctionsInValue(
 ) {
   ValueParser.walk(ast, (node, { replaceWith }) => {
     if (node.kind === 'function' && node.value === 'theme') {
+      node.value = '--theme'
+
       if (node.nodes.length < 1) return
 
       // Ignore whitespace before the first argument