use base36 for style classes

pull/1192/head
Rich Harris 7 years ago
parent cbd1a11548
commit 1ad28e6fe6

@ -266,7 +266,7 @@ export default class Stylesheet {
children: (Rule|Atrule)[]; children: (Rule|Atrule)[];
keyframes: Map<string, string>; keyframes: Map<string, string>;
constructor(source: string, parsed: Parsed, filename: string, cascade: boolean, dev: boolean) { constructor(source: string, parsed: Parsed, name: string, filename: string, cascade: boolean, dev: boolean) {
this.source = source; this.source = source;
this.parsed = parsed; this.parsed = parsed;
this.cascade = cascade; this.cascade = cascade;
@ -277,7 +277,7 @@ export default class Stylesheet {
this.keyframes = new Map(); this.keyframes = new Map();
if (parsed.css && parsed.css.children.length) { if (parsed.css && parsed.css.children.length) {
this.id = `svelte-${hash(parsed.css.content.styles)}`; this.id = `${name ? name.toLowerCase() : 'svelte'}-${hash(parsed.css.content.styles)}`;
this.hasStyles = true; this.hasStyles = true;

@ -116,7 +116,7 @@ export function compile(source: string, _options: CompileOptions) {
return; return;
} }
const stylesheet = new Stylesheet(source, parsed, options.filename, options.cascade !== false, options.dev); const stylesheet = new Stylesheet(source, parsed, options.name, options.filename, options.cascade !== false, options.dev);
validate(parsed, source, stylesheet, options); validate(parsed, source, stylesheet, options);

@ -1,8 +1,8 @@
// https://github.com/darkskyapp/string-hash/blob/master/index.js // 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 hash = 5381;
let i = str.length; let i = str.length;
while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i); 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`) 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(/sveltecomponent-[a-z0-9]+/g, 'sveltecomponent-xyz'), expected.css);
// verify that the right elements have scoping selectors // verify that the right elements have scoping selectors
if (expected.html !== null) { if (expected.html !== null) {
@ -114,7 +114,7 @@ describe('css', () => {
fs.writeFileSync(`test/css/samples/${dir}/_actual.html`, html); fs.writeFileSync(`test/css/samples/${dir}/_actual.html`, html);
assert.equal( assert.equal(
normalizeHtml(window, html.replace(/svelte-\d+/g, 'svelte-xyz')), normalizeHtml(window, html.replace(/sveltecomponent-[a-z0-9]+/g, 'sveltecomponent-xyz')),
normalizeHtml(window, expected.html) normalizeHtml(window, expected.html)
); );
@ -133,7 +133,7 @@ describe('css', () => {
assert.equal( assert.equal(
normalizeHtml( normalizeHtml(
window, window,
component.render(config.data).html.replace(/svelte-\d+/g, 'svelte-xyz') component.render(config.data).html.replace(/sveltecomponent-[a-z0-9]+/g, 'sveltecomponent-xyz')
), ),
normalizeHtml(window, expected.html) normalizeHtml(window, expected.html)
); );

@ -1 +1 @@
[foo].svelte-xyz{color:red}[baz].svelte-xyz{color:blue} [foo].sveltecomponent-xyz{color:red}[baz].sveltecomponent-xyz{color:blue}

@ -1 +1 @@
[foo=bar].svelte-xyz{color:red} [foo=bar].sveltecomponent-xyz{color:red}

@ -1 +1 @@
div.svelte-xyz,.svelte-xyz div{color:red} div.sveltecomponent-xyz,.sveltecomponent-xyz div{color:red}

@ -1 +1 @@
.foo.svelte-xyz{} .foo.sveltecomponent-xyz{}

@ -1 +1 @@
@keyframes why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s} @keyframes why{0%{color:red}100%{color:blue}}.animated.sveltecomponent-xyz{animation:why 2s}.also-animated.sveltecomponent-xyz{animation:not-defined-here 2s}

@ -1 +1 @@
@keyframes svelte-xyz-why{from{color:red}to{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s} @keyframes sveltecomponent-xyz-why{from{color:red}to{color:blue}}.animated.sveltecomponent-xyz{animation:sveltecomponent-xyz-why 2s}

@ -1 +1 @@
@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s} @keyframes sveltecomponent-xyz-why{0%{color:red}100%{color:blue}}.animated.sveltecomponent-xyz{animation:sveltecomponent-xyz-why 2s}.also-animated.sveltecomponent-xyz{animation:not-defined-here 2s}

@ -1 +1 @@
span.svelte-xyz::after{content:'i am a pseudo-element'}span.svelte-xyz:first-child{color:red}span.svelte-xyz:last-child::after{color:blue} span.sveltecomponent-xyz::after{content:'i am a pseudo-element'}span.sveltecomponent-xyz:first-child{color:red}span.sveltecomponent-xyz:last-child::after{color:blue}

@ -1 +1 @@
.svelte-xyz{color:red} .sveltecomponent-xyz{color:red}

@ -1 +1 @@
<div class="svelte-xyz"></div> <div class="sveltecomponent-xyz"></div>

@ -1 +1 @@
div.svelte-xyz{color:red}div.foo.svelte-xyz{color:blue}.foo.svelte-xyz{font-weight:bold} div.sveltecomponent-xyz{color:red}div.foo.sveltecomponent-xyz{color:blue}.foo.sveltecomponent-xyz{font-weight:bold}

@ -1 +1 @@
.test.svelte-xyz>div.svelte-xyz{color:#0af} .test.sveltecomponent-xyz>div.sveltecomponent-xyz{color:#0af}

@ -1 +1 @@
<div class="test svelte-xyz"><div class="svelte-xyz">Testing...</div></div> <div class="test sveltecomponent-xyz"><div class="sveltecomponent-xyz">Testing...</div></div>

@ -1 +1 @@
div.svelte-xyz,.svelte-xyz div{--test:10} div.sveltecomponent-xyz,.sveltecomponent-xyz div{--test:10}

@ -1 +1 @@
p.svelte-xyz span.svelte-xyz{color:red} p.sveltecomponent-xyz span.sveltecomponent-xyz{color:red}

@ -1 +1 @@
<div><p class="svelte-xyz"><span class="svelte-xyz">styled</span></p></div> <div><p class="sveltecomponent-xyz"><span class="sveltecomponent-xyz">styled</span></p></div>

@ -1 +1 @@
@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.svelte-xyz.animated,.svelte-xyz .animated{animation:svelte-xyz-why 2s} @keyframes sveltecomponent-xyz-why{0%{color:red}100%{color:blue}}.sveltecomponent-xyz.animated,.sveltecomponent-xyz .animated{animation:sveltecomponent-xyz-why 2s}

@ -1 +1 @@
@media only screen and (min-width: 400px){div.svelte-xyz,.svelte-xyz div{color:red}} @media only screen and (min-width: 400px){div.sveltecomponent-xyz,.sveltecomponent-xyz div{color:red}}

@ -1 +1 @@
@media(min-width: 400px){.svelte-xyz.large-screen,.svelte-xyz .large-screen{display:block}} @media(min-width: 400px){.sveltecomponent-xyz.large-screen,.sveltecomponent-xyz .large-screen{display:block}}

@ -1 +1 @@
[data-foo*='bar'].svelte-xyz{color:red} [data-foo*='bar'].sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<div><p class="svelte-xyz" data-foo="foobarbaz">this is styled</p> <div><p class="sveltecomponent-xyz" data-foo="foobarbaz">this is styled</p>
<p data-foo="fooBARbaz">this is unstyled</p></div> <p data-foo="fooBARbaz">this is unstyled</p></div>

@ -1 +1 @@
[data-foo='bar' i].svelte-xyz{color:red} [data-foo='bar' i].sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<div><p class="svelte-xyz" data-foo="BAR">this is styled</p> <div><p class="sveltecomponent-xyz" data-foo="BAR">this is styled</p>
<p data-foo="BAZ">this is unstyled</p></div> <p data-foo="BAZ">this is unstyled</p></div>

@ -1 +1 @@
[data-foo='bar'].svelte-xyz{color:red} [data-foo='bar'].sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<div><p class="svelte-xyz" data-foo="whatever">this is styled</p> <div><p class="sveltecomponent-xyz" data-foo="whatever">this is styled</p>
<p data-foo="baz">this is unstyled</p></div> <p data-foo="baz">this is unstyled</p></div>

@ -1 +1 @@
[data-foo='bar'].svelte-xyz{color:red} [data-foo='bar'].sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<div><p class="svelte-xyz" data-foo="bar">this is styled</p> <div><p class="sveltecomponent-xyz" data-foo="bar">this is styled</p>
<p data-foo="baz">this is unstyled</p></div> <p data-foo="baz">this is unstyled</p></div>

@ -1 +1 @@
[data-foo|='bar'].svelte-xyz{color:red} [data-foo|='bar'].sveltecomponent-xyz{color:red}

@ -1,3 +1,3 @@
<div><p class="svelte-xyz" data-foo="bar">this is styled</p> <div><p class="sveltecomponent-xyz" data-foo="bar">this is styled</p>
<p class="svelte-xyz" data-foo="bar-baz">this is styled</p> <p class="sveltecomponent-xyz" data-foo="bar-baz">this is styled</p>
<p data-foo="baz-bar">this is unstyled</p></div> <p data-foo="baz-bar">this is unstyled</p></div>

@ -1 +1 @@
[data-foo^='bar'].svelte-xyz{color:red} [data-foo^='bar'].sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<div><p class="svelte-xyz" data-foo="barbaz">this is styled</p> <div><p class="sveltecomponent-xyz" data-foo="barbaz">this is styled</p>
<p data-foo="bazbar">this is unstyled</p></div> <p data-foo="bazbar">this is unstyled</p></div>

@ -1 +1 @@
[data-foo$='bar'].svelte-xyz{color:red} [data-foo$='bar'].sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<div><p data-foo="barbaz">this is unstyled</p> <div><p data-foo="barbaz">this is unstyled</p>
<p class="svelte-xyz" data-foo="bazbar">this is styled</p></div> <p class="sveltecomponent-xyz" data-foo="bazbar">this is styled</p></div>

@ -1 +1 @@
[data-foo~='bar'].svelte-xyz{color:red} [data-foo~='bar'].sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<div><p class="svelte-xyz" data-foo="qux bar">this is styled</p> <div><p class="sveltecomponent-xyz" data-foo="qux bar">this is styled</p>
<p data-foo="qux baz">this is unstyled</p></div> <p data-foo="qux baz">this is unstyled</p></div>

@ -1 +1 @@
[autoplay].svelte-xyz{color:red} [autoplay].sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<div><video class="svelte-xyz" autoplay></video> <div><video class="sveltecomponent-xyz" autoplay></video>
<video></video></div> <video></video></div>

@ -1 +1 @@
.foo.svelte-xyz{color:red} .foo.sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<p class="whatever svelte-xyz">this is styled</p> <p class="whatever sveltecomponent-xyz">this is styled</p>
<p class="bar">this is unstyled</p> <p class="bar">this is unstyled</p>

@ -1 +1 @@
.foo.svelte-xyz{color:red} .foo.sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<p class="foo svelte-xyz">this is styled</p> <p class="foo sveltecomponent-xyz">this is styled</p>
<p class="bar">this is unstyled</p> <p class="bar">this is unstyled</p>

@ -1 +1 @@
.foo.svelte-xyz .bar{color:red} .foo.sveltecomponent-xyz .bar{color:red}

@ -1 +1 @@
<div class="foo svelte-xyz"></div> <div class="foo sveltecomponent-xyz"></div>

@ -1 +1 @@
div.svelte-xyz>p>em{color:red} div.sveltecomponent-xyz>p>em{color:red}

@ -1 +1 @@
<div class="svelte-xyz"></div> <div class="sveltecomponent-xyz"></div>

@ -1 +1 @@
div.svelte-xyz>p{color:red} div.sveltecomponent-xyz>p{color:red}

@ -1 +1 @@
<div class="svelte-xyz"></div> <div class="sveltecomponent-xyz"></div>

@ -1 +1 @@
div>section>p.svelte-xyz{color:red} div>section>p.sveltecomponent-xyz{color:red}

@ -1 +1 @@
<p class="svelte-xyz">this may or may not be styled</p> <p class="sveltecomponent-xyz">this may or may not be styled</p>

@ -1 +1 @@
div>p.svelte-xyz{color:red} div>p.sveltecomponent-xyz{color:red}

@ -1 +1 @@
<p class="svelte-xyz">this may or may not be styled</p> <p class="sveltecomponent-xyz">this may or may not be styled</p>

@ -1 +1 @@
#foo.svelte-xyz{color:red} #foo.sveltecomponent-xyz{color:red}

@ -1,2 +1,2 @@
<div class="svelte-xyz" id="foo"></div> <div class="sveltecomponent-xyz" id="foo"></div>
<div id="bar"></div> <div id="bar"></div>

@ -1 +1 @@
div.svelte-xyz section p.svelte-xyz{color:red} div.sveltecomponent-xyz section p.sveltecomponent-xyz{color:red}

@ -1 +1 @@
<div class="svelte-xyz"><section><p class="svelte-xyz">this is styled</p></section></div> <div class="sveltecomponent-xyz"><section><p class="sveltecomponent-xyz">this is styled</p></section></div>

@ -1 +1 @@
div.svelte-xyz p.svelte-xyz{color:red} div.sveltecomponent-xyz p.sveltecomponent-xyz{color:red}

@ -1 +1 @@
<div class="svelte-xyz"><section><p class="svelte-xyz">this is styled</p></section></div> <div class="sveltecomponent-xyz"><section><p class="sveltecomponent-xyz">this is styled</p></section></div>

@ -1 +1 @@
p.svelte-xyz{color:red} p.sveltecomponent-xyz{color:red}

@ -1 +1 @@
<div><p class="svelte-xyz">this is styled</p></div> <div><p class="sveltecomponent-xyz">this is styled</p></div>

@ -1 +1 @@
[svelte-ref-button].active.svelte-xyz{color:red} [svelte-ref-button].active.sveltecomponent-xyz{color:red}

@ -1 +1 @@
<button svelte-ref-button="" class="active svelte-xyz">deactivate</button> <button svelte-ref-button="" class="active sveltecomponent-xyz">deactivate</button>

@ -1 +1 @@
[svelte-ref-a].svelte-xyz{color:red}[svelte-ref-b].svelte-xyz{color:green} [svelte-ref-a].sveltecomponent-xyz{color:red}[svelte-ref-b].sveltecomponent-xyz{color:green}

@ -1,3 +1,3 @@
<div class="svelte-xyz" svelte-ref-a=''></div> <div class="sveltecomponent-xyz" svelte-ref-a=''></div>
<div class="svelte-xyz" svelte-ref-b=''></div> <div class="sveltecomponent-xyz" svelte-ref-b=''></div>
<div></div> <div></div>

@ -1 +1 @@
.svelte-xyz,.svelte-xyz *{color:red} .sveltecomponent-xyz,.sveltecomponent-xyz *{color:red}

@ -1 +1 @@
div.svelte-xyz,.svelte-xyz div{@apply --funky-div;} div.sveltecomponent-xyz,.sveltecomponent-xyz div{@apply --funky-div;}

@ -1 +1 @@
.bar.svelte-xyz{color:red} .bar.sveltecomponent-xyz{color:red}

@ -1 +1 @@
<div class="bar svelte-xyz"></div> <div class="bar sveltecomponent-xyz"></div>

@ -1 +1 @@
.active.svelte-xyz{color:red}.inactive.svelte-xyz{color:blue} .active.sveltecomponent-xyz{color:red}.inactive.sveltecomponent-xyz{color:blue}

@ -1 +1 @@
<div class="active svelte-xyz"></div> <div class="active sveltecomponent-xyz"></div>

@ -1 +1 @@
.foo.svelte-xyz{color:red} .foo.sveltecomponent-xyz{color:red}

@ -1 +1 @@
<div class="foo svelte-xyz"></div> <div class="foo sveltecomponent-xyz"></div>

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

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

@ -188,8 +188,8 @@ var proto = {
/* generated by Svelte vX.Y.Z */ /* generated by Svelte vX.Y.Z */
function add_css() { function add_css() {
var style = createElement("style"); var style = createElement("style");
style.id = 'svelte-3905933315-style'; style.id = 'svelte-1slhpfn-style';
style.textContent = "@media(min-width: 1px){div.svelte-3905933315,.svelte-3905933315 div{color:red}}"; style.textContent = "@media(min-width: 1px){div.svelte-1slhpfn,.svelte-1slhpfn div{color:red}}";
appendNode(style, document.head); appendNode(style, document.head);
} }
@ -203,7 +203,7 @@ function create_main_fragment(component, state) {
}, },
h: function hydrate() { h: function hydrate() {
div.className = "svelte-3905933315"; div.className = "svelte-1slhpfn";
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
@ -224,7 +224,7 @@ function SvelteComponent(options) {
init(this, options); init(this, options);
this._state = assign({}, options.data); 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); this._fragment = create_main_fragment(this, this._state);

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

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

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

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

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

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

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

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

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

@ -1,2 +1,2 @@
.foo.svelte-1719932608{color:red} .foo.svelte-sg04hs{color:red}
/*# sourceMappingURL=output.css.map */ /*# 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>" "<p class='foo'>red</p>\n\n<style>\n\t.foo {\n\t\tcolor: red;\n\t}\n</style>"
], ],
"names": [], "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 */ /*# 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>" "<p class='foo'>red</p>\n\n<style>\n\t.foo {\n\t\tcolor: red;\n\t}\n</style>"
], ],
"names": [], "names": [],
"mappings": "AAGC,8CAAK,CAAC,AACL,KAAK,CAAE,GAAG,AACX,CAAC" "mappings": "AAGC,sCAAK,CAAC,AACL,KAAK,CAAE,GAAG,AACX,CAAC"
} }
Loading…
Cancel
Save