Merge pull request #1119 from sveltejs/gh-1091

Base stylesheet.id on CSS contents

src/css/Stylesheet.ts

@@ -3,6 +3,7 @@ import { walk } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import Selector from './Selector';
 import getCodeFrame from '../utils/getCodeFrame';
+import hash from '../utils/hash';
 import Element from '../generators/nodes/Element';
 import { Validator } from '../validate/index';
 import { Node, Parsed, Warning } from '../interfaces';
@@ -269,12 +270,12 @@ export default class Stylesheet {
 		this.cascade = cascade;
 		this.filename = filename;
 
-		this.id = `svelte-${parsed.hash}`;
-
 		this.children = [];
 		this.keyframes = new Map();
 
 		if (parsed.css && parsed.css.children.length) {
+			this.id = `svelte-${hash(parsed.css.content.styles)}`;
+
 			this.hasStyles = true;
 
 			const stack: (Rule | Atrule)[] = [];

src/parse/index.ts

@@ -6,7 +6,7 @@ import { trimStart, trimEnd } from '../utils/trim';
 import getCodeFrame from '../utils/getCodeFrame';
 import reservedNames from '../utils/reservedNames';
 import fullCharCodeAt from '../utils/fullCharCodeAt';
-import hash from './utils/hash';
+import hash from '../utils/hash';
 import { Node, Parsed } from '../interfaces';
 import CompileError from '../utils/CompileError';
 
@@ -207,7 +207,6 @@ export default function parse(
 	options: ParserOptions = {}
 ): Parsed {
 	const parser = new Parser(template, options);
-
 	return {
 		hash: hash(parser.template),
 		html: parser.html,

test/css/index.js

@@ -117,6 +117,8 @@ describe('css', () => {
 						normalizeHtml(window, html.replace(/svelte-\d+/g, 'svelte-xyz')),
 						normalizeHtml(window, expected.html)
 					);
+
+					window.document.head.innerHTML = ''; // remove added styles
 				} catch (err) {
 					console.log(dom.code);
 					throw err;

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

@@ -198,13 +198,13 @@ function data() {
 }
 
 function encapsulateStyles(node) {
-	setAttribute(node, "svelte-3590263702", "");
+	setAttribute(node, "svelte-2794052100", "");
 }
 
 function add_css() {
 	var style = createElement("style");
-	style.id = 'svelte-3590263702-style';
+	style.id = 'svelte-2794052100-style';
-	style.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}";
+	style.textContent = "p[svelte-2794052100],[svelte-2794052100] p{color:red}";
 	appendNode(style, document.head);
 }
 
@@ -245,7 +245,7 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign(data(), options.data);
 
-	if (!document.getElementById("svelte-3590263702-style")) add_css();
+	if (!document.getElementById("svelte-2794052100-style")) add_css();
 
 	this._fragment = create_main_fragment(this._state, this);
 

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

@@ -6,13 +6,13 @@ function data() {
 };
 
 function encapsulateStyles(node) {
-	setAttribute(node, "svelte-3590263702", "");
+	setAttribute(node, "svelte-2794052100", "");
 }
 
 function add_css() {
 	var style = createElement("style");
-	style.id = 'svelte-3590263702-style';
+	style.id = 'svelte-2794052100-style';
-	style.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}";
+	style.textContent = "p[svelte-2794052100],[svelte-2794052100] p{color:red}";
 	appendNode(style, document.head);
 }
 
@@ -53,7 +53,7 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign(data(), options.data);
 
-	if (!document.getElementById("svelte-3590263702-style")) add_css();
+	if (!document.getElementById("svelte-2794052100-style")) add_css();
 
 	this._fragment = create_main_fragment(this._state, this);
 
@@ -64,4 +64,4 @@ function SvelteComponent(options) {
 }
 
 assign(SvelteComponent.prototype, proto);
-export default SvelteComponent;
+export default SvelteComponent;

test/js/samples/css-media-query/expected-bundle.js

@@ -190,13 +190,13 @@ var proto = {
 
 /* generated by Svelte vX.Y.Z */
 function encapsulateStyles(node) {
-	setAttribute(node, "svelte-2363328337", "");
+	setAttribute(node, "svelte-3905933315", "");
 }
 
 function add_css() {
 	var style = createElement("style");
-	style.id = 'svelte-2363328337-style';
+	style.id = 'svelte-3905933315-style';
-	style.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}";
+	style.textContent = "@media(min-width: 1px){div[svelte-3905933315],[svelte-3905933315] div{color:red}}";
 	appendNode(style, document.head);
 }
 
@@ -231,7 +231,7 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
 
-	if (!document.getElementById("svelte-2363328337-style")) add_css();
+	if (!document.getElementById("svelte-3905933315-style")) add_css();
 
 	this._fragment = create_main_fragment(this._state, this);
 

test/js/samples/css-media-query/expected.js

@@ -2,13 +2,13 @@
 import { appendNode, assign, createElement, detachNode, init, insertNode, noop, proto, setAttribute } from "svelte/shared.js";
 
 function encapsulateStyles(node) {
-	setAttribute(node, "svelte-2363328337", "");
+	setAttribute(node, "svelte-3905933315", "");
 }
 
 function add_css() {
 	var style = createElement("style");
-	style.id = 'svelte-2363328337-style';
+	style.id = 'svelte-3905933315-style';
-	style.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}";
+	style.textContent = "@media(min-width: 1px){div[svelte-3905933315],[svelte-3905933315] div{color:red}}";
 	appendNode(style, document.head);
 }
 
@@ -43,7 +43,7 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
 
-	if (!document.getElementById("svelte-2363328337-style")) add_css();
+	if (!document.getElementById("svelte-3905933315-style")) add_css();
 
 	this._fragment = create_main_fragment(this._state, this);
 
@@ -54,4 +54,4 @@ function SvelteComponent(options) {
 }
 
 assign(SvelteComponent.prototype, proto);
-export default SvelteComponent;
+export default SvelteComponent;

test/server-side-rendering/samples/styles-nested/_actual.css

@@ -1,2 +1,2 @@
-div[svelte-1408461649],[svelte-1408461649] div{color:red}
+div[svelte-724714405],[svelte-724714405] div{color:red}
-div[svelte-1580141456],[svelte-1580141456] div{color:green}
+div[svelte-300476157],[svelte-300476157] div{color:green}

test/server-side-rendering/samples/styles-nested/_actual.html

@@ -1,8 +1,8 @@
-<div svelte-1408461649>red</div>
+<div svelte-724714405>red</div>
-<div svelte-1580141456>green: foo</div>
+<div svelte-300476157>green: foo</div>
 
 
 
-<div svelte-1580141456>green: bar</div>
+<div svelte-300476157>green: bar</div>
 
 

test/server-side-rendering/samples/styles-nested/_expected.css

@@ -1,2 +1,2 @@
-div[svelte-1408461649],[svelte-1408461649] div{color:red}
+div[svelte-724714405],[svelte-724714405] div{color:red}
-div[svelte-1580141456],[svelte-1580141456] div{color:green}
+div[svelte-300476157],[svelte-300476157] div{color:green}

test/server-side-rendering/samples/styles-nested/_expected.html

@@ -1,8 +1,8 @@
-<div svelte-1408461649>red</div>
+<div svelte-724714405>red</div>
-<div svelte-1580141456>green: foo</div>
+<div svelte-300476157>green: foo</div>
 
 
 
-<div svelte-1580141456>green: bar</div>
+<div svelte-300476157>green: bar</div>
 
 

test/server-side-rendering/samples/styles/_actual.css

@@ -1 +1 @@
-div[svelte-2278551596],[svelte-2278551596] div{color:red}
+div[svelte-724714405],[svelte-724714405] div{color:red}

test/server-side-rendering/samples/styles/_actual.html

@@ -1 +1 @@
-<div svelte-2278551596>red</div>
+<div svelte-724714405>red</div>

test/server-side-rendering/samples/styles/_expected.css

@@ -1 +1 @@
-div[svelte-2278551596],[svelte-2278551596] div{color:red}
+div[svelte-724714405],[svelte-724714405] div{color:red}

test/server-side-rendering/samples/styles/_expected.html

@@ -1 +1 @@
-<div svelte-2278551596>red</div>
+<div svelte-724714405>red</div>

test/sourcemaps/samples/css-cascade-false/output.css

@@ -1,2 +1,2 @@
-.foo[svelte-2772200924]{color:red}
+.foo[svelte-1719932608]{color:red}
 /*# sourceMappingURL=output.css.map */

test/sourcemaps/samples/css/output.css

@@ -1,2 +1,2 @@
-[svelte-2772200924].foo,[svelte-2772200924] .foo{color:red}
+[svelte-1719932608].foo,[svelte-1719932608] .foo{color:red}
 /*# sourceMappingURL=output.css.map */