Refactor replaceShadowColors(…) to print AST

packages/tailwindcss/src/utilities.ts

@@ -4999,9 +4999,11 @@ export function createUtilities(theme: Theme) {
         return [
           textShadowProperties(),
           decl('--tw-text-shadow-alpha', alpha),
-          decl(
+          ...replaceShadowColors(
             'text-shadow',
-            replaceShadowColors(value, alpha, (color) => `var(--tw-text-shadow-color, ${color})`),
+            value,
+            alpha,
+            (color) => `var(--tw-text-shadow-color, ${color})`,
           ),
         ]
       }
@@ -5023,13 +5025,11 @@ export function createUtilities(theme: Theme) {
             return [
               textShadowProperties(),
               decl('--tw-text-shadow-alpha', alpha),
-              decl(
+              ...replaceShadowColors(
                 'text-shadow',
-                replaceShadowColors(
-                  value,
-                  alpha,
-                  (color) => `var(--tw-text-shadow-color, ${color})`,
-                ),
+                value,
+                alpha,
+                (color) => `var(--tw-text-shadow-color, ${color})`,
               ),
             ]
           }
@@ -5049,9 +5049,11 @@ export function createUtilities(theme: Theme) {
           return [
             textShadowProperties(),
             decl('--tw-text-shadow-alpha', alpha),
-            decl(
+            ...replaceShadowColors(
               'text-shadow',
-              replaceShadowColors(value, alpha, (color) => `var(--tw-text-shadow-color, ${color})`),
+              value,
+              alpha,
+              (color) => `var(--tw-text-shadow-color, ${color})`,
             ),
           ]
         }
@@ -5139,9 +5141,11 @@ export function createUtilities(theme: Theme) {
         return [
           boxShadowProperties(),
           decl('--tw-shadow-alpha', alpha),
-          decl(
+          ...replaceShadowColors(
             '--tw-shadow',
-            replaceShadowColors(value, alpha, (color) => `var(--tw-shadow-color, ${color})`),
+            value,
+            alpha,
+            (color) => `var(--tw-shadow-color, ${color})`,
           ),
           decl('box-shadow', cssBoxShadowValue),
         ]
@@ -5165,9 +5169,11 @@ export function createUtilities(theme: Theme) {
             return [
               boxShadowProperties(),
               decl('--tw-shadow-alpha', alpha),
-              decl(
+              ...replaceShadowColors(
                 '--tw-shadow',
-                replaceShadowColors(value, alpha, (color) => `var(--tw-shadow-color, ${color})`),
+                value,
+                alpha,
+                (color) => `var(--tw-shadow-color, ${color})`,
               ),
               decl('box-shadow', cssBoxShadowValue),
             ]
@@ -5192,9 +5198,11 @@ export function createUtilities(theme: Theme) {
           return [
             boxShadowProperties(),
             decl('--tw-shadow-alpha', alpha),
-            decl(
+            ...replaceShadowColors(
               '--tw-shadow',
-              replaceShadowColors(value, alpha, (color) => `var(--tw-shadow-color, ${color})`),
+              value,
+              alpha,
+              (color) => `var(--tw-shadow-color, ${color})`,
             ),
             decl('box-shadow', cssBoxShadowValue),
           ]
@@ -5254,9 +5262,11 @@ export function createUtilities(theme: Theme) {
         return [
           boxShadowProperties(),
           decl('--tw-inset-shadow-alpha', alpha),
-          decl(
+          ...replaceShadowColors(
             '--tw-inset-shadow',
-            replaceShadowColors(value, alpha, (color) => `var(--tw-inset-shadow-color, ${color})`),
+            value,
+            alpha,
+            (color) => `var(--tw-inset-shadow-color, ${color})`,
           ),
           decl('box-shadow', cssBoxShadowValue),
         ]
@@ -5280,13 +5290,12 @@ export function createUtilities(theme: Theme) {
             return [
               boxShadowProperties(),
               decl('--tw-inset-shadow-alpha', alpha),
-              decl(
+              ...replaceShadowColors(
                 '--tw-inset-shadow',
-                `inset ${replaceShadowColors(
-                  value,
-                  alpha,
-                  (color) => `var(--tw-inset-shadow-color, ${color})`,
-                )}`,
+                value,
+                alpha,
+                (color) => `var(--tw-inset-shadow-color, ${color})`,
+                'inset ',
               ),
               decl('box-shadow', cssBoxShadowValue),
             ]
@@ -5312,13 +5321,11 @@ export function createUtilities(theme: Theme) {
           return [
             boxShadowProperties(),
             decl('--tw-inset-shadow-alpha', alpha),
-            decl(
+            ...replaceShadowColors(
               '--tw-inset-shadow',
-              replaceShadowColors(
-                value,
-                alpha,
-                (color) => `var(--tw-inset-shadow-color, ${color})`,
-              ),
+              value,
+              alpha,
+              (color) => `var(--tw-inset-shadow-color, ${color})`,
             ),
             decl('box-shadow', cssBoxShadowValue),
           ]

packages/tailwindcss/src/utils/replace-shadow-colors.test.ts

@@ -1,72 +1,81 @@
 import { expect, it } from 'vitest'
+import { toCss } from '../ast'
 import { replaceShadowColors } from './replace-shadow-colors'
 
 const table = [
   {
-    input: 'var(--my-shadow)',
-    output: 'var(--my-shadow)',
+    input: ['text-shadow', 'var(--my-shadow)'],
+    output: 'text-shadow: var(--my-shadow);',
   },
   {
-    input: '1px var(--my-shadow)',
-    output: '1px var(--my-shadow)',
+    input: ['text-shadow', '1px var(--my-shadow)'],
+    output: 'text-shadow: 1px var(--my-shadow);',
   },
   {
-    input: '1px 1px var(--my-color)',
-    output: '1px 1px var(--tw-shadow-color, var(--my-color))',
+    input: ['text-shadow', '1px 1px var(--my-color)'],
+    output: 'text-shadow: 1px 1px var(--tw-shadow-color, var(--my-color));',
   },
   {
-    input: '0 0 0 var(--my-color)',
-    output: '0 0 0 var(--tw-shadow-color, var(--my-color))',
+    input: ['text-shadow', '0 0 0 var(--my-color)'],
+    output: 'text-shadow: 0 0 0 var(--tw-shadow-color, var(--my-color));',
   },
   {
-    input: '1px 2px',
-    output: '1px 2px var(--tw-shadow-color, currentcolor)',
+    input: ['text-shadow', '1px 2px'],
+    output: 'text-shadow: 1px 2px var(--tw-shadow-color, currentcolor);',
   },
   {
-    input: '1px 2px 3px',
-    output: '1px 2px 3px var(--tw-shadow-color, currentcolor)',
+    input: ['text-shadow', '1px 2px 3px'],
+    output: 'text-shadow: 1px 2px 3px var(--tw-shadow-color, currentcolor);',
   },
   {
-    input: '1px 2px 3px 4px',
-    output: '1px 2px 3px 4px var(--tw-shadow-color, currentcolor)',
+    input: ['text-shadow', '1px 2px 3px 4px'],
+    output: 'text-shadow: 1px 2px 3px 4px var(--tw-shadow-color, currentcolor);',
   },
   {
-    input: ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
-    output: [
+    input: [
+      'text-shadow',
+      ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
+    ],
+    output: `text-shadow: ${[
       'var(--my-shadow)',
       '1px 1px var(--tw-shadow-color, var(--my-color))',
       '0 0 1px var(--tw-shadow-color, var(--my-color))',
-    ].join(', '),
+    ].join(', ')};`,
   },
   {
-    input: '1px 1px var(--my-color)',
+    input: ['text-shadow', '1px 1px var(--my-color)'],
     intensity: '50%',
-    output: '1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
+    output: 'text-shadow: 1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%));',
   },
   {
-    input: '1px 2px 3px 4px',
+    input: ['text-shadow', '1px 2px 3px 4px'],
     intensity: '50%',
-    output: '1px 2px 3px 4px var(--tw-shadow-color, oklab(from currentcolor l a b / 50%))',
+    output:
+      'text-shadow: 1px 2px 3px 4px var(--tw-shadow-color, oklab(from currentcolor l a b / 50%));',
   },
   {
-    input: ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
+    input: [
+      'text-shadow',
+      ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
+    ],
     intensity: '50%',
-    output: [
+    output: `text-shadow: ${[
       'var(--my-shadow)',
       '1px 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
       '0 0 1px var(--tw-shadow-color, oklab(from var(--my-color) l a b / 50%))',
-    ].join(', '),
+    ].join(', ')};`,
   },
 ]
 
 it.each(table)(
   'should replace the color of box-shadow $input with $output',
   ({ input, intensity = null, output }) => {
     let parsed = replaceShadowColors(
-      input,
+      input[0],
+      input[1],
       intensity,
       (color) => `var(--tw-shadow-color, ${color})`,
     )
-    expect(parsed).toEqual(output)
+    expect(toCss(parsed).trim()).toEqual(output)
   },
 )

packages/tailwindcss/src/utils/replace-shadow-colors.ts

@@ -1,14 +1,17 @@
+import { decl, type AstNode } from '../ast'
 import { replaceAlpha } from '../utilities'
 import { segment } from './segment'
 
 const KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
 const LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
 
 export function replaceShadowColors(
+  property: string,
   input: string,
   intensity: string | null | undefined,
   replacement: (color: string) => string,
-) {
+  prefix: string = '',
+): AstNode[] {
   let shadows = segment(input, ',').map((shadow) => {
     shadow = shadow.trim()
     let parts = segment(shadow, ' ').filter((part) => part.trim() !== '')
@@ -49,5 +52,5 @@ export function replaceShadowColors(
     return `${shadow} ${replacementColor}`
   })
 
-  return shadows.join(', ')
+  return [decl(property, `${prefix}${shadows.join(', ')}`)]
 }