Unused CSS rule for open attribute thrown away during compile time but should not be thrown away

[Amar-Gill]

Describe the bug
Trying to build a Svelte Accordion component, which takes advantage of the open html attribute on the <details> element.

During compile time, the CSS selector details[open]>summary gets thrown away because it is not being used in the DOM. However, the design pattern for this code is such that on page load, the open attribute likely is not present, and will be applied once the user starts to interact with the accordion.

To Reproduce
See this REPL, in particular, pay attention to the CSS output. The CSS rule is not included:

https://svelte.dev/repl/5ee534ac293043c6a288db0946b46118?version=3.25.1

Prepending the CSS rule with :global(...) fixes the issue - but I am hoping to scope all CSS within the component if possible.

Expected behavior
When opening the <details> element, the color should change to pink as per my CSS rule I specified. See this codepen for the desired behvaiour:

https://codepen.io/amar-gill/pen/LYNJXdB

Information about your Svelte project:

• Browser: Firefox 80.0.1

• OS: MacOS Catalina 10.15.6

• Svelte version: 3.25.1

• Bundler: Rollup (I believe? It's still only in REPL)

Severity
low to medium.

[Conduitry]

Yeah I suppose it would make sense to have special handling for this case, where we know browsers might be adding and removing open attributes to <details> elements.

[Amar-Gill]

Would have been fine if there was a :open pseudo-selector to use.

[Conduitry]

In 3.26.0, [open] will now always be seen as a potential match for <details> elements for the purposes of CSS scoping.