diff --git a/.changeset/serious-sloths-grab.md b/.changeset/serious-sloths-grab.md new file mode 100644 index 000000000..758da79aa --- /dev/null +++ b/.changeset/serious-sloths-grab.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': patch +--- + +fix(vitePreprocess): remove problematic pure annotations that could lead to wrong build output in some cases diff --git a/packages/e2e-tests/preprocess-with-vite/__tests__/preprocess-with-vite.spec.ts b/packages/e2e-tests/preprocess-with-vite/__tests__/preprocess-with-vite.spec.ts index 12502f34e..fefe3c005 100644 --- a/packages/e2e-tests/preprocess-with-vite/__tests__/preprocess-with-vite.spec.ts +++ b/packages/e2e-tests/preprocess-with-vite/__tests__/preprocess-with-vite.spec.ts @@ -1,4 +1,5 @@ -import { getColor, getText } from '~utils'; +import { getColor, getText, browserLogs } from '~utils'; +import { expect } from 'vitest'; test('should render App', async () => { expect(await getText('h1.foo')).toBe(`Hello world`); @@ -7,3 +8,8 @@ test('should render App', async () => { expect(await getColor('#foo-title')).toBe('magenta'); expect(await getColor('p.note')).toBe('rgb(255, 62, 0)'); }); + +test('should not mangle code from esbuild pure annotations', async () => { + expect(browserLogs.some((log) => log.startsWith('pure test 1'))).toBe(true); + expect(browserLogs.some((log) => log.startsWith('pure test 2'))).toBe(true); +}); diff --git a/packages/e2e-tests/preprocess-with-vite/src/Foo.svelte b/packages/e2e-tests/preprocess-with-vite/src/Foo.svelte index db6c6b80a..f3fe3a3c3 100644 --- a/packages/e2e-tests/preprocess-with-vite/src/Foo.svelte +++ b/packages/e2e-tests/preprocess-with-vite/src/Foo.svelte @@ -1,6 +1,8 @@

Styles with {foo} {bla}

diff --git a/packages/vite-plugin-svelte/src/utils/__tests__/compile.spec.ts b/packages/vite-plugin-svelte/src/utils/__tests__/compile.spec.ts new file mode 100644 index 000000000..13a145bce --- /dev/null +++ b/packages/vite-plugin-svelte/src/utils/__tests__/compile.spec.ts @@ -0,0 +1,49 @@ +import { describe, it, expect } from 'vitest'; +import { createCompileSvelte } from '../compile'; +import { ResolvedOptions } from '../options'; +const options: ResolvedOptions = { + compilerOptions: { + dev: false, + format: 'esm', + css: 'external' + }, + isBuild: false, + isDebug: false, + isProduction: false, + isServe: false, + root: process.cwd() +}; + +describe('createCompileSvelte', () => { + it('returns function', () => { + const compileSvelte = createCompileSvelte(options); + expect(typeof compileSvelte).toBe('function'); + }); + + describe('compileSvelte', async () => { + it('removes dangling pure annotations', async () => { + const code = ` +
{x}
`; + const compileSvelte = createCompileSvelte(options); + const output = await compileSvelte( + { + cssId: 'svelte-xxxxx', + query: undefined, + raw: false, + ssr: false, + timestamp: Date.now(), + id: 'id', + filename: '/some/File.svelte', + normalizedFilename: 'some/File.svelte' + }, + code, + {} + ); + expect(output.compiled.js.code).not.toContain('/* @__PURE__ */\n'); + }); + }); +}); diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts index b0f433e10..4666aafff 100644 --- a/packages/vite-plugin-svelte/src/utils/compile.ts +++ b/packages/vite-plugin-svelte/src/utils/compile.ts @@ -121,6 +121,14 @@ const _createCompileSvelte = (makeHot: Function) => { const endStat = stats?.start(filename); const compiled = compile(finalCode, finalCompileOptions); + + // prevent dangling pure comments + // see https://github.com/sveltejs/kit/issues/9492#issuecomment-1487704985 + // uses regex replace with whitespace to keep sourcemap/character count unmodified + compiled.js.code = compiled.js.code.replace( + /\/\* [@#]__PURE__ \*\/(\s*)$/gm, + ' $1' + ); if (endStat) { endStat(); }