Missing sonner styles in Remix + Vite application

[edbella]

Describe the feature / bug 📝:

I'm running a Remix application with the Vite bundler approach. When I trigger a toast, I see the toast content appended to the DOM but it is not displayed on the screen. After taking a deeper look, I realised that the style.css in the Toaster component is not loaded into the page.

I guess this has to do with the requirement of using url imports for css side effects e.g styles.css?url as required by the bundler.

In the meantime I have created a css file containing the values contained in styles.css and imported that manually in my project and it works.

Steps to reproduce the bug 🔁:

1. npx create-remix
2. npm i sonner
3. Trigger toast after following the setup as described in the documentation

[dtmzr]

@edbella I encountered the same in my setup, however only dev is affected. The production build works fine.

For everyone new to remix, you can fix it for your dev setup like this in root.tsx:

import sonnerStyles from "~/components/ui/sonner.css?url"; // copy this file form this repo

export const links: LinksFunction = () => [
    // your other links
    ...(process.env.NODE_ENV === "development"
    ? [{ rel: "stylesheet", href: sonnerStyles }]
    : []),
]

[kevlened]

I opened a pr to include the styles in the npm package. This will prevent copy/pasted styles from becoming outdated. However, the root cause for the incompatibility is still unclear, given the css is bundled in the published js.

If accepted, the following would be a workaround. In my case, production was also affected, so I include the styles in all environments:

import sonnerStyles from 'sonner/dist/styles.css?url'

export const links: LinksFunction = () => [
    { rel: 'stylesheet', href: sonnerStyles },
]

[DiederikvandenB]

Same here, but dev did work, prod did not...

[Rodimusbot]

Just in case - sonner/dist/styles.css is not present at all. Version "1.4.41". Same for "1.5.0"

[bonellicious]

same

[kevlened]

The bundler for this project, tsup, says css imports are experimental. This may be outdated, as the latest esbuild docs don't mention this limitation. Updating tsup, rebuilding, and testing the new build is worth trying.

Another user ran into this in tsup, and his solution was to include the css in the build output.

[agcty]

With a vite project you don't need the linksfunction anymore. Just do import "./sonner.css" in root. You still have to copy the styles from the repo right now though.

[FilipLeonard]

Would love to see a proper fix for this one. It feels dirty more than hacky to have to manually copy the lib's styles.

In any case, very awesome library! Amazing to see the big 0 dependencies. Thanks!

[saaymeen]

Added sonner to my vite project and can confirm that some styles are working (shadow and border radius), but paddings around the container are completely missing.

[emilkowalski]

You can now import styles manually in case you are missing them. #446