How to support CSS in Remix?

Developer Support
1

I’m working through the todomvc demo using remix run. Remix handles css a bit differently than create-react-app, in that it prefers a link to import a stylesheet and as of today they don’t support css modules. So, I chose the css scheme and then manually imported all the files.

import footerStyles from '~/components/plasmic/copy_of_todo_mvc/PlasmicFooter.css'
import headerStyles from '~/components/plasmic/copy_of_todo_mvc/PlasmicHeader.css'
import taskStyles from '~/components/plasmic/copy_of_todo_mvc/PlasmicTask.css'
import todoAppStyles from '~/components/plasmic/copy_of_todo_mvc/PlasmicTodoApp.css'
import buttonStyles from '~/components/plasmic/copy_of_todo_mvc/PlasmicToggleButton.css'
import mvcStyles from '~/components/plasmic/copy_of_todo_mvc/plasmic_copy_of_todo_mvc.css'
import defaultStyles from '~/components/plasmic/plasmic__default_style.css'

export const links: LinksFunction = () => {
  return [
    { rel: 'stylesheet', href: defaultStyles },
    { rel: 'stylesheet', href: todoAppStyles },
    { rel: 'stylesheet', href: mvcStyles },
    { rel: 'stylesheet', href: buttonStyles },
    { rel: 'stylesheet', href: footerStyles },
    { rel: 'stylesheet', href: headerStyles },
    { rel: 'stylesheet', href: taskStyles },
  ]
}
2

I wonder if there is a better way to do this with remix.

3

I also noticed that some of the compiled files have these css import statements, that are based on assumptions that remix doesn’t support. Perhaps there would be a way to turn that off.

Screen Shot 2022-04-22 at 14.47.41 .png
Screen Shot 2022-04-22 at 14.47.41 .png1826×296 51.4 KB

4

Yeah unfortunately remix doesn’t support importing CSS yet.

You could however use this simple workaround which is to have a continuous build step that compiles all the disparate CSS into a single CSS. This example repo is showing how to do it using CSS modules, which plasmic can also emit, but you can do it even more simply using plain CSS.

https://github.com/jacob-ebey/remix-css-modules

5

This is a pretty cool idea, I’ll check it out

6

Thanks!