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.

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 --dev remix-generate-css-links

• Using npm:

$ npm install --save-dev remix-generate-css-links

Setup

package.json

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

Using sass

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

Usage

app/components/SomeWickedComponent.tsx

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

// If you're using sass with the --sass flag, you would import them from ~/../<your-given-output-directory>.sass-css
import  "~/../.generated-css-links.sass-css/components/SomeWickedComponent.css" // <-- converted from <app dir>/components/SomeWickedComponent.scss

// 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 using 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 dir>/<your-given-output-directory>
• --sass: Compile your scss/sass files into /.sass-css

License

MIT