Bundling CSS

👨‍💼 While we build out our application, we'll probably have some need to use a component library that requires some CSS be added to the application. One or two of these are not a big deal, but our root.tsx links export could get pretty big if we do this for a lot of components like this.

So, Remix allows you to import CSS files that are bundled automatically. It's pretty simple:

import stylesheetUrl from './styles1.css' // <-- you use the URL in the links export
import './styles2.css' // <-- this will be bundled

So, if you just import the CSS file without an "import clause" (the stylesheetUrl variable in the example above), it will be bundled for you.

However, we are still responsible for everything on the page between the <html> and the </html> tags, so if we want the bundled CSS file on the page then we need to make sure we add it to the links. Remix gives us access to that URL through a special package called @remix-run/css-bundle:

import './styles2.css'
import './styles3.css'
import { cssBundleHref } from '@remix-run/css-bundle'

The contents of styles2.css and styles3.css will appear within the file that is referenced by cssBundleHref. So, we can add that to our links export.

If you don't have any such imports, then cssBundleHref will (correctly) be undefined so the browser doesn't load an empty file, so you'll want to handle that case.

🧝‍♂️ I've added an import to a static CSS file just to test that things work in this exercise. Check my changes

📜 Remix Styling Docs for CSS Bundling

01. Styling/05. Bundling CSS (💪 problem)

Bundling CSS