handle ~= attribute selector operator

src/generators/extractSelectors.ts

@@ -134,6 +134,10 @@ function attributeMatches(node: Node, selector: Node) {
 		return actualValue === expectedValue;
 	}
 
+	if(selector.operator === '~=') {
+		return actualValue.split(/\s/).indexOf(expectedValue) !== -1;
+	}
+
 	return true;
 }
 

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/_config.js

@@ -0,0 +1,6 @@
+export default {
+	cascade: false,
+	data: {
+		dynamic: 'whatever'
+	}
+};

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.css

@@ -0,0 +1,4 @@
+
+	[data-foo~='bar'][svelte-25731322] {
+		color: red;
+	}

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.html

@@ -0,0 +1,2 @@
+<div><p svelte-25731322="" data-foo="whatever">this is styled</p>
+	<p data-foo="qux baz">this is unstyled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/input.html

@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='{{dynamic}}'>this is styled</p>
+	<p data-foo='qux baz'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo~='bar'] {
+		color: red;
+	}
+</style>

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/_config.js

@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css

@@ -0,0 +1,4 @@
+
+	[data-foo~='bar'][svelte-1786044856] {
+		color: red;
+	}

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.html

@@ -0,0 +1,2 @@
+<div><p svelte-1786044856="" data-foo="qux bar">this is styled</p>
+	<p data-foo="qux baz">this is unstyled</p></div>

test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/input.html

@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='qux bar'>this is styled</p>
+	<p data-foo='qux baz'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo~='bar'] {
+		color: red;
+	}
+</style>