Make sure new utilities can display color swatches

Author: thecrypticace

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

@@ -57,7 +57,7 @@ const colorRegex = new RegExp(
 )
 
 function getColorsInString(state: State, str: string): (culori.Color | KeywordColor)[] {
-  if (/(?:box|drop)-shadow/.test(str)) return []
+  if (/(?:box|drop)-shadow/.test(str) && !/--tw-drop-shadow/.test(str)) return []
 
   function toColor(match: RegExpMatchArray) {
     let color = match[1].replace(/var\([^)]+\)/, '1')
@@ -85,6 +85,17 @@ function getColorFromDecls(
     ) {
       return false
     }
+
+    // ignore mask-image & mask-composite
+    if (prop === 'mask-image' || prop === 'mask-composite') {
+      return false
+    }
+
+    // ignore `--tw-drop-shadow`
+    if (prop === '--tw-drop-shadow') {
+      return false
+    }
+
     return true
   })
 

packages/tailwindcss-language-service/src/util/rewriting/var-fallbacks.ts

@@ -17,6 +17,14 @@ export function replaceCssVarsWithFallbacks(state: State, str: string): string {
         return fallback
       }
 
+      if (
+        name === '--tw-text-shadow-alpha' ||
+        name === '--tw-drop-shadow-alpha' ||
+        name === '--tw-shadow-alpha'
+      ) {
+        return '100%'
+      }
+
       // Don't touch it since there's no suitable replacement
       return null
     },