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

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

@@ -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);

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>