Q: Is it possible for this to be made into a cljc?

[groundedsage]

Firstly I would like to say thank you! I've been waiting for someone to bring this to the Clojure ecosystem.

I'm currently working on generating static sites to host on Netlify using Rum and Boot. Having CSS Modules is the last piece of the puzzle to the devflow I am striving for. Is this something on the road map? How long would it take? If it is possible to come soon I am prepared to start using it now and allow my site to be used as an example.

[Matthieu Béteille]

Hi, thank you for the kind message 👍

This is something really quick to add. I'll have a look and try to implement this today or tomorrow.

Correct me if I am wrong, but you'll need to get the generated css as well as the map between selectors and localised selectors.

I see two solutions here:

1. I can reuse the same macro to check if the macro is supposed to produce clj code or cljs code.
   If clj: the macro will define a map containing both the generated css, and the map between selectors
   If cljs: the macro will behave as it is now (injecting the css and only defining the map between selectors).

2. I can create two different macros, one for each use case.

For now, I'd go for the first solution, would that be good enough for you to get started?

[groundedsage]

I believe the first one would be fine. I'm still new to the programming and web space (my background is in design). This is what I will be using it for which currently only needs the code to be rendered serverside https://github.com/CommonCreative/vbn-redesign.

[Matthieu Béteille]

I made the change and created a PR #8

I just deployed to clojar the new SNAPSHOT, you can try using this version
[cljs-css-modules "0.2.1-SNAPSHOT"].

If you now use the macro from clojure, it will define a map containing both the generated css and the map between original selectors and localised selectors.

For instance:

(defstyle style
  {:pretty-print? false}
  (at-keyframes "animation-1"
                [:from {:top "0px"}]
                [:to {:top "200px"}])
  (at-keyframes "animation-2"
                [:from {:top "0px"}]
                [:to {:top "250px"}])
  ["@keyframes animation-3" [:from {:top "0px"}]
                            [:to {:top "250px"}]])

In this case style would be the following map:

{:map {:animation-1 "animation-1--G__1524"
       :animation-2 "animation-2--G__1524"
       :animation-3 "animation-3--G__1524"}
 :css "@keyframes animation-1--G__1524{from{top:0}to{top:200px}}@keyframes animation-2--G__1524{from{top:0}to{top:250px}}@keyframes animation-3--G__1524{from{top:0}to{top:250px}}"}

I hope this will help, if you could try it and then give me your feedback that would be awesome!

[Matthieu Béteille]

This is now part of version 0.2.1. Closing the issue