From e83bcb0b53804b24d45f1e6b53bed3737717391f Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Wed, 27 Sep 2017 13:55:22 -0400
Subject: [PATCH] escape backslashes in CSS for custom elements - fixes #872

---
 src/generators/dom/index.ts                        |  2 +-
 test/custom-elements/index.js                      |  4 +++-
 test/custom-elements/samples/escaped-css/main.html | 13 +++++++++++++
 test/custom-elements/samples/escaped-css/test.js   | 13 +++++++++++++
 4 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 test/custom-elements/samples/escaped-css/main.html
 create mode 100644 test/custom-elements/samples/escaped-css/test.js

diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index bccfa3288b..8e0ec3404c 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -210,7 +210,7 @@ export default function dom(
 		${generator.customElement ?
 			deindent`
 				this.attachShadow({ mode: 'open' });
-				${css && `this.shadowRoot.innerHTML = \`<style>${options.dev ? `${escape(css, { onlyEscapeAtSymbol: true })}\n/*# sourceMappingURL=${cssMap.toUrl()} */` : escape(css, { onlyEscapeAtSymbol: true })}</style>\`;`}
+				${css && `this.shadowRoot.innerHTML = \`<style>${escape(css, { onlyEscapeAtSymbol: true }).replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${cssMap.toUrl()} */` : ''}</style>\`;`}
 			` :
 			(generator.stylesheet.hasStyles && options.css !== false &&
 			`if (!document.getElementById("${generator.stylesheet.id}-style")) @add_css();`)
diff --git a/test/custom-elements/index.js b/test/custom-elements/index.js
index 54aefa3885..917261ddec 100644
--- a/test/custom-elements/index.js
+++ b/test/custom-elements/index.js
@@ -50,7 +50,9 @@ describe('custom-elements', function() {
 	fs.readdirSync('test/custom-elements/samples').forEach(dir => {
 		if (dir[0] === '.') return;
 
-		it(dir, () => {
+		const solo = /\.solo$/.test(dir);
+
+		(solo ? it.only : it)(dir, () => {
 			return rollup({
 				input: `test/custom-elements/samples/${dir}/test.js`,
 				plugins: [
diff --git a/test/custom-elements/samples/escaped-css/main.html b/test/custom-elements/samples/escaped-css/main.html
new file mode 100644
index 0000000000..1f86593b8f
--- /dev/null
+++ b/test/custom-elements/samples/escaped-css/main.html
@@ -0,0 +1,13 @@
+<span class='icon'></span>
+
+<style>
+	.icon::before {
+		content: '\ff'
+	}
+</style>
+
+<script>
+	export default {
+		tag: 'custom-element'
+	};
+</script>
\ No newline at end of file
diff --git a/test/custom-elements/samples/escaped-css/test.js b/test/custom-elements/samples/escaped-css/test.js
new file mode 100644
index 0000000000..bd148ad5a7
--- /dev/null
+++ b/test/custom-elements/samples/escaped-css/test.js
@@ -0,0 +1,13 @@
+import * as assert from 'assert';
+import CustomElement from './main.html';
+
+export default function (target) {
+	new CustomElement({
+		target
+	});
+
+	const icon = target.querySelector('custom-element').shadowRoot.querySelector('.icon');
+	const before = getComputedStyle(icon, '::before');
+
+	assert.equal(before.content, JSON.stringify(String.fromCharCode(0xff)));
+}
\ No newline at end of file