Declare a CSS module that you wish to use in your Elm application.

classes = CssModule "./styles.css"
    { someClass = ""
    , anotherClass = ""
    }

The Webpack loader recognises this constructor in the JavaScript code generated by the Elm compiler. The CSS filename must be a literal string.

The CSS file path is relative to either 1) a Webpack module root directory, or 2) the JavaScript file in which your top-level Elm module is referenced (in which case the path should begin with with ./).

Each of the classes in the list may be set to any string, but it’s probably easiest just to leave them as empty strings, since these will be replaced with the actual class names by the Webpack loader at build time.

Warning: Currently, if you list a class that is not defined in the CSS module, it will receive a value of undefined at runtime, which is likely to result in class="undefined".

Use a CSS module class as an HTML class attribute’s value.

let
    classes = CssModule "./styles.css"
        { someClass = "" }
in
    Html.div [ class .someClass classes ]

Combine a list of CSS module classes as an HTML class attribute’s value.

let
    classes = CssModule "./styles.css"
        { message = ""
        , important = ""
        }
in
    Html.div
        [ classList
            [ (.message, True)
            , (.important, message.isImportant)
            ]
            classes
        ]

Access the raw String for a CSS module class.

let
    classes = CssModule "./styles.css"
        { someClass = "" }
in
    toString .someClass classes