:host <selector> query incorrectly removed as unused when with customElement / web components #5946
Description
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 { }