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

:host <selector> query incorrectly removed as unused when with customElement / web components #5946

Closed
arackaf opened this issue Feb 1, 2021 · 2 comments · Fixed by #5957

Comments

@arackaf
Copy link
Contributor

arackaf commented Feb 1, 2021

Is this about svelte@next? This project is currently in a pre-release stage and breaking changes may occur at any time. Please do not post any kind of bug reports or questions on GitHub about it.

No

Describe the bug
A clear and concise description of what the bug is.

:host > div

styles are incorrectly flagged by Svelte as being unused, and removed.

Logs
Please include browser console and server logs around the time this bug occurred.

To Reproduce
To help us help you, if you've found a bug please consider the following:

REPL: https://svelte.dev/repl/a3e9faaa04fb41b9a8eda898c92d088d?version=3.32.1

You may need to manually toggle the customElement option - it doesn't seem to stick for me - not sure what I'm doing wrong.

Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that Svelte is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster.

Expected behavior
A clear and concise description of what you expected to happen.

Style rules should not be removed.

Stacktraces
If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread's readability:

Stack trace

Stack trace goes here...

Information about your Svelte project:
To make your life easier, just run npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers and paste the output here.

  • Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)

Chrome

  • Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)

Mac

  • Svelte version (Please check you can reproduce the issue with the latest release!)

Most recent

  • Whether your project uses Webpack or Rollup

webpack - see below

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

Severe

Note: the more honest and specific you are here the more we will take you seriously.

Additional context

What's weird is, with my own setup, with webpack, :host > * is NOT removed, but in the repl, even that is removed. To be clear though, none of these rules should be removed. :host > (selector that matches top-level element in the component) is perfectly valid.

The best workaround would be any way to just shut off all of Svelte's removal of what it perceives as unused selectors. This is crucial for custom element work since it seems the :global helper is completely ignored.

I should add that, with this repl, :host > h1 could easily be replaced with just h1 { }, or with an added css class to disambiguate from other h1's in the component. But this workaround becomes impossible when you need to add selectors to the :host query, ie

:host([some-attr]) > div { }

@Conduitry
Copy link
Member

This should be fixed now in 3.32.2.

@arackaf
Copy link
Contributor Author

arackaf commented Feb 8, 2021

@Conduitry woot woot - thanks! And thanks to @tanhauhau!

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

Successfully merging a pull request may close this issue.

2 participants