From 45dd99d6dbfd8413ed513bf66e80cc4f55ba9b52 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 1 Jul 2017 16:11:38 -0400
Subject: [PATCH] implement all attribute selector operators

---
 src/generators/extractSelectors.ts            | 20 ++++++++++---------
 .../_config.js                                |  3 +++
 .../expected.css                              |  4 ++++
 .../expected.html                             |  2 ++
 .../input.html                                | 10 ++++++++++
 .../_config.js                                |  3 +++
 .../expected.css                              |  4 ++++
 .../expected.html                             |  2 ++
 .../input.html                                | 10 ++++++++++
 .../_config.js                                |  3 +++
 .../expected.css                              |  4 ++++
 .../expected.html                             |  3 +++
 .../input.html                                | 11 ++++++++++
 .../_config.js                                |  3 +++
 .../expected.css                              |  4 ++++
 .../expected.html                             |  2 ++
 .../input.html                                | 10 ++++++++++
 .../_config.js                                |  3 +++
 .../expected.css                              |  4 ++++
 .../expected.html                             |  2 ++
 .../input.html                                | 10 ++++++++++
 .../_config.js                                |  6 ------
 .../expected.css                              |  4 ----
 .../expected.html                             |  2 --
 .../input.html                                | 10 ----------
 25 files changed, 108 insertions(+), 31 deletions(-)
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-contains/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-contains/input.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/input.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/input.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-prefix/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-prefix/input.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-suffix/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-suffix/input.html
 delete mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/_config.js
 delete mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.css
 delete mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.html
 delete mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/input.html

diff --git a/src/generators/extractSelectors.ts b/src/generators/extractSelectors.ts
index d838296551..5f7d3452b6 100644
--- a/src/generators/extractSelectors.ts
+++ b/src/generators/extractSelectors.ts
@@ -122,6 +122,15 @@ function classMatches(node: Node, className: string) {
 	return value.split(' ').indexOf(className) !== -1;
 }
 
