@ryannhg/css-in-elm

@ryannhg/css-in-elm

Write normal CSS, then generate an Elm module with all your class names.

Installation

npm install -g @ryannhg/css-in-elm

Usage

Build command

Generates an .elm file once, then exits

# css-in-elm build <input> <output>
css-in-elm build main.css dist/Css.elm

Watch command

Generates an .elm file once, then listens for changes in the input file, rerunning as edits come in!

# css-in-elm watch <input> <output>
css-in-elm watch main.css dist/Css.elm

How it works

1. Your CSS file is parsed into a list of class names

   .row {
     display: flex;
   }
   
   .gap-sm { gap: 0.5rem; }
   .gap-md { gap: 1rem; }
   .gap-lg { gap: 2rem; }
   

   [ "row", "gap-sm", "gap-md", "gap-lg" ]
   

2. Those classnames become functions in a generated Elm module

   -- 🤖 Generated by @ryannhg/css-in-elm ✨ --
   
   
   module Css exposing (row, gap_sm, gap_md, gap_lg)
   
   import Html
   import Html.Attributes
   
   
   row : Html.Attribute msg
   row =
       Html.Attributes.class "row"
   
   
   gap_sm : Html.Attribute msg
   gap_sm =
       Html.Attributes.class "gap-sm"
   
   -- ...
   
   

3. You can import those generated functions instead of using String values directly.

   -- BEFORE
   import Html exposing (..)
   import Html.Attributes exposing (class)
   
   main =
       div [ class "row gap-lg" ] [ text "Hello!" ]
   

   -- AFTER
   import Css exposing (..)
   import Html exposing (..)
   
   main =
       div [ row, gap_lg ] [ text "Hello!" ]
   

4. If you delete a CSS class later, the Elm compiler will remind you to remove the usage.

   -- NAMING ERROR --------------------------------------- src/Main.elm
   
   I cannot find a `gap_lg` variable:
   
   5|     div [ row, gap_lg ] [ text "Hello!" ]
                     ^^^^^^
   These names seem close though:
   
       gap_md
       gap_sm
       label
       map
   
   Hint: Read <https://elm-lang.org/0.19.1/imports> to see how `import`
   declarations work in Elm.