From eae98f952dff8d908cb77ec9c5f54f7802e5008d Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 12 Mar 2018 11:25:11 -0400
Subject: [PATCH] add CSS scoping classes when stringifying child nodes - fixes
 #1223

---
 src/generators/nodes/Element.ts                  |  4 ++--
 test/css/samples/cascade-false-nested/_config.js |  7 +++++++
 .../samples/cascade-false-nested/expected.css    |  1 +
 .../samples/cascade-false-nested/expected.html   |  2 ++
 test/css/samples/cascade-false-nested/input.html | 16 ++++++++++++++++
 5 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 test/css/samples/cascade-false-nested/_config.js
 create mode 100644 test/css/samples/cascade-false-nested/expected.css
 create mode 100644 test/css/samples/cascade-false-nested/expected.html
 create mode 100644 test/css/samples/cascade-false-nested/input.html

diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts
index 69997e077c..e836d072ce 100644
--- a/src/generators/nodes/Element.ts
+++ b/src/generators/nodes/Element.ts
@@ -438,8 +438,8 @@ export default class Element extends Node {
 			}
 
 			node.attributes.forEach((attr: Node) => {
-				const value = node._needsCssAttribute && attr.name === 'class'
-					? attr.value.concat({ type: 'Text', data: ` ${generator.stylesheet.id}` })
+				const value = (node._needsCssAttribute && attr.name === 'class')
+					? [{ type: 'Text', data: `${attr.value[0].data} ${generator.stylesheet.id}` }]
 					: attr.value;
 
 				open += ` ${fixAttributeCasing(attr.name)}${stringifyAttributeValue(value)}`
diff --git a/test/css/samples/cascade-false-nested/_config.js b/test/css/samples/cascade-false-nested/_config.js
new file mode 100644
index 0000000000..b19fe39d23
--- /dev/null
+++ b/test/css/samples/cascade-false-nested/_config.js
@@ -0,0 +1,7 @@
+export default {
+	cascade: false,
+
+	data: {
+		dynamic: 'x'
+	}
+};
\ No newline at end of file
diff --git a/test/css/samples/cascade-false-nested/expected.css b/test/css/samples/cascade-false-nested/expected.css
new file mode 100644
index 0000000000..87ca7335f6
--- /dev/null
+++ b/test/css/samples/cascade-false-nested/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}.bar.svelte-xyz{font-style:italic}
\ No newline at end of file
diff --git a/test/css/samples/cascade-false-nested/expected.html b/test/css/samples/cascade-false-nested/expected.html
new file mode 100644
index 0000000000..7d4198ad35
--- /dev/null
+++ b/test/css/samples/cascade-false-nested/expected.html
@@ -0,0 +1,2 @@
+<span class="foo svelte-xyz"><span class="bar svelte-xyz">text</span></span>
+<span class="foo svelte-xyz"><span class="bar svelte-xyz">x</span></span>
\ No newline at end of file
diff --git a/test/css/samples/cascade-false-nested/input.html b/test/css/samples/cascade-false-nested/input.html
new file mode 100644
index 0000000000..a71a9a497c
--- /dev/null
+++ b/test/css/samples/cascade-false-nested/input.html
@@ -0,0 +1,16 @@
+<span class='foo'>
+	<span class='bar'>text</span>
+</span>
+
+<span class='foo'>
+	<span class='bar'>{{dynamic}}</span>
+</span>
+
+<style>
+	.foo {
+		color: red;
+	}
+	.bar {
+		font-style: italic;
+	}
+</style>
\ No newline at end of file