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

use base 36 for style classes
sveltejs · Mar 8, 2018 · 7d4958b · 7d4958b
2 parents 2f01115 + 3f7f237
commit 7d4958b
Show file tree

Hide file tree

Showing 18 changed files with 39 additions and 39 deletions.
diff --git a/src/utils/hash.ts b/src/utils/hash.ts
@@ -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);
 }
diff --git a/test/css/index.js b/test/css/index.js
@@ -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)
 					);

diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
@@ -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);
 

diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js
@@ -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);
 

diff --git a/test/js/samples/css-media-query/expected-bundle.js b/test/js/samples/css-media-query/expected-bundle.js
@@ -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);
 

diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js
@@ -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);
 

diff --git 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-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}
diff --git a/test/server-side-rendering/samples/styles-nested/_actual.html b/test/server-side-rendering/samples/styles-nested/_actual.html
@@ -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>
 
 
diff --git 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-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}
diff --git a/test/server-side-rendering/samples/styles-nested/_expected.html b/test/server-side-rendering/samples/styles-nested/_expected.html
@@ -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>
 
 
diff --git a/test/server-side-rendering/samples/styles/_actual.css b/test/server-side-rendering/samples/styles/_actual.css
@@ -1 +1 @@
-div.svelte-724714405,.svelte-724714405 div{color:red}
+div.svelte-bzh57p,.svelte-bzh57p div{color:red}
diff --git a/test/server-side-rendering/samples/styles/_actual.html b/test/server-side-rendering/samples/styles/_actual.html
@@ -1 +1 @@
-<div class="svelte-724714405">red</div>
+<div class="svelte-bzh57p">red</div>
diff --git a/test/server-side-rendering/samples/styles/_expected.css b/test/server-side-rendering/samples/styles/_expected.css
@@ -1 +1 @@
-div.svelte-724714405,.svelte-724714405 div{color:red}
+div.svelte-bzh57p,.svelte-bzh57p div{color:red}
diff --git a/test/server-side-rendering/samples/styles/_expected.html b/test/server-side-rendering/samples/styles/_expected.html
@@ -1 +1 @@
-<div class="svelte-724714405">red</div>
+<div class="svelte-bzh57p">red</div>
diff --git a/test/sourcemaps/samples/css-cascade-false/output.css b/test/sourcemaps/samples/css-cascade-false/output.css
diff --git a/test/sourcemaps/samples/css-cascade-false/output.css.map b/test/sourcemaps/samples/css-cascade-false/output.css.map
diff --git a/test/sourcemaps/samples/css/output.css b/test/sourcemaps/samples/css/output.css
diff --git a/test/sourcemaps/samples/css/output.css.map b/test/sourcemaps/samples/css/output.css.map