Make sure gradient utilities show color decorators in v4

Author: thecrypticace

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) => {
@@ -175,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,
+        },
+      },
+    ],
+  })
 })

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

@@ -145,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({