From 3960dda74adf9b0b9767d7acbd915a664b8bd3b4 Mon Sep 17 00:00:00 2001 From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com> Date: Tue, 9 Sep 2025 22:39:28 -0700 Subject: [PATCH 1/5] chore: generate CSS hash using the filename --- .changeset/fast-boxes-sort.md | 5 +++++ packages/svelte/src/compiler/types/index.d.ts | 2 +- packages/svelte/src/compiler/validate-options.js | 4 ++-- packages/svelte/types/index.d.ts | 4 ++-- 4 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 .changeset/fast-boxes-sort.md diff --git a/.changeset/fast-boxes-sort.md b/.changeset/fast-boxes-sort.md new file mode 100644 index 000000000000..1edabf058248 --- /dev/null +++ b/.changeset/fast-boxes-sort.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: generate CSS hash using the filename diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts index 6211e69bd3e1..e13c9a9e224e 100644 --- a/packages/svelte/src/compiler/types/index.d.ts +++ b/packages/svelte/src/compiler/types/index.d.ts @@ -105,7 +105,7 @@ export interface CompileOptions extends ModuleCompileOptions { css?: 'injected' | 'external'; /** * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS. - * It defaults to returning `svelte-${hash(css)}`. + * It defaults to returning `svelte-${hash(filename ?? css)}`. * * @default undefined */ diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js index 2b727ad09335..2aceb8bb69a4 100644 --- a/packages/svelte/src/compiler/validate-options.js +++ b/packages/svelte/src/compiler/validate-options.js @@ -70,8 +70,8 @@ const component_options = { return input; }), - cssHash: fun(({ css, hash }) => { - return `svelte-${hash(css)}`; + cssHash: fun(({ css, filename, hash }) => { + return `svelte-${hash(filename ?? css)}`; }), // TODO this is a sourcemap option, would be good to put under a sourcemap namespace diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 97e6f0f5a33b..9888de59b2c2 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -998,7 +998,7 @@ declare module 'svelte/compiler' { css?: 'injected' | 'external'; /** * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS. - * It defaults to returning `svelte-${hash(css)}`. + * It defaults to returning `svelte-${hash(filename ?? css)}`. * * @default undefined */ @@ -2933,7 +2933,7 @@ declare module 'svelte/types/compiler/interfaces' { css?: 'injected' | 'external'; /** * A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS. - * It defaults to returning `svelte-${hash(css)}`. + * It defaults to returning `svelte-${hash(filename ?? css)}`. * * @default undefined */ From a2dc8c990be1b16136c8bdc4c5a3bdcb124f948b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 10 Sep 2025 12:59:31 -0400 Subject: [PATCH 2/5] fix all tests but one --- packages/svelte/tests/html_equal.js | 8 ++++++- .../svelte/tests/runtime-browser/assert.js | 1 + .../_config.js | 24 +++++++++---------- .../_config.js | 20 ++++++++-------- .../_config.js | 24 +++++++++---------- .../_config.js | 20 ++++++++-------- .../custom-element-svelte-class/_config.js | 4 ++-- .../_config.js | 6 ++--- .../_expected.html | 2 +- .../_expected_head.html | 2 +- .../css-injected-options-nested/_expected.css | 2 +- .../_expected.html | 2 +- .../_expected_head.html | 2 +- .../css-injected-options/_expected.css | 2 +- .../css-injected-options/_expected.html | 2 +- .../css-injected-options/_expected_head.html | 2 +- .../samples/css/_expected.css | 2 +- .../samples/css/_expected.html | 2 +- .../samples/css/_expected_head.html | 2 +- .../samples/attached-sourcemap/_config.js | 2 +- .../tests/sourcemaps/samples/css/_config.js | 2 +- 21 files changed, 70 insertions(+), 63 deletions(-) diff --git a/packages/svelte/tests/html_equal.js b/packages/svelte/tests/html_equal.js index b637e4d53874..76a4a957a571 100644 --- a/packages/svelte/tests/html_equal.js +++ b/packages/svelte/tests/html_equal.js @@ -32,7 +32,13 @@ function clean_children(node, opts) { return; } - node.setAttribute(attr.name, attr.value); + let value = attr.value; + + if (attr.name === 'class') { + value = value.replace(/svelte-\w+/, 'svelte-xyz123'); + } + + node.setAttribute(attr.name, value); }); for (let child of [...node.childNodes]) { diff --git a/packages/svelte/tests/runtime-browser/assert.js b/packages/svelte/tests/runtime-browser/assert.js index 9a294a48c7f0..e331c8b677ba 100644 --- a/packages/svelte/tests/runtime-browser/assert.js +++ b/packages/svelte/tests/runtime-browser/assert.js @@ -74,6 +74,7 @@ function normalize_html(window, html) { node.innerHTML = html .replace(//g, '') .replace(/>[\s\r\n]+<') + .replace(/svelte-\w+/g, 'svelte-xyz123') .trim(); normalize_children(node); diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js index cbd0456e1335..ab6ac2a18611 100644 --- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js @@ -1,43 +1,43 @@ import { ok, test } from '../../test'; export default test({ - html: '
', + html: '
', test({ assert, component, target }) { const div = target.querySelector('div'); ok(div); component.testName = null; - assert.equal(div.className, 'svelte-x1o6ra'); + assert.equal(div.className, 'svelte-1bl4vl5'); component.testName = undefined; - assert.equal(div.className, 'svelte-x1o6ra'); + assert.equal(div.className, 'svelte-1bl4vl5'); component.testName = undefined + ''; - assert.equal(div.className, 'undefined svelte-x1o6ra'); + assert.equal(div.className, 'undefined svelte-1bl4vl5'); component.testName = null + ''; - assert.equal(div.className, 'null svelte-x1o6ra'); + assert.equal(div.className, 'null svelte-1bl4vl5'); component.testName = 1; - assert.equal(div.className, '1 svelte-x1o6ra'); + assert.equal(div.className, '1 svelte-1bl4vl5'); component.testName = 0; - assert.equal(div.className, '0 svelte-x1o6ra'); + assert.equal(div.className, '0 svelte-1bl4vl5'); component.testName = false; - assert.equal(div.className, 'false svelte-x1o6ra'); + assert.equal(div.className, 'false svelte-1bl4vl5'); component.testName = true; - assert.equal(div.className, 'true svelte-x1o6ra'); + assert.equal(div.className, 'true svelte-1bl4vl5'); component.testName = {}; - assert.equal(div.className, 'svelte-x1o6ra'); + assert.equal(div.className, 'svelte-1bl4vl5'); component.testName = ''; - assert.equal(div.className, 'svelte-x1o6ra'); + assert.equal(div.className, 'svelte-1bl4vl5'); component.testName = 'testClassName'; - assert.equal(div.className, 'testClassName svelte-x1o6ra'); + assert.equal(div.className, 'testClassName svelte-1bl4vl5'); } }); diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js index d2511a440349..9ccca80e7cf7 100644 --- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js @@ -10,43 +10,43 @@ export default test({ }; }, - html: '
', + html: '
', test({ assert, component, target }) { const div = target.querySelector('div'); ok(div); - assert.equal(div.className, 'test1test2 svelte-x1o6ra'); + assert.equal(div.className, 'test1test2 svelte-phrtam'); component.testName1 = null; component.testName2 = null; - assert.equal(div.className, '0 svelte-x1o6ra'); + assert.equal(div.className, '0 svelte-phrtam'); component.testName1 = null; component.testName2 = 'test'; - assert.equal(div.className, 'nulltest svelte-x1o6ra'); + assert.equal(div.className, 'nulltest svelte-phrtam'); component.testName1 = undefined; component.testName2 = 'test'; - assert.equal(div.className, 'undefinedtest svelte-x1o6ra'); + assert.equal(div.className, 'undefinedtest svelte-phrtam'); component.testName1 = undefined; component.testName2 = undefined; - assert.equal(div.className, 'NaN svelte-x1o6ra'); + assert.equal(div.className, 'NaN svelte-phrtam'); component.testName1 = null; component.testName2 = 1; - assert.equal(div.className, '1 svelte-x1o6ra'); + assert.equal(div.className, '1 svelte-phrtam'); component.testName1 = undefined; component.testName2 = 1; - assert.equal(div.className, 'NaN svelte-x1o6ra'); + assert.equal(div.className, 'NaN svelte-phrtam'); component.testName1 = null; component.testName2 = 0; - assert.equal(div.className, '0 svelte-x1o6ra'); + assert.equal(div.className, '0 svelte-phrtam'); component.testName1 = undefined; component.testName2 = 0; - assert.equal(div.className, 'NaN svelte-x1o6ra'); + assert.equal(div.className, 'NaN svelte-phrtam'); } }); diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js index 081fceecf279..03e148c8a92e 100644 --- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js @@ -8,41 +8,41 @@ export default test({ }; }, - html: '
', + html: '
', test({ assert, component, target }) { const div = target.querySelector('div'); ok(div); - assert.equal(div.className, 'testClassName svelte-x1o6ra'); + assert.equal(div.className, 'testClassName svelte-zab9z2'); component.testName = null; - assert.equal(div.className, 'svelte-x1o6ra'); + assert.equal(div.className, 'svelte-zab9z2'); component.testName = undefined; - assert.equal(div.className, 'svelte-x1o6ra'); + assert.equal(div.className, 'svelte-zab9z2'); component.testName = undefined + ''; - assert.equal(div.className, 'undefined svelte-x1o6ra'); + assert.equal(div.className, 'undefined svelte-zab9z2'); component.testName = null + ''; - assert.equal(div.className, 'null svelte-x1o6ra'); + assert.equal(div.className, 'null svelte-zab9z2'); component.testName = 1; - assert.equal(div.className, '1 svelte-x1o6ra'); + assert.equal(div.className, '1 svelte-zab9z2'); component.testName = 0; - assert.equal(div.className, '0 svelte-x1o6ra'); + assert.equal(div.className, '0 svelte-zab9z2'); component.testName = false; - assert.equal(div.className, 'false svelte-x1o6ra'); + assert.equal(div.className, 'false svelte-zab9z2'); component.testName = true; - assert.equal(div.className, 'true svelte-x1o6ra'); + assert.equal(div.className, 'true svelte-zab9z2'); component.testName = {}; - assert.equal(div.className, 'svelte-x1o6ra'); + assert.equal(div.className, 'svelte-zab9z2'); component.testName = ''; - assert.equal(div.className, 'svelte-x1o6ra'); + assert.equal(div.className, 'svelte-zab9z2'); } }); diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js index d55a0079c0b7..51d258a75de5 100644 --- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js @@ -10,43 +10,43 @@ export default test({ }; }, - html: '
', + html: '
', async test({ assert, component, target }) { const div = target.querySelector('div'); ok(div); - assert.equal(div.className, 'test1test2 svelte-x1o6ra'); + assert.equal(div.className, 'test1test2 svelte-1i4vvar'); component.testName1 = null; component.testName2 = null; - assert.equal(div.className, '0 svelte-x1o6ra'); + assert.equal(div.className, '0 svelte-1i4vvar'); component.testName1 = null; component.testName2 = 'test'; - assert.equal(div.className, 'nulltest svelte-x1o6ra'); + assert.equal(div.className, 'nulltest svelte-1i4vvar'); component.testName1 = undefined; component.testName2 = 'test'; - assert.equal(div.className, 'undefinedtest svelte-x1o6ra'); + assert.equal(div.className, 'undefinedtest svelte-1i4vvar'); component.testName1 = undefined; component.testName2 = undefined; - assert.equal(div.className, 'NaN svelte-x1o6ra'); + assert.equal(div.className, 'NaN svelte-1i4vvar'); component.testName1 = null; component.testName2 = 1; - assert.equal(div.className, '1 svelte-x1o6ra'); + assert.equal(div.className, '1 svelte-1i4vvar'); component.testName1 = undefined; component.testName2 = 1; - assert.equal(div.className, 'NaN svelte-x1o6ra'); + assert.equal(div.className, 'NaN svelte-1i4vvar'); component.testName1 = null; component.testName2 = 0; - assert.equal(div.className, '0 svelte-x1o6ra'); + assert.equal(div.className, '0 svelte-1i4vvar'); component.testName1 = undefined; component.testName2 = 0; - assert.equal(div.className, 'NaN svelte-x1o6ra'); + assert.equal(div.className, 'NaN svelte-1i4vvar'); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js index 0069a7dfd768..58165d6081b5 100644 --- a/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js @@ -3,7 +3,7 @@ import { test } from '../../test'; export default test({ async test({ assert, target, logs }) { const [my_element, my_element_1] = target.querySelectorAll('my-element'); - assert.equal(my_element.classList.contains('svelte-1koh33s'), true); - assert.equal(my_element_1.classList.contains('svelte-1koh33s'), true); + assert.equal(my_element.classList.contains('svelte-1dwmud9'), true); + assert.equal(my_element_1.classList.contains('svelte-1dwmud9'), true); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js index eae8101e6e73..8d8c1c151ba3 100644 --- a/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js @@ -1,14 +1,14 @@ import { ok, test } from '../../test'; export default test({ - html: ``, + html: ``, async test({ assert, target }) { const [el, el2] = target.querySelectorAll('custom-element'); ok(el); ok(el2); - assert.deepEqual(el.className, 'red svelte-p153w3'); - assert.deepEqual(el2.className, 'red svelte-p153w3'); + assert.deepEqual(el.className, 'red svelte-2z630'); + assert.deepEqual(el2.className, 'red svelte-2z630'); } }); diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html index 60e974bd1af3..83897dd7a58e 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html @@ -1 +1 @@ -
foo
\ No newline at end of file +
foo
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html index 5350e77a49a7..d23b611d6b52 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css index bddefdd00c26..b5e47f0fe264 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css @@ -1,4 +1,4 @@ -.foo.svelte-sg04hs { +.foo.svelte-djbl57 { color: red; } diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html index 1f0b2b95fef7..f5572cf9266d 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html @@ -1 +1 @@ -
bar
foo
\ No newline at end of file +
bar
foo
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html index 6d795670ff78..112c2386abaf 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css index 8882c6ec7e31..7bed45d8453e 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css @@ -1,4 +1,4 @@ - .foo.svelte-sg04hs { + .foo.svelte-y58i7t { color: red; } diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html index 8ebe1ad73e11..3c044ed4896c 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html @@ -1 +1 @@ -
foo
\ No newline at end of file +
foo
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html index 9c4f8a8538ad..b9fc50d2b8e5 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css/_expected.css index 8882c6ec7e31..ff7639d0d333 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css/_expected.css +++ b/packages/svelte/tests/server-side-rendering/samples/css/_expected.css @@ -1,4 +1,4 @@ - .foo.svelte-sg04hs { + .foo.svelte-k6fc61 { color: red; } diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css/_expected.html index 8ebe1ad73e11..a8b45190ca5b 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css/_expected.html +++ b/packages/svelte/tests/server-side-rendering/samples/css/_expected.html @@ -1 +1 @@ -
foo
\ No newline at end of file +
foo
diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html index 9c4f8a8538ad..b3c8ca9c8f58 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html +++ b/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js b/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js index ee9a3d92c4fb..aa23f0d2131b 100644 --- a/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js +++ b/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js @@ -57,7 +57,7 @@ export default test({ { str: 'replace_me_script', strGenerated: 'done_replace_script_2' }, { str: 'done_replace_script_2', idxGenerated: 1 } ], - css: [{ str: '.replace_me_style', strGenerated: '.done_replace_style_2.svelte-o6vre' }], + css: [{ str: '.replace_me_style', strGenerated: '.done_replace_style_2.svelte-fk9pdp' }], test({ assert, code_preprocessed, code_css }) { assert.equal( code_preprocessed.includes('\n/*# sourceMappingURL=data:application/json;base64,'), diff --git a/packages/svelte/tests/sourcemaps/samples/css/_config.js b/packages/svelte/tests/sourcemaps/samples/css/_config.js index df3c83c7032d..d43d0b2f361e 100644 --- a/packages/svelte/tests/sourcemaps/samples/css/_config.js +++ b/packages/svelte/tests/sourcemaps/samples/css/_config.js @@ -1,5 +1,5 @@ import { test } from '../../test'; export default test({ - css: [{ str: '.foo', strGenerated: '.foo.svelte-sg04hs' }] + css: [{ str: '.foo', strGenerated: '.foo.svelte-rfm9n0' }] }); From c96860e3203cb71461ae7ee46e71bfec4134bc31 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 10 Sep 2025 13:46:28 -0400 Subject: [PATCH 3/5] slightly kludgy fix --- packages/svelte/src/compiler/validate-options.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js index 2aceb8bb69a4..a94a55331126 100644 --- a/packages/svelte/src/compiler/validate-options.js +++ b/packages/svelte/src/compiler/validate-options.js @@ -71,7 +71,7 @@ const component_options = { }), cssHash: fun(({ css, filename, hash }) => { - return `svelte-${hash(filename ?? css)}`; + return `svelte-${hash(filename === '(unknown)' ? css : filename ?? css)}`; }), // TODO this is a sourcemap option, would be good to put under a sourcemap namespace From f7d3078773b0de7c88e00953956b59673f4ec808 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 10 Sep 2025 15:26:13 -0400 Subject: [PATCH 4/5] try this --- packages/svelte/src/compiler/phases/2-analyze/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js index 92b89c588ee2..156d517b0b60 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/index.js +++ b/packages/svelte/src/compiler/phases/2-analyze/index.js @@ -520,7 +520,7 @@ export function analyze_component(root, source, options) { hash: root.css ? options.cssHash({ css: root.css.content.styles, - filename: options.filename, + filename: state.filename, name: component_name, hash }) From 8ee268fe78781e7f646bc3e5a9c9332aa58ae0c7 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 10 Sep 2025 16:46:57 -0400 Subject: [PATCH 5/5] fix --- .../src/compiler/phases/2-analyze/index.js | 18 +++++++------- .../_config.js | 24 +++++++++---------- .../_config.js | 20 ++++++++-------- .../_config.js | 24 +++++++++---------- .../_config.js | 20 ++++++++-------- .../custom-element-svelte-class/_config.js | 4 ++-- .../_config.js | 6 ++--- .../_expected.html | 2 +- .../_expected_head.html | 2 +- .../css-injected-options-nested/_expected.css | 2 +- .../_expected.html | 2 +- .../_expected_head.html | 2 +- .../css-injected-options/_expected.css | 2 +- .../css-injected-options/_expected.html | 2 +- .../css-injected-options/_expected_head.html | 2 +- .../samples/css/_expected.css | 2 +- .../samples/css/_expected.html | 2 +- .../samples/css/_expected_head.html | 2 +- .../samples/attached-sourcemap/_config.js | 2 +- .../tests/sourcemaps/samples/css/_config.js | 2 +- 20 files changed, 72 insertions(+), 70 deletions(-) diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js index 156d517b0b60..de27c4623b71 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/index.js +++ b/packages/svelte/src/compiler/phases/2-analyze/index.js @@ -456,10 +456,19 @@ export function analyze_component(root, source, options) { const is_custom_element = !!options.customElementOptions || options.customElement; + const name = module.scope.generate(options.name ?? component_name); + + state.adjust({ + component_name: name, + dev: options.dev, + rootDir: options.rootDir, + runes + }); + // TODO remove all the ?? stuff, we don't need it now that we're validating the config /** @type {ComponentAnalysis} */ const analysis = { - name: module.scope.generate(options.name ?? component_name), + name, root: scope_root, module, instance, @@ -534,13 +543,6 @@ export function analyze_component(root, source, options) { async_deriveds: new Set() }; - state.adjust({ - component_name: analysis.name, - dev: options.dev, - rootDir: options.rootDir, - runes - }); - if (!runes) { // every exported `let` or `var` declaration becomes a prop, everything else becomes an export for (const node of instance.ast.body) { diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js index ab6ac2a18611..1fc15c7eda56 100644 --- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classname-with-style/_config.js @@ -1,43 +1,43 @@ import { ok, test } from '../../test'; export default test({ - html: '
', + html: '
', test({ assert, component, target }) { const div = target.querySelector('div'); ok(div); component.testName = null; - assert.equal(div.className, 'svelte-1bl4vl5'); + assert.equal(div.className, 'svelte-70s021'); component.testName = undefined; - assert.equal(div.className, 'svelte-1bl4vl5'); + assert.equal(div.className, 'svelte-70s021'); component.testName = undefined + ''; - assert.equal(div.className, 'undefined svelte-1bl4vl5'); + assert.equal(div.className, 'undefined svelte-70s021'); component.testName = null + ''; - assert.equal(div.className, 'null svelte-1bl4vl5'); + assert.equal(div.className, 'null svelte-70s021'); component.testName = 1; - assert.equal(div.className, '1 svelte-1bl4vl5'); + assert.equal(div.className, '1 svelte-70s021'); component.testName = 0; - assert.equal(div.className, '0 svelte-1bl4vl5'); + assert.equal(div.className, '0 svelte-70s021'); component.testName = false; - assert.equal(div.className, 'false svelte-1bl4vl5'); + assert.equal(div.className, 'false svelte-70s021'); component.testName = true; - assert.equal(div.className, 'true svelte-1bl4vl5'); + assert.equal(div.className, 'true svelte-70s021'); component.testName = {}; - assert.equal(div.className, 'svelte-1bl4vl5'); + assert.equal(div.className, 'svelte-70s021'); component.testName = ''; - assert.equal(div.className, 'svelte-1bl4vl5'); + assert.equal(div.className, 'svelte-70s021'); component.testName = 'testClassName'; - assert.equal(div.className, 'testClassName svelte-1bl4vl5'); + assert.equal(div.className, 'testClassName svelte-70s021'); } }); diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js index 9ccca80e7cf7..2f4b6242cb33 100644 --- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-classnames-with-style/_config.js @@ -10,43 +10,43 @@ export default test({ }; }, - html: '
', + html: '
', test({ assert, component, target }) { const div = target.querySelector('div'); ok(div); - assert.equal(div.className, 'test1test2 svelte-phrtam'); + assert.equal(div.className, 'test1test2 svelte-70s021'); component.testName1 = null; component.testName2 = null; - assert.equal(div.className, '0 svelte-phrtam'); + assert.equal(div.className, '0 svelte-70s021'); component.testName1 = null; component.testName2 = 'test'; - assert.equal(div.className, 'nulltest svelte-phrtam'); + assert.equal(div.className, 'nulltest svelte-70s021'); component.testName1 = undefined; component.testName2 = 'test'; - assert.equal(div.className, 'undefinedtest svelte-phrtam'); + assert.equal(div.className, 'undefinedtest svelte-70s021'); component.testName1 = undefined; component.testName2 = undefined; - assert.equal(div.className, 'NaN svelte-phrtam'); + assert.equal(div.className, 'NaN svelte-70s021'); component.testName1 = null; component.testName2 = 1; - assert.equal(div.className, '1 svelte-phrtam'); + assert.equal(div.className, '1 svelte-70s021'); component.testName1 = undefined; component.testName2 = 1; - assert.equal(div.className, 'NaN svelte-phrtam'); + assert.equal(div.className, 'NaN svelte-70s021'); component.testName1 = null; component.testName2 = 0; - assert.equal(div.className, '0 svelte-phrtam'); + assert.equal(div.className, '0 svelte-70s021'); component.testName1 = undefined; component.testName2 = 0; - assert.equal(div.className, 'NaN svelte-phrtam'); + assert.equal(div.className, 'NaN svelte-70s021'); } }); diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js index 03e148c8a92e..b06103992f08 100644 --- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classname-with-style/_config.js @@ -8,41 +8,41 @@ export default test({ }; }, - html: '
', + html: '
', test({ assert, component, target }) { const div = target.querySelector('div'); ok(div); - assert.equal(div.className, 'testClassName svelte-zab9z2'); + assert.equal(div.className, 'testClassName svelte-70s021'); component.testName = null; - assert.equal(div.className, 'svelte-zab9z2'); + assert.equal(div.className, 'svelte-70s021'); component.testName = undefined; - assert.equal(div.className, 'svelte-zab9z2'); + assert.equal(div.className, 'svelte-70s021'); component.testName = undefined + ''; - assert.equal(div.className, 'undefined svelte-zab9z2'); + assert.equal(div.className, 'undefined svelte-70s021'); component.testName = null + ''; - assert.equal(div.className, 'null svelte-zab9z2'); + assert.equal(div.className, 'null svelte-70s021'); component.testName = 1; - assert.equal(div.className, '1 svelte-zab9z2'); + assert.equal(div.className, '1 svelte-70s021'); component.testName = 0; - assert.equal(div.className, '0 svelte-zab9z2'); + assert.equal(div.className, '0 svelte-70s021'); component.testName = false; - assert.equal(div.className, 'false svelte-zab9z2'); + assert.equal(div.className, 'false svelte-70s021'); component.testName = true; - assert.equal(div.className, 'true svelte-zab9z2'); + assert.equal(div.className, 'true svelte-70s021'); component.testName = {}; - assert.equal(div.className, 'svelte-zab9z2'); + assert.equal(div.className, 'svelte-70s021'); component.testName = ''; - assert.equal(div.className, 'svelte-zab9z2'); + assert.equal(div.className, 'svelte-70s021'); } }); diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js index 51d258a75de5..7fc3dd85f462 100644 --- a/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/attribute-null-func-classnames-with-style/_config.js @@ -10,43 +10,43 @@ export default test({ }; }, - html: '
', + html: '
', async test({ assert, component, target }) { const div = target.querySelector('div'); ok(div); - assert.equal(div.className, 'test1test2 svelte-1i4vvar'); + assert.equal(div.className, 'test1test2 svelte-70s021'); component.testName1 = null; component.testName2 = null; - assert.equal(div.className, '0 svelte-1i4vvar'); + assert.equal(div.className, '0 svelte-70s021'); component.testName1 = null; component.testName2 = 'test'; - assert.equal(div.className, 'nulltest svelte-1i4vvar'); + assert.equal(div.className, 'nulltest svelte-70s021'); component.testName1 = undefined; component.testName2 = 'test'; - assert.equal(div.className, 'undefinedtest svelte-1i4vvar'); + assert.equal(div.className, 'undefinedtest svelte-70s021'); component.testName1 = undefined; component.testName2 = undefined; - assert.equal(div.className, 'NaN svelte-1i4vvar'); + assert.equal(div.className, 'NaN svelte-70s021'); component.testName1 = null; component.testName2 = 1; - assert.equal(div.className, '1 svelte-1i4vvar'); + assert.equal(div.className, '1 svelte-70s021'); component.testName1 = undefined; component.testName2 = 1; - assert.equal(div.className, 'NaN svelte-1i4vvar'); + assert.equal(div.className, 'NaN svelte-70s021'); component.testName1 = null; component.testName2 = 0; - assert.equal(div.className, '0 svelte-1i4vvar'); + assert.equal(div.className, '0 svelte-70s021'); component.testName1 = undefined; component.testName2 = 0; - assert.equal(div.className, 'NaN svelte-1i4vvar'); + assert.equal(div.className, 'NaN svelte-70s021'); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js index 58165d6081b5..930de125858e 100644 --- a/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/custom-element-svelte-class/_config.js @@ -3,7 +3,7 @@ import { test } from '../../test'; export default test({ async test({ assert, target, logs }) { const [my_element, my_element_1] = target.querySelectorAll('my-element'); - assert.equal(my_element.classList.contains('svelte-1dwmud9'), true); - assert.equal(my_element_1.classList.contains('svelte-1dwmud9'), true); + assert.equal(my_element.classList.contains('svelte-70s021'), true); + assert.equal(my_element_1.classList.contains('svelte-70s021'), true); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js index 8d8c1c151ba3..cb532b28b520 100644 --- a/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js @@ -1,14 +1,14 @@ import { ok, test } from '../../test'; export default test({ - html: ``, + html: ``, async test({ assert, target }) { const [el, el2] = target.querySelectorAll('custom-element'); ok(el); ok(el2); - assert.deepEqual(el.className, 'red svelte-2z630'); - assert.deepEqual(el2.className, 'red svelte-2z630'); + assert.deepEqual(el.className, 'red svelte-70s021'); + assert.deepEqual(el2.className, 'red svelte-70s021'); } }); diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html index 83897dd7a58e..7ba4de394e21 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected.html @@ -1 +1 @@ -
foo
+
foo
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html index d23b611d6b52..99db8fc6dc23 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-minify/_expected_head.html @@ -1 +1 @@ - + diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css index b5e47f0fe264..81c111196792 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css @@ -1,4 +1,4 @@ -.foo.svelte-djbl57 { +.foo.svelte-1nvcr6w { color: red; } diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html index f5572cf9266d..a6eba009429b 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html @@ -1 +1 @@ -
bar
foo
+
bar
foo
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html index 112c2386abaf..516a9576b3fd 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html @@ -1 +1 @@ - + diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css index 7bed45d8453e..eb1f3e7a9b7c 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css @@ -1,4 +1,4 @@ - .foo.svelte-y58i7t { + .foo.svelte-okauro { color: red; } diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html index 3c044ed4896c..01ebd7991455 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html @@ -1 +1 @@ -
foo
+
foo
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html index b9fc50d2b8e5..1a1511f55eb7 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html +++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html @@ -1 +1 @@ - + diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css/_expected.css index ff7639d0d333..ec86890478b7 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css/_expected.css +++ b/packages/svelte/tests/server-side-rendering/samples/css/_expected.css @@ -1,4 +1,4 @@ - .foo.svelte-k6fc61 { + .foo.svelte-e9omc { color: red; } diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css/_expected.html index a8b45190ca5b..dc9409fa03e2 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css/_expected.html +++ b/packages/svelte/tests/server-side-rendering/samples/css/_expected.html @@ -1 +1 @@ -
foo
+
foo
diff --git a/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html index b3c8ca9c8f58..941c1f13b490 100644 --- a/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html +++ b/packages/svelte/tests/server-side-rendering/samples/css/_expected_head.html @@ -1 +1 @@ - + diff --git a/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js b/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js index aa23f0d2131b..3a292ff428c0 100644 --- a/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js +++ b/packages/svelte/tests/sourcemaps/samples/attached-sourcemap/_config.js @@ -57,7 +57,7 @@ export default test({ { str: 'replace_me_script', strGenerated: 'done_replace_script_2' }, { str: 'done_replace_script_2', idxGenerated: 1 } ], - css: [{ str: '.replace_me_style', strGenerated: '.done_replace_style_2.svelte-fk9pdp' }], + css: [{ str: '.replace_me_style', strGenerated: '.done_replace_style_2.svelte-1vsrjd4' }], test({ assert, code_preprocessed, code_css }) { assert.equal( code_preprocessed.includes('\n/*# sourceMappingURL=data:application/json;base64,'), diff --git a/packages/svelte/tests/sourcemaps/samples/css/_config.js b/packages/svelte/tests/sourcemaps/samples/css/_config.js index d43d0b2f361e..fce38d401cb4 100644 --- a/packages/svelte/tests/sourcemaps/samples/css/_config.js +++ b/packages/svelte/tests/sourcemaps/samples/css/_config.js @@ -1,5 +1,5 @@ import { test } from '../../test'; export default test({ - css: [{ str: '.foo', strGenerated: '.foo.svelte-rfm9n0' }] + css: [{ str: '.foo', strGenerated: '.foo.svelte-1eyw86p' }] });