From e4460e38ba58d5209514f0fa93dc61b6bb1ebb54 Mon Sep 17 00:00:00 2001
From: Conduitry <git@chor.date>
Date: Sun, 19 Jan 2020 13:36:22 -0500
Subject: [PATCH] fix '~=' and class selectors with arbitrary whitespace
 (#4286)

---
 CHANGELOG.md                                        |  1 +
 src/compiler/compile/css/Selector.ts                |  6 +++---
 .../expected.css                                    |  1 +
 .../input.svelte                                    | 13 +++++++++++++
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css
 create mode 100644 test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5264f35504..5b0bb4751d 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index eecb0cd975..39bbc2e8d1 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/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 = [];
diff --git a/test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css b/test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css
new file mode 100644
index 0000000000..c1c0f3fdf6
--- /dev/null
+++ b/test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}[class~="bar"].svelte-xyz{background:blue}
\ No newline at end of file
diff --git a/test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte b/test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte
new file mode 100644
index 0000000000..758aa27e0b
--- /dev/null
+++ b/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>