emitCss: false in svelte.config.js strips all CSS from build

[WaltzingPenguin]

Describe the bug

emitCss: false behave differently when set inside svelte.config.js compared to when passed as a parameter directly to vite-plugin-svelte. It completely strips all CSS from the output build, instead of inlining it in the resulting JS as expected.

Reproduction

Setup

• npm init vite
• Select "svelte > svelte-ts" preset
• npm install

Vite Config

• Modify vite.config.js to include emitCss: false

  export default defineConfig({
    plugins: [svelte({
      emitCss: false
    })]
  })

• npm run build
• Observe that a CSS file is not written to disk.
• Verify that dist/assets/index.*.js contains the required CSS. Searching for "text-align" is a quick check.

Svelte Config

• Revert changes to vite.config.js from previous test.
• Modify svelte.config.js to include emitCss: false

  export default {
    emitCss: false,
    preprocess: sveltePreprocess()
  }

• npm run build
• Observe that a CSS file is not written to disk.
• It would be expected that dist/assets/index.*.js contains the required CSS. Searching for "text-align" is a quick check. It does not and no style information is written as part of the build.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 AMD Ryzen 5 1600 Six-Core Processor
    Memory: 8.97 GB / 15.95 GB
  Binaries:
    Node: 14.15.5 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.20.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^1.0.0-next.11 => 1.0.0-next.27
    svelte: ^3.37.0 => 3.43.2
    vite: ^2.6.4 => 2.6.7

Severity

annoyance

[bluwy]

Looks like it's because the default options we have only considered for the inline options. We should also consider the svelte config options too:

vite-plugin-svelte/packages/vite-plugin-svelte/src/utils/options.ts

Line 159 in b556a29

const defaultOptions = buildDefaultOptions(viteEnv.mode === 'production', inlineOptions);

This seems to only affect emitCss. A workaround for now is to add this in svelte.config.js:

export default {
  compilerOptions: {
    css: true // set this to true as well, ideally vite-plugin-svelte should automatically handle this.
  },
  emitCss: false
}

[dominikg]

Thank you for reporting this! @bluwy is spot on.

There are upcoming changes to config handling in vite-plugin-svelte (and svelte) in general, the most user-facing one being that the plugin specific options - like emitCss - are going to be moved into a separate namespace inside svelte.config.js.

see sveltejs/rfcs#59 for a few more details.

Until that is implemented and used by vite-plugin-svelte, please use the workaround above.

[bluwy]

Released 1.0.0-next.28 with a fix for this. The workaround is not needed anymore.