fix: address css class matching regression (#16204)

7nik · web-flow · commit 659198a95c0f · 2025-06-19T12:19:51.000+02:00
* fix: address css class matching regression

* address feedback

---------

Co-authored-by: 7nik &lt;kifiranet@gmail.com&gt;
diff --git a/.changeset/big-carpets-stare.md b/.changeset/big-carpets-stare.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: address css class matching regression
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -628,24 +628,33 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		if (attribute.type === 'SpreadAttribute') return true;
 		if (attribute.type === 'BindDirective' && attribute.name === name) return true;
 
+		const name_lower = name.toLowerCase();
 		// match attributes against the corresponding directive but bail out on exact matching
-		if (attribute.type === 'StyleDirective' && name.toLowerCase() === 'style') return true;
-		if (attribute.type === 'ClassDirective' && name.toLowerCase() === 'class') {
-			if (operator == '~=') {
+		if (attribute.type === 'StyleDirective' && name_lower === 'style') return true;
+		if (attribute.type === 'ClassDirective' && name_lower === 'class') {
+			if (operator === '~=') {
 				if (attribute.name === expected_value) return true;
 			} else {
 				return true;
 			}
 		}
 
 		if (attribute.type !== 'Attribute') continue;
-		if (attribute.name.toLowerCase() !== name.toLowerCase()) continue;
+		if (attribute.name.toLowerCase() !== name_lower) continue;
 
 		if (attribute.value === true) return operator === null;
 		if (expected_value === null) return true;
 
 		if (is_text_attribute(attribute)) {
-			return test_attribute(operator, expected_value, case_insensitive, attribute.value[0].data);
+			const matches = test_attribute(
+				operator,
+				expected_value,
+				case_insensitive,
+				attribute.value[0].data
+			);
+			// continue if we still may match against a class/style directive
+			if (!matches && (name_lower === 'class' || name_lower === 'style')) continue;
+			return matches;
 		}
 
 		const chunks = get_attribute_chunks(attribute.value);
@@ -654,7 +663,7 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
 		/** @type {string[]} */
 		let prev_values = [];
 		for (const chunk of chunks) {
-			const current_possible_values = get_possible_values(chunk, name === 'class');
+			const current_possible_values = get_possible_values(chunk, name_lower === 'class');
 
 			// impossible to find out all combinations
 			if (!current_possible_values) return true;
diff --git a/packages/svelte/tests/css/samples/class-directive/_config.js b/packages/svelte/tests/css/samples/class-directive/_config.js
@@ -4,16 +4,16 @@ export default test({
 	warnings: [
 		{
 			code: 'css_unused_selector',
-			message: 'Unused CSS selector ".third"\nhttps://svelte.dev/e/css_unused_selector',
+			message: 'Unused CSS selector ".forth"\nhttps://svelte.dev/e/css_unused_selector',
 			start: {
-				line: 6,
+				line: 8,
 				column: 2,
-				character: 115
+				character: 190
 			},
 			end: {
-				line: 6,
+				line: 8,
 				column: 8,
-				character: 121
+				character: 196
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/class-directive/expected.css b/packages/svelte/tests/css/samples/class-directive/expected.css
@@ -1,3 +1,5 @@
-  .first.svelte-xyz { color: green }
+
+  .zero.first.svelte-xyz { color: green }
   .second.svelte-xyz { color: green }
-  /* (unused) .third { color: red }*/
+  .third.svelte-xyz { color: green }
+  /* (unused) .forth { color: red }*/
diff --git a/packages/svelte/tests/css/samples/class-directive/input.svelte b/packages/svelte/tests/css/samples/class-directive/input.svelte
@@ -1,7 +1,9 @@
-<div class:first={true} class:second={true}></div>
+<div class="zero" class:first={true}></div>
+<div class:second={true} class:third={true}></div>
 
 <style>
-  .first { color: green }
+  .zero.first { color: green }
   .second { color: green }
-  .third { color: red }
+  .third { color: green }
+  .forth { color: red }
 </style>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +fix: address css class matching regression
Original file line number	Diff line number	Diff line change
`@@ -4,16 +4,16 @@ export default test({`
`4`	`4`	`warnings: [`
`5`	`5`	`{`
`6`	`6`	`code: 'css_unused_selector',`
`7`		`- message: 'Unused CSS selector ".third"\nhttps://svelte.dev/e/css_unused_selector',`
	`7`	`+ message: 'Unused CSS selector ".forth"\nhttps://svelte.dev/e/css_unused_selector',`
`8`	`8`	`start: {`
`9`		`- line: 6,`
	`9`	`+ line: 8,`
`10`	`10`	`column: 2,`
`11`		`- character: 115`
	`11`	`+ character: 190`
`12`	`12`	`},`
`13`	`13`	`end: {`
`14`		`- line: 6,`
	`14`	`+ line: 8,`
`15`	`15`	`column: 8,`
`16`		`- character: 121`
	`16`	`+ character: 196`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`	`]`