mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-12-01 01:11:24 +01:00
Code Issues Releases Wiki Activity

Merge pull request #733 from sveltejs/gh-375

Browse Source 
use helper to encapsulate styles, rather than being repetitious
This commit is contained in:
Rich Harris 2017-07-29 19:16:26 -04:00 committed by GitHub
commit 608f8943f3
6 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/generators/dom/index.ts
View File

@ -25,6 +25,8 @@ export class DomGenerator extends Generator {
hasOutroTransitions: boolean;
hasComplexBindings: boolean;
needsEncapsulateHelper: boolean;
constructor(
parsed: Parsed,
source: string,
@ -38,6 +40,7 @@ export class DomGenerator extends Generator {
this.readonly = new Set();
this.hydratable = options.hydratable;
this.needsEncapsulateHelper = false;
// initial values for e.g. window.innerWidth, if there's a <:Window> meta tag
this.metaBindings = [];
@ -131,6 +134,14 @@ export default function dom(
builder.addBlock(`[✂${parsed.js.content.start}-${parsed.js.content.end}✂]`);
}
if (generator.needsEncapsulateHelper) {
builder.addBlock(deindent`
function @encapsulateStyles ( node ) {
@setAttribute( node, '${generator.stylesheet.id}', '' );
}
`);
}
if (generator.stylesheet.hasStyles && options.css !== false) {
const { css, cssMap } = generator.stylesheet.render(options.filename);

3
src/generators/dom/visitors/Element/Element.ts
View File

@ -83,8 +83,9 @@ export default function visitElement(
// add CSS encapsulation attribute
// TODO add a helper for this, rather than repeating it
if (node._needsCssAttribute) {
generator.needsEncapsulateHelper = true;
block.builders.hydrate.addLine(
`@setAttribute( ${name}, '${generator.stylesheet.id}', '' );`
`@encapsulateStyles( ${name} );`
);
}

6
test/js/samples/collapses-text-around-comments/expected-bundle.js
View File

@ -143,6 +143,10 @@ var template = (function () {
};
}());
function encapsulateStyles ( node ) {
setAttribute( node, 'svelte-3590263702', '' );
}
function add_css () {
var style = createElement( 'style' );
style.id = 'svelte-3590263702-style';
@ -161,7 +165,7 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
setAttribute( p, 'svelte-3590263702', '' );
encapsulateStyles( p );
},
mount: function ( target, anchor ) {

6
test/js/samples/collapses-text-around-comments/expected.js
View File

@ -8,6 +8,10 @@ var template = (function () {
};
}());
function encapsulateStyles ( node ) {
setAttribute( node, 'svelte-3590263702', '' );
}
function add_css () {
var style = createElement( 'style' );
style.id = 'svelte-3590263702-style';
@ -26,7 +30,7 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
setAttribute( p, 'svelte-3590263702', '' );
encapsulateStyles( p );
},
mount: function ( target, anchor ) {

6
test/js/samples/css-media-query/expected-bundle.js
View File

@ -131,6 +131,10 @@ var proto = {
set: set
};
function encapsulateStyles ( node ) {
setAttribute( node, 'svelte-2363328337', '' );
}
function add_css () {
var style = createElement( 'style' );
style.id = 'svelte-2363328337-style';
@ -148,7 +152,7 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
setAttribute( div, 'svelte-2363328337', '' );
encapsulateStyles( div );
},
mount: function ( target, anchor ) {

6
test/js/samples/css-media-query/expected.js
View File

@ -1,5 +1,9 @@
import { appendNode, assign, createElement, detachNode, dispatchObservers, insertNode, noop, proto, setAttribute } from "svelte/shared.js";
function encapsulateStyles ( node ) {
setAttribute( node, 'svelte-2363328337', '' );
}
function add_css () {
var style = createElement( 'style' );
style.id = 'svelte-2363328337-style';
@ -17,7 +21,7 @@ function create_main_fragment ( state, component ) {
},
hydrate: function ( nodes ) {
setAttribute( div, 'svelte-2363328337', '' );
encapsulateStyles( div );
},
mount: function ( target, anchor ) {