Skip to content

Commit 68d27f1

Browse files
Ocean-OSRich-Harris
Ocean-OS
and
Rich-Harris
authored
chore: generate CSS hash using the filename (#16740)
* chore: generate CSS hash using the filename * fix all tests but one * slightly kludgy fix * try this * fix --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>
1 parent f343b00 commit 68d27f1

File tree

26 files changed

+91
-77
lines changed

26 files changed

+91
-77
lines changed

‎.changeset/fast-boxes-sort.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
chore: generate CSS hash using the filename

‎packages/svelte/src/compiler/phases/2-analyze/index.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -456,10 +456,19 @@ export function analyze_component(root, source, options) {
456456

457457
const is_custom_element = !!options.customElementOptions || options.customElement;
458458

459+
const name = module.scope.generate(options.name ?? component_name);
460+
461+
state.adjust({
462+
component_name: name,
463+
dev: options.dev,
464+
rootDir: options.rootDir,
465+
runes
466+
});
467+
459468
// TODO remove all the ?? stuff, we don't need it now that we're validating the config
460469
/** @type {ComponentAnalysis} */
461470
const analysis = {
462-
name: module.scope.generate(options.name ?? component_name),
471+
name,
463472
root: scope_root,
464473
module,
465474
instance,
@@ -520,7 +529,7 @@ export function analyze_component(root, source, options) {
520529
hash: root.css
521530
? options.cssHash({
522531
css: root.css.content.styles,
523-
filename: options.filename,
532+
filename: state.filename,
524533
name: component_name,
525534
hash
526535
})
@@ -534,13 +543,6 @@ export function analyze_component(root, source, options) {
534543
async_deriveds: new Set()
535544
};
536545

537-
state.adjust({
538-
component_name: analysis.name,
539-
dev: options.dev,
540-
rootDir: options.rootDir,
541-
runes
542-
});
543-
544546
if (!runes) {
545547
// every exported `let` or `var` declaration becomes a prop, everything else becomes an export
546548
for (const node of instance.ast.body) {

‎packages/svelte/src/compiler/types/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export interface CompileOptions extends ModuleCompileOptions {
105105
css?: 'injected' | 'external';
106106
/**
107107
* A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS.
108-
* It defaults to returning `svelte-${hash(css)}`.
108+
* It defaults to returning `svelte-${hash(filename ?? css)}`.
109109
*
110110
* @default undefined
111111
*/

‎packages/svelte/src/compiler/validate-options.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ const component_options = {
7070
return input;
7171
}),
7272

73-
cssHash: fun(({ css, hash }) => {
74-
return `svelte-${hash(css)}`;
73+
cssHash: fun(({ css, filename, hash }) => {
74+
return `svelte-${hash(filename === '(unknown)' ? css : filename ?? css)}`;
7575
}),
7676

7777
// TODO this is a sourcemap option, would be good to put under a sourcemap namespace

‎packages/svelte/tests/html_equal.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,13 @@ function clean_children(node, opts) {
3232
return;
3333
}
3434

35-
node.setAttribute(attr.name, attr.value);
35+
let value = attr.value;
36+
37+
if (attr.name === 'class') {
38+
value = value.replace(/svelte-\w+/, 'svelte-xyz123');
39+
}
40+
41+
node.setAttribute(attr.name, value);
3642
});
3743

3844
for (let child of [...node.childNodes]) {

‎packages/svelte/tests/runtime-browser/assert.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ function normalize_html(window, html) {
7474
node.innerHTML = html
7575
.replace(/<!--.*?-->/g, '')
7676
.replace(/>[\s\r\n]+</g, '><')
77+
.replace(/svelte-\w+/g, 'svelte-xyz123')
7778
.trim();
7879

7980
normalize_children(node);

‎packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
import { ok, test } from '../../test';
22

33
export default test({
4-
html: '<div class="svelte-x1o6ra"></div>',
4+
html: '<div class="svelte-70s021"></div>',
55

66
test({ assert, component, target }) {
77
const div = target.querySelector('div');
88
ok(div);
99

1010
component.testName = null;
11-
assert.equal(div.className, 'svelte-x1o6ra');
11+
assert.equal(div.className, 'svelte-70s021');
1212

1313
component.testName = undefined;
14-
assert.equal(div.className, 'svelte-x1o6ra');
14+
assert.equal(div.className, 'svelte-70s021');
1515

1616
component.testName = undefined + '';
17-
assert.equal(div.className, 'undefined svelte-x1o6ra');
17+
assert.equal(div.className, 'undefined svelte-70s021');
1818

1919
component.testName = null + '';
20-
assert.equal(div.className, 'null svelte-x1o6ra');
20+
assert.equal(div.className, 'null svelte-70s021');
2121

2222
component.testName = 1;
23-
assert.equal(div.className, '1 svelte-x1o6ra');
23+
assert.equal(div.className, '1 svelte-70s021');
2424

2525
component.testName = 0;
26-
assert.equal(div.className, '0 svelte-x1o6ra');
26+
assert.equal(div.className, '0 svelte-70s021');
2727

2828
component.testName = false;
29-
assert.equal(div.className, 'false svelte-x1o6ra');
29+
assert.equal(div.className, 'false svelte-70s021');
3030

3131
component.testName = true;
32-
assert.equal(div.className, 'true svelte-x1o6ra');
32+
assert.equal(div.className, 'true svelte-70s021');
3333

3434
component.testName = {};
35-
assert.equal(div.className, 'svelte-x1o6ra');
35+
assert.equal(div.className, 'svelte-70s021');
3636

3737
component.testName = '';
38-
assert.equal(div.className, 'svelte-x1o6ra');
38+
assert.equal(div.className, 'svelte-70s021');
3939

4040
component.testName = 'testClassName';
41-
assert.equal(div.className, 'testClassName svelte-x1o6ra');
41+
assert.equal(div.className, 'testClassName svelte-70s021');
4242
}
4343
});

‎packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,43 +10,43 @@ export default test({
1010
};
1111
},
1212

13-
html: '<div class="test1test2 svelte-x1o6ra"></div>',
13+
html: '<div class="test1test2 svelte-70s021"></div>',
1414

1515
test({ assert, component, target }) {
1616
const div = target.querySelector('div');
1717
ok(div);
18-
assert.equal(div.className, 'test1test2 svelte-x1o6ra');
18+
assert.equal(div.className, 'test1test2 svelte-70s021');
1919

2020
component.testName1 = null;
2121
component.testName2 = null;
22-
assert.equal(div.className, '0 svelte-x1o6ra');
22+
assert.equal(div.className, '0 svelte-70s021');
2323

2424
component.testName1 = null;
2525
component.testName2 = 'test';
26-
assert.equal(div.className, 'nulltest svelte-x1o6ra');
26+
assert.equal(div.className, 'nulltest svelte-70s021');
2727

2828
component.testName1 = undefined;
2929
component.testName2 = 'test';
30-
assert.equal(div.className, 'undefinedtest svelte-x1o6ra');
30+
assert.equal(div.className, 'undefinedtest svelte-70s021');
3131

3232
component.testName1 = undefined;
3333
component.testName2 = undefined;
34-
assert.equal(div.className, 'NaN svelte-x1o6ra');
34+
assert.equal(div.className, 'NaN svelte-70s021');
3535

3636
component.testName1 = null;
3737
component.testName2 = 1;
38-
assert.equal(div.className, '1 svelte-x1o6ra');
38+
assert.equal(div.className, '1 svelte-70s021');
3939

4040
component.testName1 = undefined;
4141
component.testName2 = 1;
42-
assert.equal(div.className, 'NaN svelte-x1o6ra');
42+
assert.equal(div.className, 'NaN svelte-70s021');
4343

4444
component.testName1 = null;
4545
component.testName2 = 0;
46-
assert.equal(div.className, '0 svelte-x1o6ra');
46+
assert.equal(div.className, '0 svelte-70s021');
4747

4848
component.testName1 = undefined;
4949
component.testName2 = 0;
50-
assert.equal(div.className, 'NaN svelte-x1o6ra');
50+
assert.equal(div.className, 'NaN svelte-70s021');
5151
}
5252
});

‎packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,41 +8,41 @@ export default test({
88
};
99
},
1010

11-
html: '<div class="testClassName svelte-x1o6ra"></div>',
11+
html: '<div class="testClassName svelte-70s021"></div>',
1212

1313
test({ assert, component, target }) {
1414
const div = target.querySelector('div');
1515
ok(div);
16-
assert.equal(div.className, 'testClassName svelte-x1o6ra');
16+
assert.equal(div.className, 'testClassName svelte-70s021');
1717

1818
component.testName = null;
19-
assert.equal(div.className, 'svelte-x1o6ra');
19+
assert.equal(div.className, 'svelte-70s021');
2020

2121
component.testName = undefined;
22-
assert.equal(div.className, 'svelte-x1o6ra');
22+
assert.equal(div.className, 'svelte-70s021');
2323

2424
component.testName = undefined + '';
25-
assert.equal(div.className, 'undefined svelte-x1o6ra');
25+
assert.equal(div.className, 'undefined svelte-70s021');
2626

2727
component.testName = null + '';
28-
assert.equal(div.className, 'null svelte-x1o6ra');
28+
assert.equal(div.className, 'null svelte-70s021');
2929

3030
component.testName = 1;
31-
assert.equal(div.className, '1 svelte-x1o6ra');
31+
assert.equal(div.className, '1 svelte-70s021');
3232

3333
component.testName = 0;
34-
assert.equal(div.className, '0 svelte-x1o6ra');
34+
assert.equal(div.className, '0 svelte-70s021');
3535

3636
component.testName = false;
37-
assert.equal(div.className, 'false svelte-x1o6ra');
37+
assert.equal(div.className, 'false svelte-70s021');
3838

3939
component.testName = true;
40-
assert.equal(div.className, 'true svelte-x1o6ra');
40+
assert.equal(div.className, 'true svelte-70s021');
4141

4242
component.testName = {};
43-
assert.equal(div.className, 'svelte-x1o6ra');
43+
assert.equal(div.className, 'svelte-70s021');
4444

4545
component.testName = '';
46-
assert.equal(div.className, 'svelte-x1o6ra');
46+
assert.equal(div.className, 'svelte-70s021');
4747
}
4848
});

‎packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,43 +10,43 @@ export default test({
1010
};
1111
},
1212

13-
html: '<div class="test1test2 svelte-x1o6ra"></div>',
13+
html: '<div class="test1test2 svelte-70s021"></div>',
1414

1515
async test({ assert, component, target }) {
1616
const div = target.querySelector('div');
1717
ok(div);
18-
assert.equal(div.className, 'test1test2 svelte-x1o6ra');
18+
assert.equal(div.className, 'test1test2 svelte-70s021');
1919

2020
component.testName1 = null;
2121
component.testName2 = null;
22-
assert.equal(div.className, '0 svelte-x1o6ra');
22+
assert.equal(div.className, '0 svelte-70s021');
2323

2424
component.testName1 = null;
2525
component.testName2 = 'test';
26-
assert.equal(div.className, 'nulltest svelte-x1o6ra');
26+
assert.equal(div.className, 'nulltest svelte-70s021');
2727

2828
component.testName1 = undefined;
2929
component.testName2 = 'test';
30-
assert.equal(div.className, 'undefinedtest svelte-x1o6ra');
30+
assert.equal(div.className, 'undefinedtest svelte-70s021');
3131

3232
component.testName1 = undefined;
3333
component.testName2 = undefined;
34-
assert.equal(div.className, 'NaN svelte-x1o6ra');
34+
assert.equal(div.className, 'NaN svelte-70s021');
3535

3636
component.testName1 = null;
3737
component.testName2 = 1;
38-
assert.equal(div.className, '1 svelte-x1o6ra');
38+
assert.equal(div.className, '1 svelte-70s021');
3939

4040
component.testName1 = undefined;
4141
component.testName2 = 1;
42-
assert.equal(div.className, 'NaN svelte-x1o6ra');
42+
assert.equal(div.className, 'NaN svelte-70s021');
4343

4444
component.testName1 = null;
4545
component.testName2 = 0;
46-
assert.equal(div.className, '0 svelte-x1o6ra');
46+
assert.equal(div.className, '0 svelte-70s021');
4747

4848
component.testName1 = undefined;
4949
component.testName2 = 0;
50-
assert.equal(div.className, 'NaN svelte-x1o6ra');
50+
assert.equal(div.className, 'NaN svelte-70s021');
5151
}
5252
});

0 commit comments

Comments
 (0)