search

wobsoriano / svelte-sonner

An opinionated toast component for Svelte. A port of @emilkowalski's sonner.
https://svelte-sonner.vercel.app
MIT License
644 stars 21 forks source link

Vite bundle CSS different than dev with shadcn-svelte #122

Open zambony opened 3 weeks ago

zambony commented 3 weeks ago

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. sonner dev

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

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

In dev mode: sonner dev rich

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

andro404-MC commented 3 weeks ago

I've had the same issue.