use bindings when matching attribute selector against element (#3281)

src/compiler/compile/css/Selector.ts

@@ -219,6 +219,8 @@ function attribute_matches(node: Node, name: string, expected_value: string, ope
 	const spread = node.attributes.find(attr => attr.type === 'Spread');
 	if (spread) return true;
 
+	if (node.bindings.some((binding: Node) => binding.name === name)) return true;
+
 	const attr = node.attributes.find((attr: Node) => attr.name === name);
 	if (!attr) return false;
 	if (attr.is_true) return operator === null;

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

@@ -0,0 +1 @@
+details[open].svelte-xyz{color:red}

test/css/samples/attribute-selector-bind/input.svelte

@@ -0,0 +1,11 @@
+<script>
+	let open = false;
+</script>
+
+<details bind:open>Hello</details>
+
+<style>
+	details[open] {
+		color: red;
+	}
+</style>