Base scoping hashes on CSS content rather than entire file

src/parse/index.ts

@@ -185,14 +185,20 @@ export class Parser {
 	}
 }
 
+function getHashSource (parser: Parser, options: ParserOptions) {
+	if (options.css === false || !parser.css) {
+		return parser.template;
+	}
+	return parser.css.content.styles;
+}
+
 export default function parse(
 	template: string,
 	options: ParserOptions = {}
 ): Parsed {
 	const parser = new Parser(template, options);
-
 	return {
-		hash: hash(parser.template),
+		hash: hash(getHashSource(parser, options)),
 		html: parser.html,
 		css: parser.css,
 		js: parser.js,

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.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}";
+	style.id = 'svelte-2794052100-style';
+	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.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}";
+	style.id = 'svelte-2794052100-style';
+	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.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}";
+	style.id = 'svelte-3905933315-style';
+	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.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}";
+	style.id = 'svelte-3905933315-style';
+	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-1580141456],[svelte-1580141456] div{color:green}
+div[svelte-724714405],[svelte-724714405] div{color:red}
+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-1580141456>green: foo</div>
+<div svelte-724714405>red</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-1580141456],[svelte-1580141456] div{color:green}
+div[svelte-724714405],[svelte-724714405] div{color:red}
+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-1580141456>green: foo</div>
+<div svelte-724714405>red</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 */