CSS for React components – shocking lack of support

[fredboyle]

What version of Remix are you using?

1.7.5

Steps to Reproduce

Import any React components library that doesn't have all its CSS inlined. Where components use standard *.css file imports for example.

How are we to use Remix and leverage component libraries when something as basic as CSS doesn't function as it does under most standard React contexts? Are we seriously to return to generating monolithic CSS files?

Are React component libraries required to adapt to include some form of build artifact or component architecture to adapt when in a Remix context? That's a heavy burden to place on component creators.

It definitely feels bad that Remix hasn't been built to function with existing React component libraries out of the box.

It would be great to have greater transparency into what the Remix team is doing to address this massive functionality gap. The community wants to help but we need more information please.

Expected Behavior

Importing and using a React component should render using its imported CSS that is built into the component.

Actual Behavior

Component styles are not included at all even though they are part of the ESM/CJS module.

[jacob-ebey]

A few notes:

1. import "./style.css" isn't a "standard" import. Find me a runtime that supports this. It requires bundlers to understand them and ONLY work well in client only scenarios where the bundler can add a little script that just dumps everything in the head at runtime.
2. Component libs should be bundled and ship a stand-alone stylesheet you can import and add to a links() export.
3. We've been very clear on our CSS approach: Use the platform.
   • links() export map directly to <link rel="stylesheet"> elements.
   • The react team themselves say "use stylesheets"
4. I'd argue there's no new burden put on library authors. Library authors should be bundling into a format that doesn't require a subsequent bundler integration otherwise you aren't shipping a library, you're shipping source code.

[fredboyle]

I understand these viewpoints but requiring the consuming developer to import the CSS for each component is a poor developer experience and kills the whole point of a self contained component.

Having to import the CSS and the component means more burden placed on the consuming developer, and an extra possible point of failure just to use a component.

If the library already contains the CSS all bundled up, compiled, and ready to go then there is zero burden. Having to not only make the CSS available for each component, or as a monolithic CSS file, is a burden on the library creator. It kills the simple import experience completely.

In other environments the CSS for components just functions, such as in create-react-app, Storybook, and others. Not so in Remix.

Remix should be able to deliver a similar "out of the box" ease of use. Whether it be with some form of automated import of the component specific CSS file or some other mechanism. Consuming developers shouldn't need to think about multiple imports to use a single self contained component.

[jacob-ebey]

In other environments the CSS for components just functions, such as in create-react-app, Storybook, and others. Not so in Remix.

See my first bullet above. These are all client only environments where dumping into the head is acceptable. This is something we've deemed unacceptable in Remix as it breaks a lot of things:

• styles can no longer be unloaded when they are not applicable to the rendering routes
• the framework / bundler now has magic to build a context based on the requested routes per request that would have to auto-add styles to the head. You have now lost control over your document structure.
• style ordering is inherently broken with the import "./some-style.css" model, see one of the many open webpack / vite / rollup open issues
• do we inline the imported styles in the head or do we introduce a resource like route that serves stylesheets with the extracted styles required for the render context? is this hidden by the framework or something you have to expose through a route? How does one handle this in a non-node env? What about serverless env where you don't have context shared between requests?

We are planning to release an example of how you could piece together your own bundler requirements with Webpack while still utilizing Remix conventions / libraries. Sounds like this is what you want.

[jacob-ebey]

UX > DX

[chaance]

We have an examples repo where we show you how to implement some of the popular CSS-in-JS libraries. We also discuss styling in our docs and talk about the tradeoffs with our approach vs. others in the React community. We do have plans for broader styling support, and there will be workarounds for those using other bundlers coming soon.

[raghavbk]

@jacob-ebey I am also stuck here, we have an in-house component library that internally uses antd and react-loading-skeleton and imports CSS from these libs. Now if I try to use my component library in the remix app it breaks. How to handle these situations

Ex:

component-lib
  Skeleton.tsx
  import 'react-loading-skeleton/dist/skeleton.css';

Now if i try to use component lib in remix app it's falling

[raghavbk]

any help here

[universse]

hi. you can create a css file that imports those libs' css, then include it in the document via the links api.

[shainegordon]

I am consuming a UI library created by an internal UX/CX team, which assumes a client side bundler, so the CommonJS module looks like this

require('./dist/styles.css'); // this line will cause a remix build error
module.exports = require('./dist/commonjs.cjs');

I ended up creating a NodeJS script, which runs in the npm dependencies script, essentially strips the css require, and put's it in a file that is consumed by root links

file ends up looking like this

import buttonCssHref from '@company/ui-library-button/dist/styles.css';
import textAreaCssHref from '@company/ui-library-textarea/dist/styles.css';

export const links = [
    { rel: 'stylesheet', href: buttonCssHref},
    { rel: 'stylesheet', href: textAreaCssHref},
]

This is obviously not ideal, but at least I don't need to remember to manually import the stylesheet into every route/component that needs it.

Ideally, I need to work with this team to make this library Remix compatible

[shainegordon]

and now I have come to the conclusion that I am an idiot, and didnt read the documentation 100% accurately....

https://remix.run/docs/en/1.19.3/guides/styling#css-side-effect-imports

This is CSS Side-Effect imports, and I am 99% sure I did actually try this before, but maybe I got the regex wrong.

After reading that the docs say For example, to use React Spectrum, I had to go try this myself, and see how react-spectrum is working internally. Sure enough, it is doing the same thing - require('path/to.css')

upon adding serverDependenciesToBundle correctly, remix is building (without my script) and the component styles are loaded by css-bundle

[tchak]

I think that it’s a valid point that to use some of the most well known UI React libraries in remix (spectrum, chakra, mui, antd?) is at best convoluted and at worst (spectrum) impossible. I very much understand why it’s so and very good reasons behind remix design. But it’s still very frustrating. I am also not sure what is the recommended way for authors of component libraries to ship css in a way that doesn't require to manually deal with each component css. I guess the solution might be one of the newer css-in-js at build time solutions... But I am not sure how it supposed to plug in to remix compiler to emit the right css for each route.

[machour]

FYI, we're actively working on supporting CSS modules, see here: #4631

[greendesertsnow]

Can you guys please fix this issue? Resistance is futile.
This a major step back for many of us newcomers.
I'm shocked as well. What is this...

[machour]

We are actively working on this, checkout our roadmap.