ensure anchor-size can be used in arbitrary values

Working approach #1
tailwindlabs · Sep 17, 2024 · 741808b · 741808b
1 parent 5bab493
commit 741808b
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/packages/tailwindcss/src/utils/math-operators.ts b/packages/tailwindcss/src/utils/math-operators.ts
@@ -20,6 +20,8 @@ const MATH_FUNCTIONS = [
   'round',
 ]
 
+const KNOWN_DASHED_FUNCTIONS = ['anchor-size']
+
 export function hasMathFn(input: string) {
   return input.indexOf('(') !== -1 && MATH_FUNCTIONS.some((fn) => input.includes(`${fn}(`))
 }
@@ -35,6 +37,13 @@ export function addWhitespaceAroundMathOperators(input: string) {
     return input
   }
 
+  // Replace known functions with a placeholder
+  let hasKnownFunctions = false
+  input = input.replace(new RegExp(`(${KNOWN_DASHED_FUNCTIONS.join('|')})\\(`, 'g'), (_, fn) => {
+    hasKnownFunctions = true
+    return `$${KNOWN_DASHED_FUNCTIONS.indexOf(fn)}$(`
+  })
+
   let result = ''
   let formattable: boolean[] = []
 
@@ -150,5 +159,9 @@ export function addWhitespaceAroundMathOperators(input: string) {
     }
   }
 
+  if (hasKnownFunctions) {
+    return result.replace(/\$(\d+)\$/g, (_, idx) => KNOWN_DASHED_FUNCTIONS[idx])
+  }
+
   return result
 }