fix '~=' and class selectors with arbitrary whitespace (#4286)

Author: Conduitry

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Disallow two-way binding to a variable declared by an `{#await}` block ([#4012](https://github.com/sveltejs/svelte/issues/4012))
 * Allow access to `let:` variables in sibling attributes on slot root ([#4173](https://github.com/sveltejs/svelte/issues/4173))
+* Fix `~=` and class selector matching against values separated by any whitespace characters ([#4242](https://github.com/sveltejs/svelte/issues/4242))
 * Fix code generation for `await`ed expressions that need parentheses ([#4267](https://github.com/sveltejs/svelte/issues/4267))
 * Add some more known globals ([#4276](https://github.com/sveltejs/svelte/pull/4276))
 * Correctly apply event modifiers to `<svelte:body>` events ([#4278](https://github.com/sveltejs/svelte/issues/4278))

src/compiler/compile/css/Selector.ts

@@ -171,7 +171,7 @@ function apply_selector(blocks: Block[], node: Element, stack: Element[], to_enc
 				if (ancestor_block.global) {
 					continue;
 				}
-				
+
 				for (const stack_node of stack) {
 					if (block_might_apply_to_node(ancestor_block, stack_node) !== BlockAppliesToNode.NotPossible) {
 						to_encapsulate.push({ node: stack_node, block: ancestor_block });
@@ -256,7 +256,7 @@ function test_attribute(operator, expected_value, case_insensitive, value) {
 	}
 	switch (operator) {
 		case '=': return value === expected_value;
-		case '~=': return ` ${value} `.includes(` ${expected_value} `);
+		case '~=': return value.split(/\s/).includes(expected_value);
 		case '|=': return `${value}-`.startsWith(`${expected_value}-`);
 		case '^=': return value.startsWith(expected_value);
 		case '$=': return value.endsWith(expected_value);
@@ -295,7 +295,7 @@ function attribute_matches(node: CssNode, name: string, expected_value: string,
 
 		// impossible to find out all combinations
 		if (current_possible_values.has(UNKNOWN)) return true;
-		
+
 		if (prev_values.length > 0) {
 			const start_with_space = [];
 			const remaining = [];

test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css

@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}[class~="bar"].svelte-xyz{background:blue}

test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte

@@ -0,0 +1,13 @@
+<div class="
+foo
+bar
+"></div>
+
+<style>
+	.foo {
+		color: red;
+	}
+	[class~="bar"] {
+		background: blue;
+	}
+</style>