Skip to content

Commit 7d4958b

Browse files
Rich-HarrisRich-Harris
authored
Merge pull request #1192 from sveltejs/gh-1118-base36
use base 36 for style classes
2 parents 2f01115 + 3f7f237 commit 7d4958b

File tree

18 files changed

+39
-39
lines changed

18 files changed

+39
-39
lines changed

‎src/utils/hash.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// https://github.com/darkskyapp/string-hash/blob/master/index.js
2-
export default function hash(str: string): number {
2+
export default function hash(str: string): string {
33
let hash = 5381;
44
let i = str.length;
55

66
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
7-
return hash >>> 0;
7+
return (hash >>> 0).toString(36);
88
}

‎test/css/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ describe('css', () => {
9595
css: read(`test/css/samples/${dir}/expected.css`)
9696
};
9797

98-
assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz'), expected.css);
98+
assert.equal(dom.css.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz'), expected.css);
9999

100100
// verify that the right elements have scoping selectors
101101
if (expected.html !== null) {
@@ -114,7 +114,7 @@ describe('css', () => {
114114
fs.writeFileSync(`test/css/samples/${dir}/_actual.html`, html);
115115

116116
assert.equal(
117-
normalizeHtml(window, html.replace(/svelte-\d+/g, 'svelte-xyz')),
117+
normalizeHtml(window, html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz')),
118118
normalizeHtml(window, expected.html)
119119
);
120120

@@ -133,7 +133,7 @@ describe('css', () => {
133133
assert.equal(
134134
normalizeHtml(
135135
window,
136-
component.render(config.data).html.replace(/svelte-\d+/g, 'svelte-xyz')
136+
component.render(config.data).html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz')
137137
),
138138
normalizeHtml(window, expected.html)
139139
);

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -196,8 +196,8 @@ function data() {
196196
}
197197
function add_css() {
198198
var style = createElement("style");
199-
style.id = 'svelte-2794052100-style';
200-
style.textContent = "p.svelte-2794052100,.svelte-2794052100 p{color:red}";
199+
style.id = 'svelte-1a7i8ec-style';
200+
style.textContent = "p.svelte-1a7i8ec,.svelte-1a7i8ec p{color:red}";
201201
appendNode(style, document.head);
202202
}
203203

@@ -212,7 +212,7 @@ function create_main_fragment(component, state) {
212212
},
213213

214214
h: function hydrate() {
215-
p.className = "svelte-2794052100";
215+
p.className = "svelte-1a7i8ec";
216216
},
217217

218218
m: function mount(target, anchor) {
@@ -238,7 +238,7 @@ function SvelteComponent(options) {
238238
init(this, options);
239239
this._state = assign(data(), options.data);
240240

241-
if (!document.getElementById("svelte-2794052100-style")) add_css();
241+
if (!document.getElementById("svelte-1a7i8ec-style")) add_css();
242242

243243
this._fragment = create_main_fragment(this, this._state);
244244

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ function data() {
77

88
function add_css() {
99
var style = createElement("style");
10-
style.id = 'svelte-2794052100-style';
11-
style.textContent = "p.svelte-2794052100,.svelte-2794052100 p{color:red}";
10+
style.id = 'svelte-1a7i8ec-style';
11+
style.textContent = "p.svelte-1a7i8ec,.svelte-1a7i8ec p{color:red}";
1212
appendNode(style, document.head);
1313
}
1414

@@ -23,7 +23,7 @@ function create_main_fragment(component, state) {
2323
},
2424

2525
h: function hydrate() {
26-
p.className = "svelte-2794052100";
26+
p.className = "svelte-1a7i8ec";
2727
},
2828

2929
m: function mount(target, anchor) {
@@ -49,7 +49,7 @@ function SvelteComponent(options) {
4949
init(this, options);
5050
this._state = assign(data(), options.data);
5151

52-
if (!document.getElementById("svelte-2794052100-style")) add_css();
52+
if (!document.getElementById("svelte-1a7i8ec-style")) add_css();
5353

5454
this._fragment = create_main_fragment(this, this._state);
5555

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -189,8 +189,8 @@ var proto = {
189189

190190
function add_css() {
191191
var style = createElement("style");
192-
style.id = 'svelte-3905933315-style';
193-
style.textContent = "@media(min-width: 1px){div.svelte-3905933315,.svelte-3905933315 div{color:red}}";
192+
style.id = 'svelte-1slhpfn-style';
193+
style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn,.svelte-1slhpfn div{color:red}}";
194194
appendNode(style, document.head);
195195
}
196196

@@ -204,7 +204,7 @@ function create_main_fragment(component, state) {
204204
},
205205

206206
h: function hydrate() {
207-
div.className = "svelte-3905933315";
207+
div.className = "svelte-1slhpfn";
208208
},
209209

210210
m: function mount(target, anchor) {
@@ -225,7 +225,7 @@ function SvelteComponent(options) {
225225
init(this, options);
226226
this._state = assign({}, options.data);
227227

228-
if (!document.getElementById("svelte-3905933315-style")) add_css();
228+
if (!document.getElementById("svelte-1slhpfn-style")) add_css();
229229

230230
this._fragment = create_main_fragment(this, this._state);
231231

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { appendNode, assign, createElement, detachNode, init, insertNode, noop,
33

44
function add_css() {
55
var style = createElement("style");
6-
style.id = 'svelte-3905933315-style';
7-
style.textContent = "@media(min-width: 1px){div.svelte-3905933315,.svelte-3905933315 div{color:red}}";
6+
style.id = 'svelte-1slhpfn-style';
7+
style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn,.svelte-1slhpfn div{color:red}}";
88
appendNode(style, document.head);
99
}
1010

@@ -18,7 +18,7 @@ function create_main_fragment(component, state) {
1818
},
1919

2020
h: function hydrate() {
21-
div.className = "svelte-3905933315";
21+
div.className = "svelte-1slhpfn";
2222
},
2323

2424
m: function mount(target, anchor) {
@@ -39,7 +39,7 @@ function SvelteComponent(options) {
3939
init(this, options);
4040
this._state = assign({}, options.data);
4141

42-
if (!document.getElementById("svelte-3905933315-style")) add_css();
42+
if (!document.getElementById("svelte-1slhpfn-style")) add_css();
4343

4444
this._fragment = create_main_fragment(this, this._state);
4545

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
div.svelte-724714405,.svelte-724714405 div{color:red}
2-
div.svelte-300476157,.svelte-300476157 div{color:green}
1+
div.svelte-bzh57p,.svelte-bzh57p div{color:red}
2+
div.svelte-4yw8vx,.svelte-4yw8vx div{color:green}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div class="svelte-724714405">red</div>
2-
<div class="svelte-300476157">green: foo</div>
1+
<div class="svelte-bzh57p">red</div>
2+
<div class="svelte-4yw8vx">green: foo</div>
33

44

55

6-
<div class="svelte-300476157">green: bar</div>
6+
<div class="svelte-4yw8vx">green: bar</div>
77

88

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
div.svelte-724714405,.svelte-724714405 div{color:red}
2-
div.svelte-300476157,.svelte-300476157 div{color:green}
1+
div.svelte-bzh57p,.svelte-bzh57p div{color:red}
2+
div.svelte-4yw8vx,.svelte-4yw8vx div{color:green}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div class="svelte-724714405">red</div>
2-
<div class="svelte-300476157">green: foo</div>
1+
<div class="svelte-bzh57p">red</div>
2+
<div class="svelte-4yw8vx">green: foo</div>
33

44

55

6-
<div class="svelte-300476157">green: bar</div>
6+
<div class="svelte-4yw8vx">green: bar</div>
77

88

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
div.svelte-724714405,.svelte-724714405 div{color:red}
1+
div.svelte-bzh57p,.svelte-bzh57p div{color:red}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div class="svelte-724714405">red</div>
1+
<div class="svelte-bzh57p">red</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
div.svelte-724714405,.svelte-724714405 div{color:red}
1+
div.svelte-bzh57p,.svelte-bzh57p div{color:red}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<div class="svelte-724714405">red</div>
1+
<div class="svelte-bzh57p">red</div>

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)