Merge pull request #873 from sveltejs/gh-872

escape backslashes in CSS for custom elements

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();`)

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: [

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>

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)));
+}