Skip to content

Commit 050ed5d

Browse files
Rich-HarrisRich-Harris
authored
Merge pull request #1119 from sveltejs/gh-1091
Base stylesheet.id on CSS contents
2 parents 6b32e44 + f61acd0 commit 050ed5d

File tree

18 files changed

+40
-38
lines changed

18 files changed

+40
-38
lines changed

‎src/css/Stylesheet.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { walk } from 'estree-walker';
33
import { getLocator } from 'locate-character';
44
import Selector from './Selector';
55
import getCodeFrame from '../utils/getCodeFrame';
6+
import hash from '../utils/hash';
67
import Element from '../generators/nodes/Element';
78
import { Validator } from '../validate/index';
89
import { Node, Parsed, Warning } from '../interfaces';
@@ -269,12 +270,12 @@ export default class Stylesheet {
269270
this.cascade = cascade;
270271
this.filename = filename;
271272

272-
this.id = `svelte-${parsed.hash}`;
273-
274273
this.children = [];
275274
this.keyframes = new Map();
276275

277276
if (parsed.css && parsed.css.children.length) {
277+
this.id = `svelte-${hash(parsed.css.content.styles)}`;
278+
278279
this.hasStyles = true;
279280

280281
const stack: (Rule | Atrule)[] = [];

‎src/parse/index.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { trimStart, trimEnd } from '../utils/trim';
66
import getCodeFrame from '../utils/getCodeFrame';
77
import reservedNames from '../utils/reservedNames';
88
import fullCharCodeAt from '../utils/fullCharCodeAt';
9-
import hash from './utils/hash';
9+
import hash from '../utils/hash';
1010
import { Node, Parsed } from '../interfaces';
1111
import CompileError from '../utils/CompileError';
1212

@@ -207,7 +207,6 @@ export default function parse(
207207
options: ParserOptions = {}
208208
): Parsed {
209209
const parser = new Parser(template, options);
210-
211210
return {
212211
hash: hash(parser.template),
213212
html: parser.html,

‎src/parse/utils/hash.ts ‎src/utils/hash.ts

File renamed without changes.

‎test/css/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,8 @@ describe('css', () => {
117117
normalizeHtml(window, html.replace(/svelte-\d+/g, 'svelte-xyz')),
118118
normalizeHtml(window, expected.html)
119119
);
120+
121+
window.document.head.innerHTML = ''; // remove added styles
120122
} catch (err) {
121123
console.log(dom.code);
122124
throw err;

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -198,13 +198,13 @@ function data() {
198198
}
199199

200200
function encapsulateStyles(node) {
201-
setAttribute(node, "svelte-3590263702", "");
201+
setAttribute(node, "svelte-2794052100", "");
202202
}
203203

204204
function add_css() {
205205
var style = createElement("style");
206-
style.id = 'svelte-3590263702-style';
207-
style.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}";
206+
style.id = 'svelte-2794052100-style';
207+
style.textContent = "p[svelte-2794052100],[svelte-2794052100] p{color:red}";
208208
appendNode(style, document.head);
209209
}
210210

@@ -245,7 +245,7 @@ function SvelteComponent(options) {
245245
init(this, options);
246246
this._state = assign(data(), options.data);
247247

248-
if (!document.getElementById("svelte-3590263702-style")) add_css();
248+
if (!document.getElementById("svelte-2794052100-style")) add_css();
249249

250250
this._fragment = create_main_fragment(this._state, this);
251251

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ function data() {
66
};
77

88
function encapsulateStyles(node) {
9-
setAttribute(node, "svelte-3590263702", "");
9+
setAttribute(node, "svelte-2794052100", "");
1010
}
1111

1212
function add_css() {
1313
var style = createElement("style");
14-
style.id = 'svelte-3590263702-style';
15-
style.textContent = "p[svelte-3590263702],[svelte-3590263702] p{color:red}";
14+
style.id = 'svelte-2794052100-style';
15+
style.textContent = "p[svelte-2794052100],[svelte-2794052100] p{color:red}";
1616
appendNode(style, document.head);
1717
}
1818

@@ -53,7 +53,7 @@ function SvelteComponent(options) {
5353
init(this, options);
5454
this._state = assign(data(), options.data);
5555

56-
if (!document.getElementById("svelte-3590263702-style")) add_css();
56+
if (!document.getElementById("svelte-2794052100-style")) add_css();
5757

5858
this._fragment = create_main_fragment(this._state, this);
5959

@@ -64,4 +64,4 @@ function SvelteComponent(options) {
6464
}
6565

6666
assign(SvelteComponent.prototype, proto);
67-
export default SvelteComponent;
67+
export default SvelteComponent;

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -190,13 +190,13 @@ var proto = {
190190

191191
/* generated by Svelte vX.Y.Z */
192192
function encapsulateStyles(node) {
193-
setAttribute(node, "svelte-2363328337", "");
193+
setAttribute(node, "svelte-3905933315", "");
194194
}
195195

196196
function add_css() {
197197
var style = createElement("style");
198-
style.id = 'svelte-2363328337-style';
199-
style.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}";
198+
style.id = 'svelte-3905933315-style';
199+
style.textContent = "@media(min-width: 1px){div[svelte-3905933315],[svelte-3905933315] div{color:red}}";
200200
appendNode(style, document.head);
201201
}
202202

@@ -231,7 +231,7 @@ function SvelteComponent(options) {
231231
init(this, options);
232232
this._state = assign({}, options.data);
233233

234-
if (!document.getElementById("svelte-2363328337-style")) add_css();
234+
if (!document.getElementById("svelte-3905933315-style")) add_css();
235235

236236
this._fragment = create_main_fragment(this._state, this);
237237

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
import { appendNode, assign, createElement, detachNode, init, insertNode, noop, proto, setAttribute } from "svelte/shared.js";
33

44
function encapsulateStyles(node) {
5-
setAttribute(node, "svelte-2363328337", "");
5+
setAttribute(node, "svelte-3905933315", "");
66
}
77

88
function add_css() {
99
var style = createElement("style");
10-
style.id = 'svelte-2363328337-style';
11-
style.textContent = "@media(min-width: 1px){div[svelte-2363328337],[svelte-2363328337] div{color:red}}";
10+
style.id = 'svelte-3905933315-style';
11+
style.textContent = "@media(min-width: 1px){div[svelte-3905933315],[svelte-3905933315] div{color:red}}";
1212
appendNode(style, document.head);
1313
}
1414

@@ -43,7 +43,7 @@ function SvelteComponent(options) {
4343
init(this, options);
4444
this._state = assign({}, options.data);
4545

46-
if (!document.getElementById("svelte-2363328337-style")) add_css();
46+
if (!document.getElementById("svelte-3905933315-style")) add_css();
4747

4848
this._fragment = create_main_fragment(this._state, this);
4949

@@ -54,4 +54,4 @@ function SvelteComponent(options) {
5454
}
5555

5656
assign(SvelteComponent.prototype, proto);
57-
export default SvelteComponent;
57+
export default SvelteComponent;

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

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

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div svelte-1408461649>red</div>
2-
<div svelte-1580141456>green: foo</div>
1+
<div svelte-724714405>red</div>
2+
<div svelte-300476157>green: foo</div>
33

44

55

6-
<div svelte-1580141456>green: bar</div>
6+
<div svelte-300476157>green: bar</div>
77

88

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

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

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div svelte-1408461649>red</div>
2-
<div svelte-1580141456>green: foo</div>
1+
<div svelte-724714405>red</div>
2+
<div svelte-300476157>green: foo</div>
33

44

55

6-
<div svelte-1580141456>green: bar</div>
6+
<div svelte-300476157>green: bar</div>
77

88

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
div[svelte-2278551596],[svelte-2278551596] div{color:red}
1+
div[svelte-724714405],[svelte-724714405] div{color:red}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div svelte-2278551596>red</div>
1+
<div svelte-724714405>red</div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
div[svelte-2278551596],[svelte-2278551596] div{color:red}
1+
div[svelte-724714405],[svelte-724714405] div{color:red}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div svelte-2278551596>red</div>
1+
<div svelte-724714405>red</div>

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

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/sourcemaps/samples/css/output.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)