Repository: sveltejs/svelte (JavaScript)
Date: 2017-07-29 23:10:58+00:00
Task type: Refactoring

Issue:
Store CSS hashed attribute in a variable
A nice easy win — currently if you have a component with CSS, top-level elements get this treatment:

```js
setAttribute( div, 'svelte-3599223440', '' );
```

If there's more than one top-level element, it would make more sense to do this instead:

```js
var cssAttr = 'svelte-3599223440';
// ...
setAttribute( div, cssAttr, '' );
```

Or even

```js
function encapsulateStyles ( node ) {
  div.setAttribute( 'svelte-3599223440', '' );
}
// ...
encapsulateStyles( div );
```
Store CSS hashed attribute in a variable
A nice easy win — currently if you have a component with CSS, top-level elements get this treatment:

```js
setAttribute( div, 'svelte-3599223440', '' );
```

If there's more than one top-level element, it would make more sense to do this instead:

```js
var cssAttr = 'svelte-3599223440';
// ...
setAttribute( div, cssAttr, '' );
```

Or even

```js
function encapsulateStyles ( node ) {
  div.setAttribute( 'svelte-3599223440', '' );
}
// ...
encapsulateStyles( div );
```


Issue discussion:

Solution patch:
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
--- 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
--- 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} );`
 		);
 	}
 


Test patch:
diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
--- 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
--- 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
--- 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
--- 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 ) {