remix-generate-css-links

remix-generate-css-links automatically generates links for your imported .css files. You get the convenience of importing css the way you do in regular React projects and still get the benefits of exporting links in your Remix.run project, the Remix way.

Screenshot

Screenshot
Screenshot

Screenshot

Why would I use this?

  • You want to use Remix, but you don’t love all the options you have for styling, detailed here: https://remix.run/docs/en/v1/guides/styling
  • You may find it tedious to track and write all of the css imports and link exports across your Remix components – especially if you have many nested components with independent styles.
  • You appreciate the benefits of the Remix link system and you want to preserve those benefits, but you want an easier developer experience.
  • You don’t necessarily want to use Tailwind, or export the same large single css file on every page.

Installation

  • Using yarn:
$ yarn add remix-generate-css-links
  • Using npm:
$ npm add remix-generate-css-links

Setup

package.json

{
  "scripts": {
    "build": "remix-generate-css-links && remix build",
    "dev": "concurrently \"remix-generate-css-links -w\" \"remix dev\""
  }
}

Usage

app/components/SomeWickedComponent.tsx

...
import './LocalStyle.css'; // <-- Import styles however you want. If you want, you can just import like this for side effects.
import '../../SomeOtherStyle.css';

// That's it. There's no need to export these as links like you would below. Though if you did, it would still work.
// export const links = () => {
//   return [
//     {
//       rel: "stylesheet",
//       href: LocalStyle
//     }
//   ]
// }

...

app/routes/some-sweet-as-route

  • Basic

...
// Generated files live in the app/.generated-css-links directory, unless you specify another directory the --outdir / -o flag.
// The directory structure is the same as the app/routes, with the ".generated-links" extension OR ~/.generated-css-links/<route-path>.generated-links
// So in this file, you would get its generated css links like below:
import { links as _links } from "~/.generated-css-links/routes/some-sweet-as-route.generated-links"

// Then you can export the links.
export const links = () => [..._links()];

// If you want to, you could skip importing and simply export the links directly.
export { links } from "~/.generated-css-links/routes/some-sweet-as-route.generated-links"

// You can also import css into this route file and it will safely be added to its own exported links
import "SomeSweetAsRouteStyle.css"
  • Merge links

...
// Additionally, you can use mergeOtherLinks to merge additional links to the exported route links without duplicating them.
import { mergeOtherLinks } from "~/.generated-css-links/routes/some-sweet-as-route.generated-links"

export const links: LinksFunction = () => {
  return mergeOtherLinks([
    {
      rel: "stylesheet",
      href: globalStylesUrl
    },
    {
      rel: "stylesheet",
      href: globalMediumStylesUrl,
      media: "print, (min-width: 640px)"
    },
    {
      rel: "stylesheet",
      href: globalLargeStylesUrl,
      media: "screen and (min-width: 1024px)"
    },
    {
      rel: "apple-touch-icon",
      href: appleTouch
    },
    {
      rel: "stylesheet",
      href: "https://fonts.googleapis.com/css2?family=Days+One&display=swap",
    },
    {
      rel: "stylesheet",
      href: "https://fonts.googleapis.com/css2?family=Heebo:wght@900&display=swap",
    }
  ]);
};

Command Line Options

  • -w: Watch for changes and automatically rebuild.
  • -o: Change the output directory for the generated files. It will live at app/<your-given-output-directory>

License

MIT