Merge pull request #1226 from sveltejs/gh-1224

allow SVG elements to have scoped CSS
pull/1227/head
Rich Harris 7 years ago committed by GitHub
commit 26c5982d85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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

@ -216,7 +216,9 @@ export default class Element extends Node {
if (this._needsCssAttribute && !this.generator.customElement) { if (this._needsCssAttribute && !this.generator.customElement) {
if (!this.attributes.find(a => a.type === 'Attribute' && a.name === 'class')) { if (!this.attributes.find(a => a.type === 'Attribute' && a.name === 'class')) {
block.builders.hydrate.addLine( 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}";`
); );
} }

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

@ -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>
`
};

@ -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>

After

Width:  |  Height:  |  Size: 168 B

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

Loading…
Cancel
Save