diff --git a/src/generators/nodes/Attribute.ts b/src/generators/nodes/Attribute.ts index fe9ad0270b..69d8808730 100644 --- 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 index 91749eb4ae..69997e077c 100644 --- 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 index d50157140c..7940a2c487 100644 --- 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) { diff --git a/test/runtime/samples/svg-with-style/_config.js b/test/runtime/samples/svg-with-style/_config.js new file mode 100644 index 0000000000..254a94d77d --- /dev/null +++ b/test/runtime/samples/svg-with-style/_config.js @@ -0,0 +1,17 @@ +export default { + compileOptions: { + cascade: false + }, + + data: { + x: 'bar' + }, + + html: ` + + + + + + ` +}; diff --git a/test/runtime/samples/svg-with-style/main.html b/test/runtime/samples/svg-with-style/main.html new file mode 100644 index 0000000000..24c7f4487c --- /dev/null +++ b/test/runtime/samples/svg-with-style/main.html @@ -0,0 +1,11 @@ + + + + + + + \ No newline at end of file diff --git a/test/server-side-rendering/index.js b/test/server-side-rendering/index.js index 019c452c2f..524b9486ff 100644 --- 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, {