Support for CSS Modules

[chaance]

CSS Modules are a widely used method for dealing with scoped selectors in JavaScript projects, and in React they are often used as the basis for component-level styles. Many frameworks support them out-of-the-box, and Remix plans to do the same.

This discussion will be used to track the development of CSS Modules support as it is implemented. There are several pieces to the CSS Modules puzzle, and we'll likely roll out support for them in phases.

Another thing to consider is our approach in loading styles on the page. Many frameworks accomplish this by injecting a <style> tag into the head of the document as CSS modules are discovered (this may happen on the client or on the server). We prefer to generate static stylesheets, as static assets are easier to cache and this approach aligns more closely with our philosophy overall (more on that here). We could either generate a single stylesheet with all module styles defined in one place, or we could generate one stylesheet per route since we'll have the data for CSS Modules in the assets manifest. In the beginning we're likely to start with a global stylesheet as it simplifies both the implementation and the user API.

For reference: https://github.com/css-modules/css-modules

More to come, and questions/feedback welcome. 🚀

[dagda1]

I wonder if adding support for css modules could also open up support for vanilla-extract. There is a discussion about this in vanilla-extract. Vanilla extract does use a babel-plugin which is another problem.

[chaance]

Absolutely. We still hope to support it, and it's come up several times internally. It's on our roadmap after we get a few other styling priorities knocked out.

[didimedina]

Any updates on this? Really eager to try remixing vanilla-extract 🤣

[chaance]

No updates. You'll see it here when that changes.

[cherscarlett]

I would really, really like to move to remix, but this is a huge barrier for me. I'm considering developing a workaround, but would love to see this available out-of-the-box. I think adoption would soar from existing React projects that already utilize it.

[CanRau]

just in case, here's a workaround example https://github.com/jacob-ebey/remix-css-modules

[0916dhkim]

@CanRau Can you briefly explain the workaround? I took a look at the repo, but I can't find where the workaround is.

[kiliman]

It's in postcss.config.js. After postcss-module transforms the CSS from ./styles/*.css to CSS module format, it generates a JSON file with the class names.

module.exports = {
  plugins: [
    require("postcss-modules")({
      getJSON: async (cssFilename, json, outputFilename) => {
        console.log(cssFilename, json, outputFilename);
        await fsp
          .mkdir(path.dirname(outputFilename), { recursive: true })
          .catch(() => {});
        await fsp.writeFile(
          `${outputFilename.replace(/\.css$/, ".json")}`,
          JSON.stringify(json)
        );
      },
    }),
  ],
};

// package.json
"scripts: {
  "build:css": "postcss styles/**/*.css --dir app/styles --env production",
  "dev:css": "postcss styles/**/*.css --dir app/styles -w",
}

CSS you write (outside app folder)

/* ./styles/index.css */
.container {
  color: darkslategrey;
  background-color: lightgrey;
}

CSS and JSON that is generated (inside app folder)

/* generated file ./app/styles/index.css */
._container_162o7_7 {
  color: darkslategrey;
  background-color: lightgrey;
}

// generated file ./app/styles/index.json
{"container":"_container_162o7_7"}

Consume CSS Modules in your route

// routes/index.tsx
import stylesUrl from "~/styles/index.css"; // generated css
import styles from "~/styles/index.json";   // generated json
// export the stylesheet
export let links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: stylesUrl }];
};
// use the generated classname from json file
export default function Index() {
  return <div className={styles.container}></div>
}

[0916dhkim]

I see. Thank you so much for the explanation! That makes sense 💯

[dagda1]

isIs vanilla-extract now possible because it does not require babel now?

[convcha]

https://github.com/orgs/remix-run/projects/5/views/1
No CSS Modules support in roadmap😢

[machour]

@jere-co Remix for you then? https://github.com/remix-run/examples/tree/main/vanilla-extract

[jere-co]

@machour Cheers. That's the same approach that markdalgleish has in his remix-vanilla-extract-prototype - unfortunately quite serious tradeoffs there especially when the app grows. Hoping to see an official support soon, and confident it'll happen with the recent acquisitions.

[penx]

the acquisition of Mark? 😄

[sergiodxa]

That's the same approach that markdalgleish has in his remix-vanilla-extract-prototype

That's because markdalgleish was the original author of the example

[markdalgleish]

@jere-co I'm keen to hear more from you about what an ideal Vanilla Extract + Remix integration would look like. As you said, that example I made is definitely not that ideal.

[MichaelDeBoey]

Formalized in #4542