From 5169ef1cb17f27b2379e29591dc4c8c7a3219a07 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 12 Mar 2018 08:14:27 -0400 Subject: [PATCH 1/3] allow SVG elements to have scoped CSS - fixes #1224 --- src/generators/nodes/Attribute.ts | 4 ++-- src/generators/nodes/Element.ts | 4 +++- test/runtime/samples/svg-with-style/_config.js | 17 +++++++++++++++++ test/runtime/samples/svg-with-style/main.html | 11 +++++++++++ 4 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 test/runtime/samples/svg-with-style/_config.js create mode 100644 test/runtime/samples/svg-with-style/main.html 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..639b9eabbe 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 === namespaces.svg + ? `@setAttribute(${name}, "class", "${this.generator.stylesheet.id}");` + : `${name}.className = "${this.generator.stylesheet.id}";` ); } 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 From 63dd90cf31614ff2768e0166de9bb225f40fd80e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 12 Mar 2018 08:14:46 -0400 Subject: [PATCH 2/3] set arbitrary compile options when calling SSR register function --- src/server-side-rendering/register.js | 4 ++-- test/server-side-rendering/index.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) 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/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, { From c70d6f43ecffd17075e1b861766d034fe9f0d96b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 12 Mar 2018 08:42:50 -0400 Subject: [PATCH 3/3] use setAttribute for any namespaced element --- src/generators/nodes/Element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts index 639b9eabbe..69997e077c 100644 --- a/src/generators/nodes/Element.ts +++ b/src/generators/nodes/Element.ts @@ -216,7 +216,7 @@ 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( - this.namespace === namespaces.svg + this.namespace ? `@setAttribute(${name}, "class", "${this.generator.stylesheet.id}");` : `${name}.className = "${this.generator.stylesheet.id}";` );