Merge pull request #1192 from sveltejs/gh-1118-base36

use base 36 for style classes
pull/1190/head
Rich Harris 7 years ago committed by GitHub
commit 7d4958b012
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,8 +1,8 @@
// https://github.com/darkskyapp/string-hash/blob/master/index.js
export default function hash(str: string): number {
export default function hash(str: string): string {
let hash = 5381;
let i = str.length;
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
return hash >>> 0;
return (hash >>> 0).toString(36);
}

@ -95,7 +95,7 @@ describe('css', () => {
css: read(`test/css/samples/${dir}/expected.css`)
};
assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz'), expected.css);
assert.equal(dom.css.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz'), expected.css);
// verify that the right elements have scoping selectors
if (expected.html !== null) {
@ -114,7 +114,7 @@ describe('css', () => {
fs.writeFileSync(`test/css/samples/${dir}/_actual.html`, html);
assert.equal(
normalizeHtml(window, html.replace(/svelte-\d+/g, 'svelte-xyz')),
normalizeHtml(window, html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz')),
normalizeHtml(window, expected.html)
);
@ -133,7 +133,7 @@ describe('css', () => {
assert.equal(
normalizeHtml(
window,
component.render(config.data).html.replace(/svelte-\d+/g, 'svelte-xyz')
component.render(config.data).html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz')
),
normalizeHtml(window, expected.html)
);

@ -196,8 +196,8 @@ function data() {
}
function add_css() {
var style = createElement("style");
style.id = 'svelte-2794052100-style';
style.textContent = "p.svelte-2794052100,.svelte-2794052100 p{color:red}";
style.id = 'svelte-1a7i8ec-style';
style.textContent = "p.svelte-1a7i8ec,.svelte-1a7i8ec p{color:red}";
appendNode(style, document.head);
}
@ -212,7 +212,7 @@ function create_main_fragment(component, state) {
},
h: function hydrate() {
p.className = "svelte-2794052100";
p.className = "svelte-1a7i8ec";
},
m: function mount(target, anchor) {
@ -238,7 +238,7 @@ function SvelteComponent(options) {
init(this, options);
this._state = assign(data(), options.data);
if (!document.getElementById("svelte-2794052100-style")) add_css();
if (!document.getElementById("svelte-1a7i8ec-style")) add_css();
this._fragment = create_main_fragment(this, this._state);

@ -7,8 +7,8 @@ function data() {
function add_css() {
var style = createElement("style");
style.id = 'svelte-2794052100-style';
style.textContent = "p.svelte-2794052100,.svelte-2794052100 p{color:red}";
style.id = 'svelte-1a7i8ec-style';
style.textContent = "p.svelte-1a7i8ec,.svelte-1a7i8ec p{color:red}";
appendNode(style, document.head);
}
@ -23,7 +23,7 @@ function create_main_fragment(component, state) {
},
h: function hydrate() {
p.className = "svelte-2794052100";
p.className = "svelte-1a7i8ec";
},
m: function mount(target, anchor) {
@ -49,7 +49,7 @@ function SvelteComponent(options) {
init(this, options);
this._state = assign(data(), options.data);
if (!document.getElementById("svelte-2794052100-style")) add_css();
if (!document.getElementById("svelte-1a7i8ec-style")) add_css();
this._fragment = create_main_fragment(this, this._state);

@ -189,8 +189,8 @@ var proto = {
function add_css() {
var style = createElement("style");
style.id = 'svelte-3905933315-style';
style.textContent = "@media(min-width: 1px){div.svelte-3905933315,.svelte-3905933315 div{color:red}}";
style.id = 'svelte-1slhpfn-style';
style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn,.svelte-1slhpfn div{color:red}}";
appendNode(style, document.head);
}
@ -204,7 +204,7 @@ function create_main_fragment(component, state) {
},
h: function hydrate() {
div.className = "svelte-3905933315";
div.className = "svelte-1slhpfn";
},
m: function mount(target, anchor) {
@ -225,7 +225,7 @@ function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
if (!document.getElementById("svelte-3905933315-style")) add_css();
if (!document.getElementById("svelte-1slhpfn-style")) add_css();
this._fragment = create_main_fragment(this, this._state);

@ -3,8 +3,8 @@ import { appendNode, assign, createElement, detachNode, init, insertNode, noop,
function add_css() {
var style = createElement("style");
style.id = 'svelte-3905933315-style';
style.textContent = "@media(min-width: 1px){div.svelte-3905933315,.svelte-3905933315 div{color:red}}";
style.id = 'svelte-1slhpfn-style';
style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn,.svelte-1slhpfn div{color:red}}";
appendNode(style, document.head);
}
@ -18,7 +18,7 @@ function create_main_fragment(component, state) {
},
h: function hydrate() {
div.className = "svelte-3905933315";
div.className = "svelte-1slhpfn";
},
m: function mount(target, anchor) {
@ -39,7 +39,7 @@ function SvelteComponent(options) {
init(this, options);
this._state = assign({}, options.data);
if (!document.getElementById("svelte-3905933315-style")) add_css();
if (!document.getElementById("svelte-1slhpfn-style")) add_css();
this._fragment = create_main_fragment(this, this._state);

@ -1,2 +1,2 @@
div.svelte-724714405,.svelte-724714405 div{color:red}
div.svelte-300476157,.svelte-300476157 div{color:green}
div.svelte-bzh57p,.svelte-bzh57p div{color:red}
div.svelte-4yw8vx,.svelte-4yw8vx div{color:green}

@ -1,8 +1,8 @@
<div class="svelte-724714405">red</div>
<div class="svelte-300476157">green: foo</div>
<div class="svelte-bzh57p">red</div>
<div class="svelte-4yw8vx">green: foo</div>
<div class="svelte-300476157">green: bar</div>
<div class="svelte-4yw8vx">green: bar</div>

@ -1,2 +1,2 @@
div.svelte-724714405,.svelte-724714405 div{color:red}
div.svelte-300476157,.svelte-300476157 div{color:green}
div.svelte-bzh57p,.svelte-bzh57p div{color:red}
div.svelte-4yw8vx,.svelte-4yw8vx div{color:green}

@ -1,8 +1,8 @@
<div class="svelte-724714405">red</div>
<div class="svelte-300476157">green: foo</div>
<div class="svelte-bzh57p">red</div>
<div class="svelte-4yw8vx">green: foo</div>
<div class="svelte-300476157">green: bar</div>
<div class="svelte-4yw8vx">green: bar</div>

@ -1 +1 @@
div.svelte-724714405,.svelte-724714405 div{color:red}
div.svelte-bzh57p,.svelte-bzh57p div{color:red}

@ -1 +1 @@
<div class="svelte-724714405">red</div>
<div class="svelte-bzh57p">red</div>

@ -1 +1 @@
div.svelte-724714405,.svelte-724714405 div{color:red}
div.svelte-bzh57p,.svelte-bzh57p div{color:red}

@ -1 +1 @@
<div class="svelte-724714405">red</div>
<div class="svelte-bzh57p">red</div>

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

@ -8,5 +8,5 @@
"<p class='foo'>red</p>\n\n<style>\n\t.foo {\n\t\tcolor: red;\n\t}\n</style>"
],
"names": [],
"mappings": "AAGC,IAAI,kBAAC,CAAC,AACL,KAAK,CAAE,GAAG,AACX,CAAC"
"mappings": "AAGC,IAAI,cAAC,CAAC,AACL,KAAK,CAAE,GAAG,AACX,CAAC"
}

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

@ -8,5 +8,5 @@
"<p class='foo'>red</p>\n\n<style>\n\t.foo {\n\t\tcolor: red;\n\t}\n</style>"
],
"names": [],
"mappings": "AAGC,8CAAK,CAAC,AACL,KAAK,CAAE,GAAG,AACX,CAAC"
"mappings": "AAGC,sCAAK,CAAC,AACL,KAAK,CAAE,GAAG,AACX,CAAC"
}
Loading…
Cancel
Save