webbhuset/css

Runtime for the [css| ... |] blocks supported by the webbhuset/compiler fork of the Elm compiler. The compiler parses the CSS, infers a Css.Stylesheet record type from its class selectors, custom properties, and @keyframes, and writes the stylesheet to a sidecar .css file. This package is the consuming side:

import Css
import Html exposing (Html, div, h2, text)


sheet =
    [css|
        @property --progress { syntax: "<percentage>"; inherits: false; }

        .bar {
            width: var(--progress);
            transition: width 0.2s;
        }
    |]


view model =
    let
        c = Css.classes sheet
    in
    div
        (Css.class c.bar :: Css.vars sheet { progress = Css.pct model.progress })
        []

Remove .bar from the CSS and every c.bar becomes a compile error.

Installing

This package contains kernel code, so it is consumed as a git-dependency:

"dependencies": {
    "direct": {
        "webbhuset/css": "1.0.0"
    }
},
"git-dependencies": {
    "webbhuset/css": "git@github.com:webbhuset/elm-css.git"
}

Custom properties on elements need a patched elm/virtual-dom

Css.vars sets custom properties as element styles. The stock elm/virtual-dom assigns styles with element.style[key] = value, which browsers silently ignore for --custom properties; they require style.setProperty. The forked elm/virtual-dom 1.100.502 makes that change, and elm init in the compiler fork already pins it, so a project started that way needs nothing further. Everything except Css.vars works with the stock virtual-dom.