1.0.0 • Published 10 months ago
@ryannhg/css-in-elm v1.0.0
@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
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.
1.0.0
10 months ago