fix: address css class matching regression

Author: 7nik

.changeset/big-carpets-stare.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: address css class matching regression

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;

packages/svelte/tests/css/samples/class-directive/_config.js

@@ -6,14 +6,14 @@ export default test({
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".third"\nhttps://svelte.dev/e/css_unused_selector',
 			start: {
-				line: 6,
+				line: 7,
 				column: 2,
-				character: 115
+				character: 166
 			},
 			end: {
-				line: 6,
+				line: 7,
 				column: 8,
-				character: 121
+				character: 172
 			}
 		}
 	]

packages/svelte/tests/css/samples/class-directive/expected.css

@@ -1,3 +1,4 @@
   .first.svelte-xyz { color: green }
   .second.svelte-xyz { color: green }
+  .zero.first.second.svelte-xyz { color: green }
   /* (unused) .third { color: red }*/

packages/svelte/tests/css/samples/class-directive/input.svelte

@@ -1,7 +1,8 @@
-<div class:first={true} class:second={true}></div>
+<div class="zero" class:first={true} class:second={true}></div>
 
 <style>
   .first { color: green }
   .second { color: green }
+  .zero.first.second { color: green }
   .third { color: red }
 </style>