add CSS scoping classes when stringifying child nodes - fixes #1223

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)}`

test/css/samples/cascade-false-nested/_config.js

@@ -0,0 +1,7 @@
+export default {
+	cascade: false,
+
+	data: {
+		dynamic: 'x'
+	}
+};

test/css/samples/cascade-false-nested/expected.css

@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}.bar.svelte-xyz{font-style:italic}

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>

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>