Merge pull request #362 from sveltejs/gh-331

Add CSS to each document a component is rendered to
sveltejs · Mar 10, 2017 · 6fdbe52 · 6fdbe52
2 parents 4e95404 + 7dce2a5
commit 6fdbe52
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 21 deletions.
diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
@@ -201,16 +201,30 @@ export default function dom ( parsed, source, options, names ) {
 		getUniqueName: generator.getUniqueNameMaker()
 	});
 
-	parsed.html.children.forEach( node => generator.visit( node ) );
-
-	generator.addRenderer( generator.pop() );
-
 	const builders = {
 		main: new CodeBuilder(),
 		init: new CodeBuilder(),
 		_set: new CodeBuilder()
 	};
 
+	if ( parsed.css && options.css !== false ) {
+		generator.current.builders.mount.addLine( `if ( !target.ownerDocument.__sveltecss_${parsed.hash} ) addCss( target.ownerDocument );` );
+
+		builders.main.addBlock( deindent`
+			function addCss ( document ) {
+				var style = ${generator.helper( 'createElement' )}( 'style' );
+				style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )};
+				${generator.helper( 'appendNode' )}( style, document.head );
+
+				document.__sveltecss_${parsed.hash} = true;
+			}
+		` );
+	}
+
+	parsed.html.children.forEach( node => generator.visit( node ) );
+
+	generator.addRenderer( generator.pop() );
+
 	if ( options.dev ) {
 		builders._set.addBlock ( deindent`
 			if ( typeof newState !== 'object' ) {
@@ -253,28 +267,11 @@ export default function dom ( parsed, source, options, names ) {
 		builders.main.addBlock( `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` );
 	}
 
-	if ( parsed.css && options.css !== false ) {
-		builders.main.addBlock( deindent`
-			var addedCss = false;
-			function addCss () {
-				var style = ${generator.helper( 'createElement' )}( 'style' );
-				style.textContent = ${JSON.stringify( processCss( parsed, generator.code ) )};
-				${generator.helper( 'appendNode' )}( style, document.head );
-
-				addedCss = true;
-			}
-		` );
-	}
-
 	let i = generator.renderers.length;
 	while ( i-- ) builders.main.addBlock( generator.renderers[i] );
 
 	builders.init.addLine( `this._torndown = false;` );
 
-	if ( parsed.css && options.css !== false ) {
-		builders.init.addLine( `if ( !addedCss ) addCss();` );
-	}
-
 	if ( generator.hasComponents ) {
 		builders.init.addLine( `this._renderHooks = [];` );
 	}

diff --git a/test/generator/samples/render-in-iframe/_config.js b/test/generator/samples/render-in-iframe/_config.js
@@ -0,0 +1,21 @@
+export default {
+	test ( assert, component, target, window ) {
+		const iframe = window.document.createElement('iframe');
+		window.document.body.appendChild(iframe);
+
+		const otherTarget = iframe.contentWindow.document.body;
+
+		new component.constructor({
+			target: otherTarget
+		});
+
+		assert.equal(
+			window.getComputedStyle(target.querySelector('h1')).color,
+			'rgb(255, 0, 0)'
+		);
+		assert.equal(
+			window.getComputedStyle(otherTarget.querySelector('h1')).color,
+			'rgb(255, 0, 0)'
+		);
+	}
+};
diff --git a/test/generator/samples/render-in-iframe/main.html b/test/generator/samples/render-in-iframe/main.html
@@ -0,0 +1,6 @@
+<h1>Just some static HTML</h1>
+<style>
+h1 {
+	color: rgb(255, 0, 0);
+}
+</style>