Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Amar-Gill opened this issue Sep 17, 2020 · 3 comments

Comments

@Amar-Gill
Copy link

@Amar-Gill Amar-Gill commented Sep 17, 2020

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
Copy link
Member

@Conduitry Conduitry commented Sep 17, 2020

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
Copy link
Author

@Amar-Gill Amar-Gill commented Sep 18, 2020

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

@Conduitry
Copy link
Member

@Conduitry Conduitry commented Sep 22, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

2 participants
You can’t perform that action at this time.