Merge pull request #1226 from sveltejs/gh-1224

allow SVG elements to have scoped CSS

src/generators/nodes/Attribute.ts

@@ -141,7 +141,7 @@ export default class Attribute {
 				shouldCache = true;
 			}
 
-			if (node._needsCssAttribute && propertyName === 'className') {
+			if (node._needsCssAttribute && name === 'class') {
 				value = `(${value}) + " ${this.generator.stylesheet.id}"`;
 			}
 
@@ -228,7 +228,7 @@ export default class Attribute {
 			}
 		} else {
 			const isScopedClassAttribute = (
-				propertyName === 'className' &&
+				name === 'class' &&
 				this.parent._needsCssAttribute &&
 				!this.generator.customElement
 			);

src/generators/nodes/Element.ts

@@ -216,7 +216,9 @@ export default class Element extends Node {
 		if (this._needsCssAttribute && !this.generator.customElement) {
 			if (!this.attributes.find(a => a.type === 'Attribute' && a.name === 'class')) {
 				block.builders.hydrate.addLine(
-					`${name}.className = "${this.generator.stylesheet.id}";`
+					this.namespace
+						? `@setAttribute(${name}, "class", "${this.generator.stylesheet.id}");`
+						: `${name}.className = "${this.generator.stylesheet.id}";`
 				);
 			}
 

src/server-side-rendering/register.js

@@ -2,7 +2,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { compile } from '../index.ts';
 
-const compileOptions = {};
+let compileOptions = {};
 
 function capitalise(name) {
 	return name[0].toUpperCase() + name.slice(1);
@@ -17,7 +17,7 @@ export default function register(options) {
 	}
 
 	// TODO make this the default and remove in v2
-	if ('store' in options) compileOptions.store = options.store;
+	if (options) compileOptions = options;
 }
 
 function _deregister(extension) {

test/runtime/samples/svg-with-style/_config.js

@@ -0,0 +1,17 @@
+export default {
+	compileOptions: {
+		cascade: false
+	},
+
+	data: {
+		x: 'bar'
+	},
+
+	html: `
+		<svg>
+			<circle class="svelte-i03x00" cx=50 cy=50 r=50 />
+			<circle class="foo svelte-i03x00" cx=150 cy=50 r=50 />
+			<circle class="bar svelte-i03x00" cx=250 cy=50 r=50 />
+		</svg>
+	`
+};

test/runtime/samples/svg-with-style/main.html

@@ -0,0 +1,11 @@
+<svg>
+	<circle cx=50 cy=50 r=50/>
+	<circle class='foo' cx=150 cy=50 r=50/>
+	<circle class='{{x}}' cx=250 cy=50 r=50/>
+</svg>
+
+<style>
+	circle {
+		fill: red;
+	}
+</style>

test/server-side-rendering/index.js

@@ -110,10 +110,12 @@ describe("ssr", () => {
 				delete require.cache[resolved];
 			});
 
-			require("../../ssr/register")({
+			const compileOptions = Object.assign(config.compileOptions || {}, {
 				store: !!config.store
 			});
 
+			require("../../ssr/register")(compileOptions);
+
 			try {
 				const component = require(`../runtime/samples/${dir}/main.html`);
 				const { html } = component.render(config.data, {