diff --git a/CHANGELOG.md b/CHANGELOG.md index 84552c9d2b51..a045c1591774 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Svelte changelog +## Unreleased + +* Fix removal of lone `:host` selectors ([#5982](https://github.com/sveltejs/svelte/issues/5982)) + ## 3.32.2 * Fix unnecessary additional invalidation with `` ([#3075](https://github.com/sveltejs/svelte/issues/3075), [#4447](https://github.com/sveltejs/svelte/issues/4447), [#5555](https://github.com/sveltejs/svelte/issues/5555)) diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts index 3c9f453c8d6d..6d0e7c50032a 100644 --- a/src/compiler/compile/css/Selector.ts +++ b/src/compiler/compile/css/Selector.ts @@ -44,7 +44,10 @@ export default class Selector { } this.local_blocks = this.blocks.slice(0, i); - this.used = this.local_blocks.length === 0; + + const host_only = this.blocks.length === 1 && this.blocks[0].host; + + this.used = this.local_blocks.length === 0 || host_only; } apply(node: Element) { diff --git a/test/css/samples/host/expected.css b/test/css/samples/host/expected.css index 28683691c0bc..d848082f5e2e 100644 --- a/test/css/samples/host/expected.css +++ b/test/css/samples/host/expected.css @@ -1 +1 @@ -:host h1.svelte-xyz{color:red}:host>h1.svelte-xyz{color:red}:host>.svelte-xyz{color:red}:host span.svelte-xyz{color:red} \ No newline at end of file +:host h1.svelte-xyz{color:red}:host>h1.svelte-xyz{color:red}:host>.svelte-xyz{color:red}:host span.svelte-xyz{color:red}:host{color:red} \ No newline at end of file diff --git a/test/css/samples/host/input.svelte b/test/css/samples/host/input.svelte index 4c1efcd98348..85db1617ef49 100644 --- a/test/css/samples/host/input.svelte +++ b/test/css/samples/host/input.svelte @@ -18,6 +18,10 @@ :host > span { color: red; } + + :host { + color: red; + }

Hello!