v6 prints errors during `vite dev`: `[postcss] Unknown word xxx`

[echocrow]

Describe the bug

Originally reported here: #1186 (comment)

After upgrading to v6, running vite dev can cause excessive error logs in the terminal in the form of:

[vite] (ssr) Error when evaluating SSR module <file-path>: [postcss] <file-path:line:col>: Unknown word <word>
  Plugin: vite:css
  ...

(exact plugin being reported may vary)

This issue is present both under vite ^v6.3.5 and vite ^v7.0.0.

Downgrading @sveltejs/vite-plugin-svelte back to v5.0.3, this issue is not present.

Reproduction URL

https://stackblitz.com/edit/sveltejs-vite-plugin-svelte-vite-ssr-bug?file=src%2Froutes%2F%2Bpage.svelte

Reproduction

Some pieces that were required to replicate this:

• a postcss config with at least one plugin
• a browser-only lazy-imported component that uses postcss

Given the repro:

1. Run pnpm dev
2. Then click "reload" in the preview pane (or browser tab during local dev)

(in our production repo, hitting refresh is not needed for the error to be logged; unsure why this minimal repo does need the manual refresh)

Logs

vite:cache [memory] __sveltekit/paths +6s
  vite:resolve 0.04ms /src/routes/Foobar.svelte?inline&svelte&type=style&lang.css -> /home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/src/routes/Foobar.svelte?inline&svelte&type=style&lang.css +6s
  vite:load 3.42ms [fs] /src/routes/Foobar.svelte?inline&svelte&type=style&lang.css +6s
2:04:33 PM [vite] (ssr) Error when evaluating SSR module /src/routes/Foobar.svelte?inline&svelte&type=style&lang.css: [postcss] /home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/src/routes/Foobar.svelte?inline&svelte&type=style&lang.css:7:255: Unknown word '{'
  Plugin: vite:css
  File: /home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/src/routes/Foobar.svelte?inline&svelte&type=style&lang.css:7:254
  5  |  <p>Under <code>@sveltejs/vite-plugin-svelte@v6.1.0</code>, terminal will print:</p>
  6  |  
  7  |  <pre>[vite] (ssr) Error when evaluating SSR module /src/routes/Foobar.svelte?inline&svelte&type=style&lang.css: [postcss] /home/projects/sveltejs-kit-template-default-lxddwbfe/src/routes/Foobar.svelte?inline&svelte&type=style&lang.css:9:1: Unknown word {'{'}some word{'}'}
     |                                                                                                                                                                                                                                                                ^
  8  |    Plugin: vite:css
  9  |    ...
      at CssSyntaxError (/home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/node_modules/postcss/lib/css-syntax-error.js:37:13)
      at error (/home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/node_modules/postcss/lib/input.js:135:16)
      at unknownWord (/home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/node_modules/postcss/lib/parser.js:595:22)
      at other (/home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/node_modules/postcss/lib/parser.js:437:12)
      at parse (/home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/node_modules/postcss/lib/parser.js:472:16)
      at parse (/home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/node_modules/postcss/lib/parse.js:11:12)
      at LazyResult (/home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/node_modules/postcss/lib/lazy-result.js:165:16)
      at process (/home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/node_modules/postcss/lib/processor.js:53:14)
      at runPostCSS (file:///home/projects/sveltejs-vite-plugin-svelte-vite-ssr-bug/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:43887:52)

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 20.19.1 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.8.2 - /usr/local/bin/npm
  pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
  @sveltejs/kit: 2.27.0 => 2.27.0 
  @sveltejs/vite-plugin-svelte: 6.1.0 => 6.1.0 
  svelte: 5.37.3 => 5.37.3 
  vite: 6.3.5 => 6.3.5

[dominikg]

the reproduction on stackblitz needs a svelte.config.js eg

import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://svelte.dev/docs/kit/integrations
	// for more information about preprocessors
	preprocess: vitePreprocess(),
	kit: { adapter: adapter() }
};

export default config;

seeing 6.1.1 logging the newly added warning

vite-plugin-svelte/packages/vite-plugin-svelte/src/plugins/load-compiled-css.js

Line 58 in 3a6976a

log.warn(`failed to load virtual css module ${id}`, undefined, 'load');

it looks indeed similar to #1186, although yet different as it only seems to affect ssr in dev.
A possible fix is to extend or remove the isBuildWatch condition for extra caching in the compiled css plugin.

[dominikg]

tried to reproduce it here without vite-plugin-svelte & sveltekit but failed https://github.com/dominikg/getmoduleinfo-build-watch-repro/tree/ssr (it works as expected).

The only theory i currently have is that the way sveltekit injects css to avoid fouc on load is part of the cause for it.

[dominikg]

fix released in 6.1.2