Merge pull request #111 from willofindie/fix/issue-110

 fix: `node.nodes` can be empty for some rules

Author: phoenisx

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.6.4](https://github.com/willofindie/vscode-cssvar/compare/v2.6.3...2.6.4) - 2023-10-12
+### Fixes
+-  #110(https://github.com/willofindie/vscode-cssvar/issues/110) Failed to parse CSS variable with @layer declaration
+
 
 ## [2.6.3](https://github.com/willofindie/vscode-cssvar/compare/v2.6.2...v2.6.3) - 2023-07-02
 ### Fixes

README.md

@@ -119,13 +119,13 @@ Please find details for CSS colors [here in MDN Docs](https://developer.mozilla.
 
 <br><br><br><br>
 
-<h3 align="center">Phoenisx Sponsors</h3>
+<!-- <h3 align="center">Phoenisx Sponsors</h3>
 
 <p align="center">
   <a href="./img/sponsors.png">
     <img src='./img/sponsors.png'/>
   </a>
-</p>
+</p> -->
 
 
 

examples/css-imports/local.css

@@ -1,6 +1,18 @@
 @import url("https://unpkg.com/[email protected]/orange.min.css");
 @import url(./nested.css);
 
+@layer x01, x02;
+@layer x01 {
+  .test {
+    --test-x01: green;
+  }
+}
+@layer x02 {
+  .test {
+    --test-x01: red;
+  }
+}
+
 :root {
   --gap-sm: 0.25rem;
   --gap-md: 0.5rem;

package.json

@@ -20,7 +20,7 @@
 		"typescript"
 	],
 	"description": "Intellisense support for CSS Variables",
-	"version": "2.6.3",
+	"version": "2.6.4",
 	"publisher": "phoenisx",
 	"license": "MIT",
 	"homepage": "https://github.com/willofindie/vscode-cssvar",

src/parser.ts

@@ -192,7 +192,7 @@ export function getVariableDeclarations(
   if (isNodeType<Rule>(node, SUPPORTED_CSS_RULE_TYPES[0])) {
     // For proper theming, following filter condition should be improved
     const [theme] = config.themes.filter(theme => node.selector.match(theme));
-    if (!config.excludeThemedVariables || !theme) {
+    if (node.nodes && (!config.excludeThemedVariables || !theme)) {
       for (const _node of node.nodes) {
         const decls = getVariableDeclarations(config, _node, {
           ...options,
@@ -208,9 +208,11 @@ export function getVariableDeclarations(
     isNodeType<AtRule>(node, SUPPORTED_CSS_RULE_TYPES[2]) &&
     SUPPORTED_EVALUATING_ATRULES.has(node.name)
   ) {
-    for (const _node of node.nodes) {
-      const decls = getVariableDeclarations(config, _node, options);
-      declarations = declarations.concat(decls);
+    if (node.nodes) {
+      for (const _node of node.nodes) {
+        const decls = getVariableDeclarations(config, _node, options);
+        declarations = declarations.concat(decls);
+      }
     }
   }
 

src/test/at-rules.css

@@ -0,0 +1,16 @@
+@layer x01, x02;
+@layer x02 {
+  .test {
+    color: firebrick;
+  }
+}
+@layer x01 {
+  .test {
+    color: limegreen;
+  }
+}
+
+:root {
+  --red100: #f00;
+  --red500: #f24455;
+}

src/test/parser.test.ts

@@ -11,6 +11,7 @@ import { fetchAndCacheAsset } from "../remote-paths";
 const MODIFIED_DATE = new Date("2021-04-12T08:58:58.676Z");
 const DUMMY_FILE = path.resolve("src", "test", "touch.css");
 const RENAMED_FILE = path.resolve("src", "test", "renamed.css");
+const AT_RULES_CSS = path.resolve("src", "test", "at-rules.css");
 const BROKEN_FILE = path.resolve("src", "test", "broken.css");
 const IMPORT_BASE = path.resolve("src", "test", "css-imports");
 const IMPORT_CSS_FILE = path.resolve(IMPORT_BASE, "import.css");
@@ -153,6 +154,19 @@ describe("Test Parser", () => {
       await parseFiles(updatedConfig);
       expect(fetchAndCacheAsset).toHaveBeenCalledTimes(0);
     });
+
+    it("Should parse at-rules", async () => {
+      // Updated config should contain the latest renamed file name.
+      const updatedConfig: ConfigRecord = {
+        [CACHE.activeRootPath]: {
+          ...EXTENSION_CONFIG[CACHE.activeRootPath],
+          files: [getLocalCSSVarLocation(AT_RULES_CSS)],
+        },
+      };
+      CACHE.config = updatedConfig;
+      const [_, errorPaths] = await parseFiles(updatedConfig);
+      expect(errorPaths.length).toBe(0);
+    });
   });
 
   describe("parseFiles handle improper CSS Files", () => {