fix remove of lone :host selectors (#5984)

tanhauhau · web-flow · commit e8094df77967 · 2021-02-10T22:01:50.000-05:00
diff --git 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 `<Component bind:prop={obj.foo}/>` ([#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
@@ -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
diff --git 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;
+  }
 </style>
 
 <h1>Hello!</h1>

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,10 @@ export default class Selector {`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`this.local_blocks = this.blocks.slice(0, i);`
`47`		`- this.used = this.local_blocks.length === 0;`
	`47`	`+`
	`48`	`+ const host_only = this.blocks.length === 1 && this.blocks[0].host;`
	`49`	`+`
	`50`	`+ this.used = this.local_blocks.length === 0 \|\| host_only;`
`48`	`51`	`}`
`49`	`52`
`50`	`53`	`apply(node: Element) {`