diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts
index e94dce6a6266..62547956971c 100644
--- a/src/css/Stylesheet.ts
+++ b/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)[] = [];
diff --git a/src/parse/index.ts b/src/parse/index.ts
index 03c7cb95e507..c81d2f61b07f 100644
--- a/src/parse/index.ts
+++ b/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,
diff --git a/src/parse/utils/hash.ts b/src/utils/hash.ts
similarity index 100%
rename from src/parse/utils/hash.ts
rename to src/utils/hash.ts
diff --git a/test/css/index.js b/test/css/index.js
index 1e91e770c86f..b2e989d57130 100644
--- a/test/css/index.js
+++ b/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;
diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
index 487665fe9d57..fd2c6d9b0318 100644
--- a/test/js/samples/collapses-text-around-comments/expected-bundle.js
+++ b/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);
diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js
index 0ad2ccd29e3c..babc926f915d 100644
--- a/test/js/samples/collapses-text-around-comments/expected.js
+++ b/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;
\ No newline at end of file
+export default SvelteComponent;
diff --git a/test/js/samples/css-media-query/expected-bundle.js b/test/js/samples/css-media-query/expected-bundle.js
index 0d653764f20c..e5502c0a31c3 100644
--- a/test/js/samples/css-media-query/expected-bundle.js
+++ b/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);
diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js
index 3c36f9c6ce7c..567ae2725599 100644
--- a/test/js/samples/css-media-query/expected.js
+++ b/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;
\ No newline at end of file
+export default SvelteComponent;
diff --git a/test/server-side-rendering/samples/styles-nested/_actual.css b/test/server-side-rendering/samples/styles-nested/_actual.css
index 5888415ac139..e0b5eb0a7c0e 100644
--- a/test/server-side-rendering/samples/styles-nested/_actual.css
+++ b/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}
\ No newline at end of file
+div[svelte-724714405],[svelte-724714405] div{color:red}
+div[svelte-300476157],[svelte-300476157] div{color:green}
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/styles-nested/_actual.html b/test/server-side-rendering/samples/styles-nested/_actual.html
index 25b7d5c4f3d7..39dc0d55a459 100644
--- a/test/server-side-rendering/samples/styles-nested/_actual.html
+++ b/test/server-side-rendering/samples/styles-nested/_actual.html
@@ -1,8 +1,8 @@
-red
-green: foo
+red
+green: foo
-green: bar
+green: bar
diff --git a/test/server-side-rendering/samples/styles-nested/_expected.css b/test/server-side-rendering/samples/styles-nested/_expected.css
index 5888415ac139..e0b5eb0a7c0e 100644
--- a/test/server-side-rendering/samples/styles-nested/_expected.css
+++ b/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}
\ No newline at end of file
+div[svelte-724714405],[svelte-724714405] div{color:red}
+div[svelte-300476157],[svelte-300476157] div{color:green}
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/styles-nested/_expected.html b/test/server-side-rendering/samples/styles-nested/_expected.html
index 25b7d5c4f3d7..39dc0d55a459 100644
--- a/test/server-side-rendering/samples/styles-nested/_expected.html
+++ b/test/server-side-rendering/samples/styles-nested/_expected.html
@@ -1,8 +1,8 @@
-red
-green: foo
+red
+green: foo
-green: bar
+green: bar
diff --git a/test/server-side-rendering/samples/styles/_actual.css b/test/server-side-rendering/samples/styles/_actual.css
index 50a7e3a77c99..dec1fe76dcc9 100644
--- a/test/server-side-rendering/samples/styles/_actual.css
+++ b/test/server-side-rendering/samples/styles/_actual.css
@@ -1 +1 @@
-div[svelte-2278551596],[svelte-2278551596] div{color:red}
\ No newline at end of file
+div[svelte-724714405],[svelte-724714405] div{color:red}
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/styles/_actual.html b/test/server-side-rendering/samples/styles/_actual.html
index e0ab016f48ec..ce71341c2f3c 100644
--- a/test/server-side-rendering/samples/styles/_actual.html
+++ b/test/server-side-rendering/samples/styles/_actual.html
@@ -1 +1 @@
-red
\ No newline at end of file
+red
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/styles/_expected.css b/test/server-side-rendering/samples/styles/_expected.css
index 50a7e3a77c99..dec1fe76dcc9 100644
--- a/test/server-side-rendering/samples/styles/_expected.css
+++ b/test/server-side-rendering/samples/styles/_expected.css
@@ -1 +1 @@
-div[svelte-2278551596],[svelte-2278551596] div{color:red}
\ No newline at end of file
+div[svelte-724714405],[svelte-724714405] div{color:red}
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/styles/_expected.html b/test/server-side-rendering/samples/styles/_expected.html
index e0ab016f48ec..ce71341c2f3c 100644
--- a/test/server-side-rendering/samples/styles/_expected.html
+++ b/test/server-side-rendering/samples/styles/_expected.html
@@ -1 +1 @@
-red
\ No newline at end of file
+red
\ No newline at end of file
diff --git a/test/sourcemaps/samples/css-cascade-false/output.css b/test/sourcemaps/samples/css-cascade-false/output.css
index a153ecb86c8b..754b2e7aa208 100644
--- a/test/sourcemaps/samples/css-cascade-false/output.css
+++ b/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 */
\ No newline at end of file
diff --git a/test/sourcemaps/samples/css/output.css b/test/sourcemaps/samples/css/output.css
index b49fddc28d99..acc01832b479 100644
--- a/test/sourcemaps/samples/css/output.css
+++ b/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 */
\ No newline at end of file