1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index 8334a180d2594f43233b4ceb938feac4974cf701..b7b55ca6e3a5bfe3b2b725a80d9000e463cbd576 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/packages/tailwindcss-language-service/src/util/color.ts
@@ -42,16 +42,22 @@ }
// https://github.com/khalilgharbaoui/coloregex
const colorRegex = new RegExp(
- `(?:^|\\s|\\(|,)(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\\((-?[\\d.]+%?(\\s*[,/]\\s*|\\s+)+){2,3}\\s*([\\d.]+%?|var\\([^)]+\\))?\\)|transparent|currentColor|${Object.keys(
+ `(?:^|\\s|\\(|,)(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\\(\\s*(-?[\\d.]+%?(\\s*[,/]\\s*|\\s+)+){2,3}\\s*([\\d.]+%?|var\\([^)]+\\))?\\)|transparent|currentColor|${Object.keys(
namedColors
).join('|')})(?:$|\\s|\\)|,)`,
'gi'
)
+function replaceColorVarsWithTheirDefaults(str: string): string {
+ // rgb(var(--primary, 66 66 66))
+ // -> rgb(66 66 66)
+ return str.replace(/((?:rgb|hsl)a?\(\s*)var\([^,]+,\s*([^)]+)\)/gi, '$1$2')
+}
+
function getColorsInString(str: string): (culori.Color | KeywordColor)[] {
if (/(?:box|drop)-shadow/.test(str)) return []
- return Array.from(str.matchAll(colorRegex), (match) => {
+ return Array.from(replaceColorVarsWithTheirDefaults(str).matchAll(colorRegex), (match) => {
let color = match[1].replace(/var\([^)]+\)/, '1')
return getKeywordColor(color) ?? culori.parse(color)
}).filter(Boolean)
|