+const operators = {
+	'=' : (value: string, flags: string) => new RegExp(`^${value}$`, flags),
+	'~=': (value: string, flags: string) => new RegExp(`\\b${value}\\b`, flags),
+	'|=': (value: string, flags: string) => new RegExp(`^${value}(-.+)?$`, flags),
+	'^=': (value: string, flags: string) => new RegExp(`^${value}`, flags),
+	'$=': (value: string, flags: string) => new RegExp(`${value}$`, flags),
+	'*=': (value: string, flags: string) => new RegExp(value, flags)
+};
+
 function attributeMatches(node: Node, selector: Node) {
 	const attr = node.attributes.find((attr: Node) => attr.name === selector.name.name);
 	if (!attr) return false;
@@ -130,15 +139,8 @@ function attributeMatches(node: Node, selector: Node) {
 	const expectedValue = unquote(selector.value.value);
 	const actualValue = attr.value[0].data;
 
-	if (selector.operator === '=') {
-		return actualValue === expectedValue;
-	}
-
-	if(selector.operator === '~=') {
-		return actualValue.split(/\s/).indexOf(expectedValue) !== -1;
-	}
-
-	return true;
+	const pattern = operators[selector.operator](expectedValue, selector.flags || '');
+	return pattern.test(actualValue);
 }
 
 function isDynamic(value: Node) {
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/_config.js
new file mode 100644
index 0000000000..b37866f9b6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/_config.js
@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css
new file mode 100644
index 0000000000..b48dfbe85a
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css
@@ -0,0 +1,4 @@
+
+	[data-foo*='bar'][svelte-4224841812] {
+		color: red;
+	}
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html
new file mode 100644
index 0000000000..22a45b853e
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html
@@ -0,0 +1,2 @@
+<div><p svelte-4224841812="" data-foo="foobarbaz">this is styled</p>
+	<p data-foo="fooBARbaz">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/input.html b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/input.html
new file mode 100644
index 0000000000..ea0d54fe67
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/input.html
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='foobarbaz'>this is styled</p>
+	<p data-foo='fooBARbaz'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo*='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/_config.js
new file mode 100644
index 0000000000..b37866f9b6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/_config.js
@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css
new file mode 100644
index 0000000000..d20a6b98bf
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css
@@ -0,0 +1,4 @@
+
+	[data-foo='bar' i][svelte-4191913977] {
+		color: red;
+	}
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.html
new file mode 100644
index 0000000000..1d65033d3e
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.html
@@ -0,0 +1,2 @@
+<div><p svelte-4191913977="" data-foo="BAR">this is styled</p>
+	<p data-foo="BAZ">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/input.html b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/input.html
new file mode 100644
index 0000000000..e80da7b707
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/input.html
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='BAR'>this is styled</p>
+	<p data-foo='BAZ'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo='bar' i] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/_config.js
new file mode 100644
index 0000000000..b37866f9b6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/_config.js
@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css
new file mode 100644
index 0000000000..8b57a24cd9
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css
@@ -0,0 +1,4 @@
+
+	[data-foo|='bar'][svelte-1225676040] {
+		color: red;
+	}
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.html
new file mode 100644
index 0000000000..1ba93cd6e5
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.html
@@ -0,0 +1,3 @@
+<div><p svelte-1225676040="" data-foo="bar">this is styled</p>
+	<p svelte-1225676040="" data-foo="bar-baz">this is styled</p>
+	<p data-foo="baz-bar">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/input.html b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/input.html
new file mode 100644
index 0000000000..c7a8b598ec
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/input.html
@@ -0,0 +1,11 @@
+<div>
+	<p data-foo='bar'>this is styled</p>
+	<p data-foo='bar-baz'>this is styled</p>
+	<p data-foo='baz-bar'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo|='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/_config.js
new file mode 100644
index 0000000000..b37866f9b6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/_config.js
@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css
new file mode 100644
index 0000000000..232c462c4b
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css
@@ -0,0 +1,4 @@
+
+	[data-foo^='bar'][svelte-3106767242] {
+		color: red;
+	}
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.html
new file mode 100644
index 0000000000..267528a516
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.html
@@ -0,0 +1,2 @@
+<div><p svelte-3106767242="" data-foo="barbaz">this is styled</p>
+	<p data-foo="bazbar">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/input.html b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/input.html
new file mode 100644
index 0000000000..91daf582fd
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/input.html
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='barbaz'>this is styled</p>
+	<p data-foo='bazbar'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo^='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/_config.js
new file mode 100644
index 0000000000..b37866f9b6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/_config.js
@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css
new file mode 100644
index 0000000000..832f50cf3b
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css
@@ -0,0 +1,4 @@
+
+	[data-foo$='bar'][svelte-207782622] {
+		color: red;
+	}
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.html
new file mode 100644
index 0000000000..00bf78a6ca
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.html
@@ -0,0 +1,2 @@
+<div><p data-foo="barbaz">this is unstyled</p>
+	<p svelte-207782622="" data-foo="bazbar">this is styled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/input.html b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/input.html
new file mode 100644
index 0000000000..641d776c6c
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/input.html
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='barbaz'>this is unstyled</p>
+	<p data-foo='bazbar'>this is styled</p>
+</div>
+
+<style>
+	[data-foo$='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/_config.js
deleted file mode 100644
index 32cdf8cb79..0000000000
--- a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/_config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-	cascade: false,
-	data: {
-		dynamic: 'whatever'
-	}
-};
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.css
deleted file mode 100644
index ca5ed2b2ba..0000000000
--- a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.css
+++ /dev/null
@@ -1,4 +0,0 @@
-
-	[data-foo~='bar'][svelte-25731322] {
-		color: red;
-	}
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.html
deleted file mode 100644
index 4908f49985..0000000000
--- a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/expected.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<div><p svelte-25731322="" data-foo="whatever">this is styled</p>
-	<p data-foo="qux baz">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/input.html b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/input.html
deleted file mode 100644
index e8e95d9eac..0000000000
--- a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals-dynamic/input.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<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>
\ No newline at end of file