From 7e2b53cd116d31b108c855208c0f9501a11f1261 Mon Sep 17 00:00:00 2001
From: Brad Cornes <bradlc41@gmail.com>
Date: Fri, 24 Sep 2021 15:05:07 +0100
Subject: [PATCH] avoid false positives when parsing colors (#415)

---
 .../tailwindcss-language-service/src/util/color.ts    | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index 04e2326..2001b05 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/packages/tailwindcss-language-service/src/util/color.ts
@@ -40,9 +40,9 @@ function getKeywordColor(value: unknown): KeywordColor | null {
 
 // https://github.com/khalilgharbaoui/coloregex
 const colorRegex = new RegExp(
-  `(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\\((-?[\\d.]+%?[,\\s]+){2,3}\\s*([\\d.]+%?|var\\([^)]+\\))?\\)|transparent|currentColor|${Object.keys(
+  `(?:^|\\s|,)(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\\((-?[\\d.]+%?[,\\s]+){2,3}\\s*([\\d.]+%?|var\\([^)]+\\))?\\)|transparent|currentColor|${Object.keys(
     colorNames
-  ).join('|')})`,
+  ).join('|')})(?:$|\\s|,)`,
   'gi'
 )
 
@@ -52,7 +52,12 @@ function getColorsInString(str: string): (TinyColor | KeywordColor)[] {
   return (
     str
       .match(colorRegex)
-      ?.map((color) => color.replace(/var\([^)]+\)/, '1'))
+      ?.map((color) =>
+        color
+          .trim()
+          .replace(/^,|,$/g, '')
+          .replace(/var\([^)]+\)/, '1')
+      )
       .map((color) => getKeywordColor(color) ?? new TinyColor(color))
       .filter((color) => (color instanceof TinyColor ? color.isValid : true)) ?? []
   )