From 70a99925a992a134cb1daa81b7f4b2dc2633c7be Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 29 Jul 2017 19:04:03 -0400 Subject: [PATCH] use helper to encapsulate styles, rather than being repetitious (fixes #375) --- src/generators/dom/index.ts | 11 +++++++++++ src/generators/dom/visitors/Element/Element.ts | 3 ++- .../collapses-text-around-comments/expected-bundle.js | 6 +++++- .../collapses-text-around-comments/expected.js | 6 +++++- test/js/samples/css-media-query/expected-bundle.js | 6 +++++- test/js/samples/css-media-query/expected.js | 6 +++++- 6 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts index 3e7c7a62f2..073471e5b0 100644 --- a/src/generators/dom/index.ts +++ b/src/generators/dom/index.ts @@ -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); diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts index 08ab6b2c68..19743bb3ce 100644 --- a/src/generators/dom/visitors/Element/Element.ts +++ b/src/generators/dom/visitors/Element/Element.ts @@ -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} );` ); } diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js index 535273b636..b5d8d9055c 100644 --- a/test/js/samples/collapses-text-around-comments/expected-bundle.js +++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js @@ -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 ) { diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js index 33931b121c..7d410b98da 100644 --- a/test/js/samples/collapses-text-around-comments/expected.js +++ b/test/js/samples/collapses-text-around-comments/expected.js @@ -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 ) { diff --git a/test/js/samples/css-media-query/expected-bundle.js b/test/js/samples/css-media-query/expected-bundle.js index c0a8f05171..8132c85d17 100644 --- a/test/js/samples/css-media-query/expected-bundle.js +++ b/test/js/samples/css-media-query/expected-bundle.js @@ -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 ) { diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js index e1c020aa8d..43de05d102 100644 --- a/test/js/samples/css-media-query/expected.js +++ b/test/js/samples/css-media-query/expected.js @@ -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 ) {