From 07d102717daa483600d58513ea7b4077084b3507 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 1 Jul 2017 15:17:39 -0400
Subject: [PATCH] handle attribute selectors with = operator

---
 src/generators/extractSelectors.ts            | 36 +++++++++++++++++--
 .../_config.js                                |  6 ++++
 .../expected.css                              |  4 +++
 .../expected.html                             |  2 ++
 .../input.html                                | 10 ++++++
 .../_config.js                                |  3 ++
 .../expected.css                              |  4 +++
 .../expected.html                             |  2 ++
 .../input.html                                | 10 ++++++
 9 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/input.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals/input.html

diff --git a/src/generators/extractSelectors.ts b/src/generators/extractSelectors.ts
index 7dbf7b27ca..6fdd40933c 100644
--- a/src/generators/extractSelectors.ts
+++ b/src/generators/extractSelectors.ts
@@ -73,6 +73,10 @@ function selectorAppliesTo(parts: Node[], node: Node, stack: Node[]): boolean {
 			if (!classMatches(node, part.name)) return false;
 		}
 
+		else if (part.type === 'AttributeSelector') {
+			if (!attributeMatches(node, part)) return false;
+		}
+
 		else if (part.type === 'TypeSelector') {
 			if (part.name === '*') return true;
 			if (node.name !== part.name) return false;
@@ -111,8 +115,34 @@ function selectorAppliesTo(parts: Node[], node: Node, stack: Node[]): boolean {
 function classMatches(node: Node, className: string) {
 	const attr = node.attributes.find((attr: Node) => attr.name === 'class');
 	if (!attr) return false;
-	if (attr.value.length > 1) return true;
-	if (attr.value[0].type !== 'Text') return true;
+	if (isDynamic(attr)) return true;
+
+	const value = attr.value[0].data;
+
+	return value.split(' ').indexOf(className) !== -1;
+}
+
+function attributeMatches(node: Node, selector: Node) {
+	const attr = node.attributes.find((attr: Node) => attr.name === selector.name.name);
+	if (!attr) return false;
+	if (isDynamic(attr)) return true;
+
+	const expectedValue = unquote(selector.value.value);
+	const actualValue = attr.value[0].data;
 
-	return attr.value[0].data.split(' ').indexOf(className) !== -1;
+	if (selector.operator === '=') {
+		return actualValue === expectedValue;
+	}
+
+	return true;
+}
+
+function isDynamic(attr: Node) {
+	return attr.value.length > 1 || attr.value[0].type !== 'Text';
+}
+
+function unquote(str: string) {
+	if (str[0] === str[str.length - 1] && str[0] === "'" || str[0] === '"') {
+		return str.slice(1, str.length - 1);
+	}
 }
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/_config.js
new file mode 100644
index 0000000000..32cdf8cb79
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/_config.js
@@ -0,0 +1,6 @@
+export default {
+	cascade: false,
+	data: {
+		dynamic: 'whatever'
+	}
+};
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css
new file mode 100644
index 0000000000..26fdc211a0
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css
@@ -0,0 +1,4 @@
+
+	[data-foo='bar'][svelte-1339732946] {
+		color: red;
+	}
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.html
new file mode 100644
index 0000000000..e27985b20d
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.html
@@ -0,0 +1,2 @@
+<div><p svelte-1339732946="" data-foo="whatever">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-dynamic/input.html b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/input.html
new file mode 100644
index 0000000000..7ddd680b27
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/input.html
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='{{dynamic}}'>this is styled</p>
+	<p data-foo='baz'>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/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/_config.js
new file mode 100644
index 0000000000..b37866f9b6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-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-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css
new file mode 100644
index 0000000000..4a2cb3428e
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css
@@ -0,0 +1,4 @@
+
+	[data-foo='bar'][svelte-2543760126] {
+		color: red;
+	}
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.html
new file mode 100644
index 0000000000..6dcb8cfaa3
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.html
@@ -0,0 +1,2 @@
+<div><p svelte-2543760126="" 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/input.html b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/input.html
new file mode 100644
index 0000000000..28e31604f8
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/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'] {
+		color: red;
+	}
+</style>
\ No newline at end of file