Write normal CSS, then generate an Elm module with all your class names.
npm install -g @ryannhg/css-in-elm
Generates an .elm
file once, then exits
# css-in-elm build <input> <output>
css-in-elm build main.css dist/Css.elm
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
-
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" ]
-
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" -- ...
-
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!" ]
-
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.