A CSS preprocessor where you write Elm code and get .css files. Inspired by the excellent Sass, Stylus, and CSS Modules.

Try it out! (make sure you already have elm installed, e.g. with npm install -g elm)

$ npm install -g elm-css
$ git clone https://github.com/rtfeldman/elm-css.git
$ cd elm-css/examples
$ elm-css src/Stylesheets.elm
$ less homepage.css

Isn't it a pain when you want to rename a CSS class or ID, but can't be sure that the rename wouldn't break things? Or when it turns out the reason something wasn't displaying as expected was that you had a typo in the class name? How about when you load multiple stylesheets onto the same page and some of the class names overlap?

Wouldn't it be sweet if those problems went away?

elm-css lets you:

1. Write Elm code and get out a .css file
2. Share code between your render logic and your CSS stylesheets, so you can easily keep identifier names and URLs synchronized
3. Use union types instead of strings for class names, IDs, and animation names, so typos will result in compile errors instead of bugs
4. Automatically namespace all your classes, ids, and animation names to avoid name conflicts between stylesheets.
5. Assemble your stylesheets by writing normal Elm code, so you have access to your full suite of programming tools. elm-css doesn't need a special notion of "parameterized mixins" because you can already write arbitrary Elm functions...and not just to parameterize mixins, but to parameterize anything!

Here's an example:

css =
  (stylesheet << namespace "dreamwriter")
    [ body
        [ overflowX auto
        , minWidth (px 1280)
        ]

    , (.) Hidden
        [ display none ]

    , (#) Page
        [ backgroundColor (rgb 200 128 64)
        , color (hex "CCFFFF")
        , width (pct 100)
        , height (pct 100)
        , boxSizing borderBox
        , padding (px 8)
        , margin zero
        ]

    , (ul &. NavBar)
        [ margin zero
        , padding zero

        , with li
            [ (display inlineBlock) |> important
            , color primaryAccentColor
            ]
        ]
    ]

primaryAccentColor =
  hex "ccffaa"

The above is vanilla Elm code. Hidden and Page are backed by union types, so if they get out of sync with your view code, you'll get a nice build error. $, #, ~, and the like are custom operators.

The above elm-css stylesheet compiles to the following .css file:

body {
    overflow-x: auto;
    min-width: 1280px;
}

.dreamwriterHidden {
    display: none;
}

#dreamwriterPage {
    background-color: rgb(200, 128, 64);
    color: #CCFFFF;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 8px;
    margin: 0;
}

ul.dreamwriterNavBar {
    margin: 0;
    padding: 0;
}

ul.dreamwriterNavBar > li {
    display: inline-block !important;
    color: #ccffaa;
}