CSS Modules PPX


#1

In my projects I’m using CSS Modules. Currently I’m doing the following:

type css = {. "foo": string};
[@bs.module] external css: css = "./Foo.css";

This works as intended and allows me to assign generated class names to components.

I’d like to write a PPX to automate the process:

let css = [%import_css "./Foo.css"]

The PPX would parse the CSS file to extract the classes (in a similar fashion to how the original CSS modules does) and emit something like what I’m currently writing.

Is this possible to do? Has something similar already been done? I didn’t manage to find anything myself. Is a PPX the right tool for this?


#2

This is possible IMHO. But in your current proposal, there would be a huge problem with cache invalidation. bsb won’t keep track of changes in your Foo.css because it won’t analyze Js imports


#3

That’s a very good point. Any ideas of possible workarounds?


#4

There is no easy way to do this right now without more works in bsb. currently bsb supports generators, you can tell bsb to generate code based on css files. You can see usage of it here https://rrdelaney.github.io/reason-dre/#build-system-integration

but that’s a tons of manual works for defining generators


#5

It’s possible to solve that problem by generating files.

I’ve created css-loader drop-in replacement for reasonml.

It creates definition files for CSS modules.

Here’s the link: https://github.com/sainthkh/reason-css-modules-loader

Because of the webpack loader process, you need to save file to generate reasonml css definition files.

I’m planning to make another version of this file generator solving that problem after finishing my GraphQL library.