Add support for nested CSS variables

.changeset/thick-drinks-pump.md

@@ -0,0 +1,5 @@
+---
+"css-variables-language-server": minor
+---
+
+Add support for nested CSS variables.

packages/css-variables-language-server/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "culori": "0.20.1",
+    "culori": "^4.0.1",
     "fast-glob": "^3.2.7",
     "less": "^4.1.3",
     "line-column": "^1.0.2",

packages/css-variables-language-server/src/CSSVariableManager.ts

@@ -9,7 +9,6 @@ import path from 'path';
 import postcssSCSS from 'postcss-scss';
 import postcssLESS from 'postcss-less';
 import CacheManager from './CacheManager';
-import isColor from './utils/isColor';
 import { culoriColorToVscodeColor } from './utils/culoriColorToVscodeColor';
 
 export type CSSSymbol = {
@@ -55,7 +54,7 @@ const getAST = (filePath: string, content: string) => {
   if (fileExtension === '.less') {
     return postcssLESS.parse(content);
   }
-  
+
   if (fileExtension === '.scss') {
     return postcssSCSS.parse(content);
   }
@@ -66,6 +65,54 @@ const getAST = (filePath: string, content: string) => {
 export default class CSSVariableManager {
   private cacheManager = new CacheManager<CSSVariable>();
 
+  private resolveCachedVariables = () => {
+    for (const filePath of this.cacheManager.getFiles()) {
+      this.cacheManager.getAll(filePath).forEach((variable, key) => {
+        this.setCssVariable(key, this.resolveRecursiveVariables(variable.symbol.value), filePath, variable.definition.range);
+      });
+    }
+  };
+
+  public resolveRecursiveVariables = (value: string) => {
+    for (let i = 0; i < 20; i++) {
+      const variableReference = value.match(/^var\(\s*([a-zA-Z0-9-]+)\s*\)$/)?.[1];
+      if (variableReference) {
+        const newValue = this.cacheManager.get(variableReference)?.symbol?.value;
+        if (newValue) {
+          value = newValue;
+        } else {
+          break;
+        }
+      } else {
+        break;
+      }
+    }
+
+    return value;
+  };
+
+  public setCssVariable = (prop: string, value: string, filePath: string, range: Range) => {
+    const variable: CSSVariable = {
+      symbol: {
+        name: prop,
+        value: value,
+      },
+      definition: {
+        uri: filePath,
+        range: range,
+      },
+    };
+
+    const culoriColor = culori.parse(value);
+
+    if (culoriColor) {
+      variable.color = culoriColorToVscodeColor(culoriColor);
+    }
+
+    // add to cache
+    this.cacheManager.set(filePath, prop, variable);
+  };
+
   public parseCSSVariablesFromText = async ({
     content,
     filePath,
@@ -117,36 +164,25 @@ export default class CSSVariableManager {
 
       ast.walkDecls((decl) => {
         if (decl.prop.startsWith('--')) {
-          const variable: CSSVariable = {
-            symbol: {
-              name: decl.prop,
-              value: decl.value,
-            },
-            definition: {
-              uri: fileURI,
-              range: Range.create(
-                Position.create(
-                  decl.source.start.line - 1,
-                  decl.source.start.column - 1
-                ),
-                Position.create(
-                  decl.source.end.line - 1,
-                  decl.source.end.column - 1
-                )
+          this.setCssVariable(
+            decl.prop,
+            decl.value,
+            fileURI,
+            Range.create(
+              Position.create(
+                decl.source.start.line - 1,
+                decl.source.start.column - 1
               ),
-            },
-          };
-
-          const culoriColor = culori.parse(decl.value);
-
-          if (culoriColor) {
-            variable.color = culoriColorToVscodeColor(culoriColor);
-          }
-
-          // add to cache
-          this.cacheManager.set(filePath, decl.prop, variable);
+              Position.create(
+                decl.source.end.line - 1,
+                decl.source.end.column - 1
+              )
+            )
+          );
         }
       });
+
+      this.resolveCachedVariables();
     } catch (error) {
       console.error(filePath);
     }

packages/css-variables-language-server/src/CacheManager.ts

@@ -1,6 +1,6 @@
 /**
  * Cache Manager
- * 
+ *
  * {
  * 	 src/styles/variables.css: {
  * 	 },
@@ -14,37 +14,45 @@
 export default class CacheManager<T> {
 	private cachedVariables: Map<string, Map<string, T>> = new Map();
 	private allVariables: Map<string, T> = new Map();
-	
+
 	public get(key: string, filePath?: string) {
 		if (filePath) {
-			return this.cachedVariables[filePath]?.get(key);
+			return this.cachedVariables.get(filePath)?.get(key);
 		}
 
 		return this.allVariables?.get(key);
 	}
 
-	public getAll() {
+	public getAll(filePath?: string) {
+		if (filePath) {
+			return this.cachedVariables.get(filePath);
+		}
+
 		return this.allVariables;
 	}
 
+	public getFiles() {
+		return this.cachedVariables.keys();
+	}
+
 	public set(filePath: string, key: string, value: T) {
-		if (!this.cachedVariables[filePath]) {
-			this.cachedVariables[filePath] = new Map();
+		if (!this.cachedVariables.get(filePath)) {
+			this.cachedVariables.set(filePath, new Map());
 		}
 
-		this.allVariables?.set(key, value);
-    this.cachedVariables[filePath].set(key, value);
+		this.allVariables.set(key, value);
+		this.cachedVariables.get(filePath).set(key, value);
 	}
 
 	public clearFileCache(filePath: string) {
-		this.cachedVariables[filePath]?.forEach((_, key) => {
+		this.cachedVariables.get(filePath)?.forEach((_, key) => {
 			this.allVariables?.delete(key);
 		});
-		this.cachedVariables[filePath]?.clear();
+		this.cachedVariables.get(filePath)?.clear();
 	}
 
 	public clearAllCache() {
 		this.allVariables?.clear();
 		this.cachedVariables.clear();
 	}
-}
+}

packages/css-variables-language-server/src/tests/fixtures/css-nested/child/child.css

@@ -40,4 +40,4 @@
 
 .five {
   background-color: var(--main-bg-color);
-}
+}

packages/css-variables-language-server/src/tests/fixtures/css-nested/main.css

@@ -5,6 +5,7 @@
 	--h3: 18px;
 	--text-base: 16px;
 	--carousel-bg: var(--main-bg-color);
+	--carousel-bg-nested: var(--carousel-bg);
 }
 
 .one {
@@ -39,4 +40,4 @@
 
 .five {
   background-color: var(--main-bg-color);
-}
+}

packages/css-variables-language-server/src/tests/fixtures/import-url/child/child.css

@@ -40,4 +40,4 @@
 
 .five {
   background-color: var(--main-bg-color);
-}
+}

packages/css-variables-language-server/src/tests/fixtures/import-url/main.css

@@ -8,6 +8,7 @@
     --h3: 18px;
     --text-base: 16px;
     --carousel-bg: var(--main-bg-color);
+    --carousel-bg-nested: var(--carousel-bg);
   }
 }
 
@@ -43,4 +44,4 @@
 
 .five {
   background-color: var(--main-bg-color);
-}
+}

packages/css-variables-language-server/src/tests/fixtures/less-nested/child/child.less

@@ -40,4 +40,4 @@
 
 .five {
   background-color: var(--main-bg-color);
-}
+}

packages/css-variables-language-server/src/tests/fixtures/less-nested/main.less

@@ -5,6 +5,7 @@
 	--h3: 18px;
 	--text-base: 16px;
 	--carousel-bg: var(--main-bg-color);
+	--carousel-bg-nested: var(--carousel-bg);
 }
 
 .one {
@@ -39,4 +40,4 @@
 
 .five {
   background-color: var(--main-bg-color);
-}
+}

packages/css-variables-language-server/src/tests/fixtures/mixed-nested/child/child1.less

@@ -36,4 +36,4 @@
 
 .five {
   background-color: var(--main-bg-color);
-}
+}

packages/css-variables-language-server/src/tests/fixtures/mixed-nested/child/child2.css

@@ -37,4 +37,4 @@
 
 .five {
   background-color: var(--main-bg-color);
-}
+}

packages/css-variables-language-server/src/tests/fixtures/mixed-nested/main.scss

@@ -5,6 +5,7 @@
 	--h3: 18px;
 	--text-base: 16px;
 	--carousel-bg: var(--main-bg-color);
+	--carousel-bg-nested: var(--carousel-bg);
 }
 
 .one {
@@ -39,4 +40,4 @@
 
 .five {
   background-color: var(--main-bg-color);
-}
+}