From 980c2626b4b651727a10e0d43828e5f92e45f382 Mon Sep 17 00:00:00 2001
From: Conduitry <git@fur.army>
Date: Wed, 3 May 2017 14:31:14 -0400
Subject: [PATCH] label <style> element with id instead of with attribute, for
 performance

---
 src/generators/dom/index.js                                | 4 ++--
 test/js/samples/collapses-text-around-comments/expected.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index 6236348de5..260cce52be 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -119,7 +119,7 @@ export default function dom ( parsed, source, options ) {
 		builders.main.addBlock( deindent`
 			function ${generator.alias( 'add_css' )} () {
 				var style = ${generator.helper( 'createElement' )}( 'style' );
-				${generator.helper( 'setAttribute' )}( style, ${JSON.stringify( generator.cssId )}, '' );
+				style.id = ${JSON.stringify( generator.cssId + '-style' )};
 				style.textContent = ${JSON.stringify( generator.css )};
 				${generator.helper( 'appendNode' )}( style, document.head );
 			}
@@ -133,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 ( !document.querySelector( 'style[${generator.cssId}]' ) ) ${generator.alias( 'add_css' )}();` );
+		builders.init.addLine( `if ( !document.getElementById( ${JSON.stringify( generator.cssId + '-style' )} ) ) ${generator.alias( 'add_css' )}();` );
 	}
 
 	if ( generator.hasComponents || generator.hasIntroTransitions ) {
diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js
index 7f073cd1ad..faa7e9d36a 100644
--- a/test/js/samples/collapses-text-around-comments/expected.js
+++ b/test/js/samples/collapses-text-around-comments/expected.js
@@ -10,7 +10,7 @@ var template = (function () {
 
 function add_css () {
 	var style = createElement( 'style' );
-	setAttribute( style, "svelte-3842350206", '' );
+	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 );
 }
@@ -57,7 +57,7 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if ( !document.querySelector( 'style[svelte-3842350206]' ) ) 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 );