Show color decorators when utility has an opacity modifier in v4 (#969)

* Refactor

* Replace color vars with fallback value if hex

* Apply alpha-only `color-mix` to color when possible

* Re-enable tests

* Make sure gradient utilities show color decorators in v4

Author: thecrypticace

Diff for: packages/tailwindcss-language-server/tests/colors/colors.test.js

@@ -87,6 +87,68 @@ withFixture('basic', (c) => {
       },
     ],
   })
+
+  testColors('gradient utilities show colors', {
+    text: '<div class="from-black from-black/50 via-black via-black/50 to-black to-black/50">',
+    expected: [
+      {
+        range: { start: { line: 0, character: 12 }, end: { line: 0, character: 22 } },
+        color: {
+          alpha: 1,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+      {
+        range: { start: { line: 0, character: 23 }, end: { line: 0, character: 36 } },
+        color: {
+          alpha: 0.5,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+
+      {
+        range: { start: { line: 0, character: 37 }, end: { line: 0, character: 46 } },
+        color: {
+          alpha: 1,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+      {
+        range: { start: { line: 0, character: 47 }, end: { line: 0, character: 59 } },
+        color: {
+          alpha: 0.5,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+
+      {
+        range: { start: { line: 0, character: 60 }, end: { line: 0, character: 68 } },
+        color: {
+          alpha: 1,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+      {
+        range: { start: { line: 0, character: 69 }, end: { line: 0, character: 80 } },
+        color: {
+          alpha: 0.5,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+    ],
+  })
 })
 
 withFixture('v4/basic', (c) => {
@@ -116,7 +178,6 @@ withFixture('v4/basic', (c) => {
     ],
   })
 
-  /*
   testColors('opacity modifier', {
     text: '<div class="bg-red-500/20">',
     expected: [
@@ -131,7 +192,6 @@ withFixture('v4/basic', (c) => {
       },
     ],
   })
-   */
 
   testColors('arbitrary value', {
     text: '<div class="bg-[red]">',
@@ -148,7 +208,6 @@ withFixture('v4/basic', (c) => {
     ],
   })
 
-  /*
   testColors('arbitrary value and opacity modifier', {
     text: '<div class="bg-[red]/[0.5]">',
     expected: [
@@ -163,7 +222,6 @@ withFixture('v4/basic', (c) => {
       },
     ],
   })
-  */
 
   testColors('oklch colors are parsed', {
     text: '<div class="bg-[oklch(60%_0.25_25)]">',
@@ -179,4 +237,66 @@ withFixture('v4/basic', (c) => {
       },
     ],
   })
+
+  testColors('gradient utilities show colors', {
+    text: '<div class="from-black from-black/50 via-black via-black/50 to-black to-black/50">',
+    expected: [
+      {
+        range: { start: { line: 0, character: 12 }, end: { line: 0, character: 22 } },
+        color: {
+          alpha: 1,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+      {
+        range: { start: { line: 0, character: 23 }, end: { line: 0, character: 36 } },
+        color: {
+          alpha: 0.5,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+
+      {
+        range: { start: { line: 0, character: 37 }, end: { line: 0, character: 46 } },
+        color: {
+          alpha: 1,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+      {
+        range: { start: { line: 0, character: 47 }, end: { line: 0, character: 59 } },
+        color: {
+          alpha: 0.5,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+
+      {
+        range: { start: { line: 0, character: 60 }, end: { line: 0, character: 68 } },
+        color: {
+          alpha: 1,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+      {
+        range: { start: { line: 0, character: 69 }, end: { line: 0, character: 80 } },
+        color: {
+          alpha: 0.5,
+          red: 0,
+          green: 0,
+          blue: 0,
+        },
+      },
+    ],
+  })
 })

Diff for: packages/tailwindcss-language-service/src/util/color.ts

@@ -55,13 +55,27 @@ function replaceColorVarsWithTheirDefaults(str: string): string {
   return str.replace(/((?:rgba?|hsla?|(?:ok)?(?:lab|lch))\(\s*)var\([^,]+,\s*([^)]+)\)/gi, '$1$2')
 }
 
+function replaceHexColorVarsWithTheirDefaults(str: string): string {
+  // var(--color-red-500, #ef4444)
+  // -> #ef4444
+  return str.replace(/var\([^,]+,\s*(#[^)]+)\)/gi, '$1')
+}
+
 function getColorsInString(str: string): (culori.Color | KeywordColor)[] {
   if (/(?:box|drop)-shadow/.test(str)) return []
 
-  return Array.from(replaceColorVarsWithTheirDefaults(str).matchAll(colorRegex), (match) => {
+  function toColor(match: RegExpMatchArray) {
     let color = match[1].replace(/var\([^)]+\)/, '1')
     return getKeywordColor(color) ?? culori.parse(color)
-  }).filter(Boolean)
+  }
+
+  str = replaceHexColorVarsWithTheirDefaults(str)
+  str = replaceColorVarsWithTheirDefaults(str)
+  str = removeColorMixWherePossible(str)
+
+  let possibleColors = str.matchAll(colorRegex)
+
+  return Array.from(possibleColors, toColor).filter(Boolean)
 }
 
 function getColorFromDecls(
@@ -131,6 +145,21 @@ function getColorFromDecls(
 }
 
 function getColorFromRoot(state: State, css: postcss.Root): culori.Color | KeywordColor | null {
+  // Remove any `@property` rules
+  css = css.clone()
+  css.walkAtRules((rule) => {
+    // Ignore declarations inside `@property` rules
+    if (rule.name === 'property') {
+      rule.remove()
+    }
+
+    // Ignore declarations @supports (-moz-orient: inline)
+    // this is a hack used for `@property` fallbacks in Firefox
+    if (rule.name === 'supports' && rule.params === '(-moz-orient: inline)') {
+      rule.remove()
+    }
+  })
+
   let decls: Record<string, string[]> = {}
 
   let rule = postcss.rule({
@@ -238,3 +267,19 @@ export function formatColor(color: culori.Color): string {
 
   return culori.formatHex8(color)
 }
+
+const COLOR_MIX_REGEX = /color-mix\(in srgb, (.*?) (\d+|\.\d+|\d+\.\d+)%, transparent\)/g
+
+function removeColorMixWherePossible(str: string) {
+  return str.replace(COLOR_MIX_REGEX, (match, color, percentage) => {
+    if (color.startsWith('var(')) return match
+
+    let parsed = culori.parse(color)
+    if (!parsed) return match
+
+    let alpha = Number(percentage) / 100
+    if (Number.isNaN(alpha)) return match
+
+    return culori.formatRgb({ ...parsed, alpha })
+  })
+}