Repository: sveltejs/svelte (JavaScript)
Date: 2018-03-12 12:15:17+00:00
Task type: Bug Fix

Issue:
.className can't be used to set classes on SVG elements
Via https://github.com/sveltejs/svelte.technology/issues/216

As of Svelte 1.57.0 we are using classes to scope styles instead of attributes, and SVG DOM elements do not implement a `className` setter, so trying to set that throws an exception. Classes _are_ allowed on SVG elements, but they can't be programmatically set that way.

I see that when classes are used on SVG elements normally, the generated code uses `setAttribute`, and so we should probably make sure we use that for CSS scope classes as well.

I'm not sure why this didn't show up in unit tests. Either there aren't any unit tests have scoped CSS and SVG or (more worrisome) jsdom erroneously supports .className setting on SVG elements.


Issue discussion:

Solution patch:
diff --git a/src/generators/nodes/Attribute.ts b/src/generators/nodes/Attribute.ts
--- a/src/generators/nodes/Attribute.ts
+++ b/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
 			);
diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts
--- a/src/generators/nodes/Element.ts
+++ b/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}";`
 				);
 			}
 
diff --git a/src/server-side-rendering/register.js b/src/server-side-rendering/register.js
--- a/src/server-side-rendering/register.js
+++ b/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 patch:
diff --git a/test/runtime/samples/svg-with-style/_config.js b/test/runtime/samples/svg-with-style/_config.js
new file mode 100644
--- /dev/null
+++ b/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>
+	`
+};
diff --git a/test/runtime/samples/svg-with-style/main.html b/test/runtime/samples/svg-with-style/main.html
new file mode 100644
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js
--- a/test/server-side-rendering/index.js
+++ b/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, {