Svelte 5: CSS output not minified when mounting into shadow root

[ingmarh]

First of all: Congrats on releasing Svelte 5, it’s great!

Describe the bug

When mounting into a shadow root, I’ve noticed that CSS rulesets are no longer minified in the JS output when using Svelte 5 + Svelte Vite Plugin with emitCss: false + vite build. With Svelte 4, the CSS rulesets were minified (whitespace removed).

Since emitCss: false lets Svelte handle injection of stylesheets, I believe it is a minor regression in Svelte 5. Opening this issue because I couldn’t find an existing one.

Reproduction

Hoping this also works without a link.

Reproducer:

// svelte.config.ts

export default {
  vitePlugin: {
    emitCss: false,
  },
}

// main.ts

import { mount } from 'svelte'
import App from './App.svelte'

const el = document.createElement('div')
document.body.appendChild(el)
const root = el.attachShadow({ mode: 'open' })
mount(App, { target: root })

<script>
  // App.svelte
</script>

<div class="container"></div>

<style>
  .container {
    background: red;
    width: 380px;
    max-width: 80vw;
    padding: 20px;
  }
</style>

Output:

After running vite build, unminified style rulesets are contained in the output:

const sr={hash:"svelte-174vvwj",code:`
  .container.svelte-174vvwj {
    background: red;
    width: 380px;
    max-width: 80vw;
    padding: 20px;
  }
`}

"style.css" when building with emitCss: true:

.container.svelte-174vvwj{background:red;width:380px;max-width:80vw;padding:20px}

Logs

No response

System Info

Svelte 5.0.2
Vite 5.4.9
@sveltejs/vite-plugin-svelte 4.0.0
Node 22.10.0

Severity

annoyance