From ec12b99c92890b85771f654e0bd27a08520b5b63 Mon Sep 17 00:00:00 2001
From: Mikhail Podgurskiy <kmmbvnr@gmail.com>
Date: Tue, 17 Dec 2019 13:00:56 +0600
Subject: [PATCH] Fix for :global(...) styles in custom elements. Close #2969

---
 src/compiler/compile/render_dom/index.ts             |  2 +-
 .../samples/global-styles/main.svelte                |  9 +++++++++
 test/custom-elements/samples/global-styles/test.js   | 12 ++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 test/custom-elements/samples/global-styles/main.svelte
 create mode 100644 test/custom-elements/samples/global-styles/test.js

diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index d97c3bc73000..c6b9b4552e1c 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -442,7 +442,7 @@ export default function dom(
 				constructor(options) {
 					super();
 
-					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
+					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\').replace(/:global\(([-.\w]+)\)/g, '$1')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
 
 					@init(this, { target: this.shadowRoot }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
 
diff --git a/test/custom-elements/samples/global-styles/main.svelte b/test/custom-elements/samples/global-styles/main.svelte
new file mode 100644
index 000000000000..c14175f85571
--- /dev/null
+++ b/test/custom-elements/samples/global-styles/main.svelte
@@ -0,0 +1,9 @@
+<svelte:options tag="custom-element"/>
+
+<style>
+:global(p.active) {
+	color:rgb(128, 128, 128);
+}
+</style>
+
+<p></p>
diff --git a/test/custom-elements/samples/global-styles/test.js b/test/custom-elements/samples/global-styles/test.js
new file mode 100644
index 000000000000..103f24868771
--- /dev/null
+++ b/test/custom-elements/samples/global-styles/test.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	new CustomElement({
+		target
+	});
+
+	const style = target.querySelector('custom-element').shadowRoot.querySelector('style');
+
+	assert.equal(style.textContent, 'p.active{color:rgb(128, 128, 128)}');
+}