Vite bundle CSS different than dev with shadcn-svelte

[zambony]

Describe the bug

(I'm not sure if this is an issue for https://github.com/huntabyte/shadcn-svelte or this repo.)

I am creating an application with Tauri and using the shadcn-svelte integration of this library, and one thing I noticed is that with the dev mode, I get about half of the intended styling from shadcn-svelte, and half from this component's built-in styles. The white outline around a toast is from the classes applied through toastOptions, but the style for the action button through toastOptions.actionButton to make it white does not apply.

Then, in the final bundle, the card's white outline is gone but the button styling actually starts to work.

This is even more apparent when I try to use richColors.

In dev mode:

The final bundle for richColors looks the same as if I hadn't applied richColors at all.

I understand I can use the unstyled option for the toast, but I was hoping to keep some of the layout styling, like padding and text size. Maybe the answer is that shadcn-svelte should be using unstyled for their integration and needs to handle all of the styling rather than just adding to existing styles.

Reproduction

1. Create a clean Tauri app with Svelte and TypeScript as your frontend (maybe optional).
2. Install shadcn-svelte
3. Install their Sonner component
4. Set up the Toaster and create a toast
5. Observe in the dev mode the button styles don't apply, but toast styles do.
6. Observe that in the final release build, the toast styles don't apply but the button styles do.

Logs

No response

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900
    Memory: 4.06 GB / 30.97 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.16.0 - ~/.local/share/pnpm/node
    npm: 10.8.1 - ~/.local/share/pnpm/npm
    pnpm: 9.7.0 - ~/.local/share/pnpm/pnpm
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.24 
    svelte: ^4.2.7 => 4.2.18 
    svelte-sonner: ^0.3.27 => 0.3.27

Severity

annoyance

[untemi]

I've had the same issue.

[unlocomqx]

I think it has to do with the styles order difference between dev and prod because the rich colors are overwritten on prod but not on dev

The classes that overwrite the styles are in [chadcn location]/ui/sonner/sonner.svelte

I removed them to avoid the issue

<Sonner
	theme={$mode}
	class="toaster group"
	toastOptions={{
		classes: {
			// toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
			toast: "group toast group-[.toaster]:shadow-lg",
			description: "group-[.toast]:text-muted-foreground",
			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
		},
	}}
	{...restProps}
/>

So it's not caused by this lib after all