How do I use @carbon/react with Remix?

[siennathesane]

I'm not a JS/TS expert, but Remix has been a lifesaver. I want to use the Carbon Design System by IBM, but the sass configuration I need is kicking my butt because I don't really understand how to use Sass outside of webpack (and even then, still not an expert)

The errors I'm getting are like this:

✘ [ERROR] Build failed with 180 errors:
app/styles/global.css:1:3087: ERROR: Could not resolve "~@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Cyrillic.woff2"
app/styles/global.css:1:3186: ERROR: Could not resolve "~@ibm/plex/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Light-Cyrillic.woff"
app/styles/global.css:1:3575: ERROR: Could not resolve "~@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Pi.woff2"
app/styles/global.css:1:3668: ERROR: Could not resolve "~@ibm/plex/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Light-Pi.woff"
app/styles/global.css:1:4272: ERROR: Could not resolve "~@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Latin3.woff2"
... [plugin css-file]

    app/root.tsx:21:25:
      21 │ import globalStyles from "./styles/global.css";
         ╵                          ~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:80:12:
      80 │       build.onLoad({
         ╵             ~~~~~~

    at setup (/Users/sienna/Development/ranger/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:80:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async handlePlugins (/Users/sienna/Development/ranger/node_modules/esbuild/lib/main.js:1326:9)

My {root}/styles/global.scss file only contains @use "@carbon/react";, and the Sass command I'm using is:

sass --load-path=node_modules/ --embed-sources --embed-source-map styles/:app/styles

The generated {root}/app/styles/global.css file contains a bunch of these url() definitions for the @ibm/plex font:

@font-face {
  font-display: "swap";
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  src: url("~@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Light-Pi.woff2") format("woff2"), url("~@ibm/plex/IBM-Plex-Mono/fonts/split/woff/IBMPlexMono-Light-Pi.woff") format("woff");
  unicode-range: "U+0E3F", "U+2032-2033", "U+2070", "U+2075-2079", "U+2080-2081", "U+2083", "U+2085-2089", "U+2113", "U+2116", "U+2126", "U+212E", "U+2150-2151", "U+2153-215E", "U+2190-2199", "U+21A9-21AA", "U+21B0-21B3", "U+21B6-21B7", "U+21BA-21BB", "U+21C4", "U+21C6", "U+2202", "U+2206", "U+220F", "U+2211", "U+221A", "U+221E", "U+222B", "U+2248", "U+2260", "U+2264-2265", "U+25CA", "U+2713", "U+274C", "U+2B0E-2B11", "U+EBE1-EBE7", "U+ECE0", "U+EFCC";
}

I did a bunch of digging into what webpack actually does, and it turns out the most useful thing it does is resolve all the imports URLs when Sass is being used because Sass doesn't resolve anything. I am at the end of my JS/TS ecosystem knowledge, and I could use an assist.

How do I consume @carbon/react with Remix?

[siennathesane]

As a potentially temporary workaround, I was able to get it mostly working if I did a global find and replace (s/~@ibm///unpkg.com/@ibm/g) of the generated scss code. At least now things render and I can keep moving along, but I would still love an assist from an expert 😄

[Otann]

I've managed to solve it by adding a key to disable font-face declarations (also note @import insetad of @use):

$css--font-face: false;
@import '@carbon/styles';

But also I've imported the fonts in the root.jsx file:

import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";

import carbonCss from "./styles/carbon.css";

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
  { rel: "preconnect", href: "https://fonts.googleapis.com" },
  {
    rel: "preconnect",
    href: "https://fonts.gstatic.com",
    crossOrigin: "anonymous",
  },
  {
    rel: "stylesheet",
    href: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap",
  },
  { rel: "stylesheet", href: carbonCss },
];

[coloredlambda]

Hey @Otann , this worked great for me but I am currently stuck at customising the theme. Have any idea how to pull that off?