Merge pull request #800 from sveltejs/gh-798

handle unquoted attribute values

src/css/Selector.ts

@@ -160,7 +160,7 @@ function applySelector(blocks: Block[], node: Node, stack: Node[], toEncapsulate
 		}
 
 		else if (selector.type === 'AttributeSelector') {
-			if (!attributeMatches(node, selector.name.name, selector.value && unquote(selector.value.value), selector.operator, selector.flags)) return false;
+			if (!attributeMatches(node, selector.name.name, selector.value && unquote(selector.value), selector.operator, selector.flags)) return false;
 		}
 
 		else if (selector.type === 'TypeSelector') {
@@ -245,10 +245,13 @@ function isDynamic(value: Node) {
 	return value.length > 1 || value[0].type !== 'Text';
 }
 
-function unquote(str: string) {
+function unquote(value: Node) {
+	if (value.type === 'Identifier') return value.name;
+	const str = value.value;
 	if (str[0] === str[str.length - 1] && str[0] === "'" || str[0] === '"') {
 		return str.slice(1, str.length - 1);
 	}
+	return str;
 }
 
 class Block {

test/css/samples/attribute-selector-unquoted/_config.js

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

test/css/samples/attribute-selector-unquoted/expected.css

@@ -0,0 +1 @@
+[foo=bar][svelte-xyz]{color:red}

test/css/samples/attribute-selector-unquoted/input.html

@@ -0,0 +1,7 @@
+<div foo='bar'></div>
+
+<style>
+	[foo=bar] {
+		color: red;
+	}
+</style>