From 7eaf5dca4d701902d0197fffff18a810f93580a6 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 4 Aug 2018 16:54:23 -0400
Subject: [PATCH] encapsulate local styles inside global ones - fixes #1618

---
 src/css/Selector.ts                               | 12 +++++++-----
 test/css/samples/local-inside-global/expected.css |  1 +
 test/css/samples/local-inside-global/input.html   | 11 +++++++++++
 3 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 test/css/samples/local-inside-global/expected.css
 create mode 100644 test/css/samples/local-inside-global/input.html

diff --git a/src/css/Selector.ts b/src/css/Selector.ts
index 8abb4353cd..80e722a483 100644
--- a/src/css/Selector.ts
+++ b/src/css/Selector.ts
@@ -30,6 +30,7 @@ export default class Selector {
 
 	apply(node: Node, stack: Node[]) {
 		const toEncapsulate: Node[] = [];
+
 		applySelector(this.stylesheet, this.localBlocks.slice(), node, stack.slice(), toEncapsulate);
 
 		if (toEncapsulate.length > 0) {
@@ -132,10 +133,6 @@ export default class Selector {
 	}
 }
 
-function isDescendantSelector(selector: Node) {
-	return selector.type === 'WhiteSpace' || selector.type === 'Combinator';
-}
-
 function applySelector(stylesheet: Stylesheet, blocks: Block[], node: Node, stack: Node[], toEncapsulate: any[]): boolean {
 	const block = blocks.pop();
 	if (!block) return false;
@@ -145,7 +142,6 @@ function applySelector(stylesheet: Stylesheet, blocks: Block[], node: Node, stac
 	}
 
 	let i = block.selectors.length;
-	let j = stack.length;
 
 	while (i--) {
 		const selector = block.selectors[i];
@@ -202,12 +198,18 @@ function applySelector(stylesheet: Stylesheet, blocks: Block[], node: Node, stac
 				}
 			}
 
+			if (blocks.every(block => block.global)) {
+				toEncapsulate.push({ node, block });
+				return true;
+			}
+
 			return false;
 		} else if (block.combinator.name === '>') {
 			if (applySelector(stylesheet, blocks, stack.pop(), stack, toEncapsulate)) {
 				toEncapsulate.push({ node, block });
 				return true;
 			}
+
 			return false;
 		}
 
diff --git a/test/css/samples/local-inside-global/expected.css b/test/css/samples/local-inside-global/expected.css
new file mode 100644
index 0000000000..40af67afba
--- /dev/null
+++ b/test/css/samples/local-inside-global/expected.css
@@ -0,0 +1 @@
+div .foo.svelte-xyz{color:red}div>.foo.svelte-xyz{font-weight:bold}
\ No newline at end of file
diff --git a/test/css/samples/local-inside-global/input.html b/test/css/samples/local-inside-global/input.html
new file mode 100644
index 0000000000..afff8b21e4
--- /dev/null
+++ b/test/css/samples/local-inside-global/input.html
@@ -0,0 +1,11 @@
+<p class='foo'>red/bold</p>
+
+<style>
+	:global(div) .foo {
+		color: red;
+	}
+
+	:global(div) > .foo {
+		font-weight: bold;
+	}
+</style>
\ No newline at end of file