Merge pull request #555 from sveltejs/gh-554

Always check whether we need to add CSS

src/generators/dom/index.js

@@ -117,13 +117,11 @@ export default function dom ( parsed, source, options ) {
 
 	if ( generator.css && options.css !== false ) {
 		builders.main.addBlock( deindent`
-			var ${generator.alias( 'added_css' )} = false;
 			function ${generator.alias( 'add_css' )} () {
 				var style = ${generator.helper( 'createElement' )}( 'style' );
+				style.id = ${JSON.stringify( generator.cssId + '-style' )};
 				style.textContent = ${JSON.stringify( generator.css )};
 				${generator.helper( 'appendNode' )}( style, document.head );
-
-				${generator.alias( 'added_css' )} = true;
 			}
 		` );
 	}
@@ -135,7 +133,7 @@ export default function dom ( parsed, source, options ) {
 	builders.init.addLine( `this._torndown = false;` );
 
 	if ( parsed.css && options.css !== false ) {
-		builders.init.addLine( `if ( !${generator.alias( 'added_css' )} ) ${generator.alias( 'add_css' )}();` );
+		builders.init.addLine( `if ( !document.getElementById( ${JSON.stringify( generator.cssId + '-style' )} ) ) ${generator.alias( 'add_css' )}();` );
 	}
 
 	if ( generator.hasComponents || generator.hasIntroTransitions ) {

test/js/samples/collapses-text-around-comments/expected.js

@@ -8,13 +8,11 @@ var template = (function () {
 	};
 }());
 
-var added_css = false;
 function add_css () {
 	var style = createElement( 'style' );
+	style.id = "svelte-3842350206-style";
 	style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
 	appendNode( style, document.head );
-
-	added_css = true;
 }
 
 function create_main_fragment ( state, component ) {
@@ -59,7 +57,7 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if ( !added_css ) add_css();
+	if ( !document.getElementById( "svelte-3842350206-style" ) ) add_css();
 
 	this._fragment = create_main_fragment( this._state, this );
 	if ( options.target ) this._fragment.mount( options.target, null );