whitelist [open] attribute selector for <details> (#5425)

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Support `use:obj.method` as actions ([#3935](https://github.com/sveltejs/svelte/issues/3935))
 * Support `_` as numeric separator ([#5407](https://github.com/sveltejs/svelte/issues/5407))
 * Fix assignments to properties on store values ([#5412](https://github.com/sveltejs/svelte/issues/5412))
+* Add special style scoping handling of `[open]` selectors on `<details>` elements ([#5421](https://github.com/sveltejs/svelte/issues/5421))
 * Support `import.meta` in template expressions ([#5422](https://github.com/sveltejs/svelte/issues/5422))
 
 ## 3.25.1

src/compiler/compile/css/Selector.ts

@@ -11,6 +11,10 @@ enum BlockAppliesToNode {
 	UnknownSelectorType
 }
 
+const whitelist_attribute_selector = new Map([
+	['details', new Set(['open'])]
+]);
+
 export default class Selector {
 	node: CssNode;
 	stylesheet: Stylesheet;
@@ -232,7 +236,11 @@ function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToN
 		}
 
 		else if (selector.type === 'AttributeSelector') {
-			if (!attribute_matches(node, selector.name.name, selector.value && unquote(selector.value), selector.matcher, selector.flags)) return BlockAppliesToNode.NotPossible;
+			if (
+				!(whitelist_attribute_selector.has(node.name.toLowerCase()) && whitelist_attribute_selector.get(node.name.toLowerCase()).has(selector.name.name.toLowerCase())) &&
+				!attribute_matches(node, selector.name.name, selector.value && unquote(selector.value), selector.matcher, selector.flags)) {
+				return BlockAppliesToNode.NotPossible;
+			}
 		}
 
 		else if (selector.type === 'TypeSelector') {

test/css/samples/attribute-selector-details-open/expected.css

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

test/css/samples/attribute-selector-details-open/input.svelte

@@ -0,0 +1,7 @@
+<details>Hello</details>
+
+<style>
+	details[open] {
+		color: red;
+	}
+</style>