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 }]
    : []),
]