Refactor

Refactor

Author: thecrypticace

packages/tailwindcss-language-service/src/util/color.ts

@@ -56,7 +56,7 @@ const colorRegex = new RegExp(
   'gi',
 )
 
-function getColorsInString(str: string): (culori.Color | KeywordColor)[] {
+function getColorsInString(state: State, str: string): (culori.Color | KeywordColor)[] {
   if (/(?:box|drop)-shadow/.test(str)) return []
 
   function toColor(match: RegExpMatchArray) {
@@ -73,6 +73,7 @@ function getColorsInString(str: string): (culori.Color | KeywordColor)[] {
 }
 
 function getColorFromDecls(
+  state: State,
   decls: Record<string, string | string[]>,
 ): culori.Color | KeywordColor | null {
   let props = Object.keys(decls).filter((prop) => {
@@ -99,7 +100,9 @@ function getColorFromDecls(
 
   const propsToCheck = areAllCustom ? props : nonCustomProps
 
-  const colors = propsToCheck.flatMap((prop) => ensureArray(decls[prop]).flatMap(getColorsInString))
+  const colors = propsToCheck.flatMap((prop) => ensureArray(decls[prop]).flatMap((str) => {
+    return getColorsInString(state, str)
+  }))
 
   // check that all of the values are valid colors
   // if (colors.some((color) => color instanceof TinyColor && !color.isValid)) {
@@ -170,7 +173,7 @@ function getColorFromRoot(state: State, css: postcss.Root): culori.Color | Keywo
     decls[decl.prop].push(decl.value)
   })
 
-  return getColorFromDecls(decls)
+  return getColorFromDecls(state, decls)
 }
 
 export function getColor(state: State, className: string): culori.Color | KeywordColor | null {
@@ -186,7 +189,7 @@ export function getColor(state: State, className: string): culori.Color | Keywor
     if (state.classNames) {
       const item = dlv(state.classNames.classNames, [className, '__info'])
       if (item && item.__rule) {
-        return getColorFromDecls(removeMeta(item))
+        return getColorFromDecls(state, removeMeta(item))
       }
     }
 
@@ -215,7 +218,7 @@ export function getColor(state: State, className: string): culori.Color | Keywor
         decls[decl.prop] = decl.value
       }
     })
-    return getColorFromDecls(decls)
+    return getColorFromDecls(state, decls)
   }
 
   let parts = getClassNameParts(state, className)
@@ -224,7 +227,7 @@ export function getColor(state: State, className: string): culori.Color | Keywor
   const item = dlv(state.classNames.classNames, [...parts, '__info'])
   if (!item.__rule) return null
 
-  return getColorFromDecls(removeMeta(item))
+  return getColorFromDecls(state, removeMeta(item))
 }
 
 export function getColorFromValue(value: unknown): culori.Color | KeywordColor | null {

packages/tailwindcss-language-service/src/util/css-vars.ts

@@ -1,4 +1,17 @@
 export function replaceCssVarsWithFallbacks(str: string): string {
+  return replaceCssVars(str, (name, fallback) => {
+    if (fallback) {
+      return fallback
+    }
+
+    // Don't touch it since there's no suitable replacement
+    return null
+  })
+}
+
+type CssVarReplacer = (name: string, fallback: string | null) => string | null
+
+function replaceCssVars(str: string, replace: CssVarReplacer): string {
   for (let i = 0; i < str.length; ++i) {
     if (!str.startsWith('var(', i)) continue
 
@@ -13,13 +26,31 @@ export function replaceCssVarsWithFallbacks(str: string): string {
       } else if (str[j] === ',' && depth === 0 && fallbackStart === null) {
         fallbackStart = j + 1
       } else if (str[j] === ')' && depth === 0) {
+        let varName: string
+        let fallback: string | null
+
         if (fallbackStart === null) {
-          i = j + 1
+          varName = str.slice(i + 4, j)
+          fallback = null
+        } else {
+          varName = str.slice(i + 4, fallbackStart - 1)
+          fallback = str.slice(fallbackStart, j)
+        }
+
+        let replacement = replace(varName, fallback)
+
+        if (replacement !== null) {
+          str = str.slice(0, i) + replacement + str.slice(j + 1)
+
+          // We don't want to skip past anything here because `replacement`
+          // might contain more var(…) calls in which case `i` will already
+          // be pointing at the right spot to start looking for them
           break
         }
 
-        let fallbackEnd = j
-        str = str.slice(0, i) + str.slice(fallbackStart, fallbackEnd) + str.slice(j + 1)
+        // It can't be replaced so we can avoid unncessary work by skipping over
+        // the entire var(…) call.
+        i = j + 1
         break
       }
     }