more fixes

Author: bartveneman

package-lock.json

@@ -27,7 +27,7 @@
 		"@projectwallace/css-code-quality": "^3.0.2",
 		"@projectwallace/css-design-tokens": "^0.10.0",
 		"@projectwallace/css-layer-tree": "^2.0.2",
-		"@projectwallace/css-parser": "^0.8.1",
+		"@projectwallace/css-parser": "^0.8.3",
 		"@projectwallace/format-css": "^2.1.1",
 		"@sveltejs/enhanced-img": "0.4.4",
 		"@sveltejs/kit": "^2.49.0",

package.json

@@ -1,5 +1,5 @@
-import { test, expect } from 'vitest';
-import { analyze } from './analyze-custom-properties';
+import { test, expect } from 'vitest'
+import { analyze } from './analyze-custom-properties'
 
 test('unused property', () => {
 	let actual = analyze(`
@@ -22,9 +22,7 @@ test('undeclared property', () => {
 	expect(actual.undeclared_with_fallback.size).toBe(0)
 	expect(actual.unused.size).toBe(0)
 	expect(actual.all.size).toBe(1)
-	expect(actual.all.get('--undeclared')).toEqual([
-		{ column: 3, length: 25, line: 3, offset: 8 }
-	])
+	expect(actual.all.get('--undeclared')).toEqual([{ column: 10, length: 17, line: 3, offset: 15 }])
 })
 
 test('undeclared property with fallback', () => {
@@ -36,9 +34,7 @@ test('undeclared property with fallback', () => {
 	expect(actual.undeclared.size).toBe(0)
 	expect(actual.unused.size).toBe(0)
 	expect(actual.all.size).toBe(1)
-	expect(actual.all.get('--undeclared')).toEqual([
-		{ column: 3, length: 30, line: 3, offset: 8 }
-	])
+	expect(actual.all.get('--undeclared')).toEqual([{ column: 10, length: 22, line: 3, offset: 15 }])
 })
 
 test('undeclared property with undefined custom property as fallback', () => {
@@ -50,9 +46,8 @@ test('undeclared property with undefined custom property as fallback', () => {
 	expect(actual.undeclared.size).toBe(1)
 	expect(actual.unused.size).toBe(0)
 	expect(actual.all.size).toBe(2)
-	expect(actual.all.get('--undeclared')).toEqual([
-		{ column: 3, length: 46, line: 3, offset: 8 }
-	])
+	expect(actual.all.get('--undeclared')).toEqual([{ column: 10, length: 38, line: 3, offset: 15 }])
+	expect(actual.all.get('--undeclared-2')).toEqual([{ column: 28, length: 19, line: 3, offset: 33 }])
 })
 
 test('undeclared property with defined custom property as fallback', () => {
@@ -65,9 +60,7 @@ test('undeclared property with defined custom property as fallback', () => {
 	expect(actual.undeclared.size).toBe(0)
 	expect(actual.unused.size).toBe(0)
 	expect(actual.all.size).toBe(2)
-	expect(actual.all.get('--undeclared')).toEqual([
-		{ column: 3, length: 42, line: 4, offset: 25 }
-	])
+	expect(actual.all.get('--undeclared')).toEqual([{ column: 10, length: 34, line: 4, offset: 32 }])
 })
 
 test('undeclared property with empty fallback', () => {
@@ -79,9 +72,7 @@ test('undeclared property with empty fallback', () => {
 	expect(actual.undeclared.size).toBe(0)
 	expect(actual.unused.size).toBe(0)
 	expect(actual.all.size).toBe(1)
-	expect(actual.all.get('--undeclared')).toEqual([
-		{ column: 3, length: 27, line: 3, offset: 8 }
-	])
+	expect(actual.all.get('--undeclared')).toEqual([{ column: 10, length: 19, line: 3, offset: 15 }])
 })
 
 test('unused @property', () => {
@@ -94,9 +85,7 @@ test('unused @property', () => {
 	expect(actual.undeclared.size).toBe(0)
 	expect(actual.undeclared_with_fallback.size).toBe(0)
 	expect(actual.all.size).toBe(1)
-	expect(actual.all.get('--unused')).toEqual([
-		{ column: 2, length: 66, line: 2, offset: 2 }
-	])
+	expect(actual.all.get('--unused')).toEqual([{ column: 2, length: 66, line: 2, offset: 2 }])
 })
 
 test('used @property', () => {
@@ -114,6 +103,6 @@ test('used @property', () => {
 	expect(actual.all.size).toBe(1)
 	expect(actual.all.get('--used')).toEqual([
 		{ column: 2, length: 64, line: 2, offset: 2 },
-		{ column: 3, length: 15, line: 7, offset: 74 }
+		{ column: 6, length: 11, line: 7, offset: 77 }
 	])
-})
+})

src/lib/components/custom-property-inspector/analyze-custom-properties.test.ts

@@ -18,43 +18,27 @@ export function analyze(css: string) {
 	let all_properties = new Map<string, CssLocation[]>()
 	let declared_with_fallback = new Set<string>()
 
-	// Helper to recursively walk values and find all var() functions
-	function walk_values(value_node: CSSNode, declaration_node: CSSNode) {
-		if (value_node.type === FUNCTION && value_node.name === 'var') {
-			let first_child = value_node.first_child
-			if (first_child !== null && first_child.type === IDENTIFIER && first_child.name.startsWith('--')) {
-				let loc = to_loc(declaration_node)
-				let name = first_child.name
-				used_properties.add(name)
-				all_properties.set(name, (all_properties.get(name) ?? []).concat(loc))
-
-				// check if it has a fallback value that is a custom property
-				let children = value_node.children
-				let second_child = children[1]
-				if (second_child !== undefined && !(second_child.type === FUNCTION && second_child.name === 'var')) {
-					declared_with_fallback.add(name)
-				}
-			}
-		}
-
-		// Recursively walk children to find nested var() calls
-		for (let child of value_node.children) {
-			walk_values(child, declaration_node)
-		}
-	}
-
 	walk(ast, (node: CSSNode) => {
 		if (node.type === DECLARATION) {
 			if (node.property.startsWith('--')) {
-				let loc = to_loc(node)
 				let name = node.property
+				let loc = to_loc(node)
 				declared_properties.add(name)
 				all_properties.set(name, (all_properties.get(name) ?? []).concat(loc))
 			}
+		} else if (node.type === FUNCTION && node.name === 'var') {
+			let [first_child, second_child] = node.children
+
+			if (first_child?.type === IDENTIFIER && first_child.name.startsWith('--')) {
+				let loc = to_loc(node)
+				let name = first_child.name
+				used_properties.add(name)
+				all_properties.set(name, (all_properties.get(name) ?? []).concat(loc))
 
-			// Check for var() usage in declaration values (recursively)
-			for (let value of node.values) {
-				walk_values(value, node)
+				// check if it has a fallback value that is a custom property
+				if (second_child !== undefined && !(second_child.type === FUNCTION && second_child.name === 'var')) {
+					declared_with_fallback.add(name)
+				}
 			}
 		} else if (node.type === AT_RULE && node.name === 'property') {
 			let name = node.prelude!