cultureamp / elm-css-modules-loader / CssModules

This library lets you reference classes defined in CSS modules in your Elm views, and then have the actual class names injected into your Elm modules by Webpack at build time.

css : String -> classes -> Helpers classes msg

Use a CSS module in your Elm application.

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

view =
    div [ styles.class .someClass ]

This function returns a record, containing functions for accessing the CSS module’s class names. See Helpers for a description of these functions.

The CSS filename’s 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 ./).

Important: The CSS filename must be a literal string.

Each of the classes in the list must have the value of the corresponding class name, which will be substituted for a require of the CSS module 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".


type alias Helpers classes msg =
{ class : (classes -> String) -> Html.Attribute msg
, classList : List ( classes -> String
, Basics.Bool ) -> Html.Attribute msg
, toString : (classes -> String) -> String 
}

A set of functions for accessing the class names in a CSS module.

class and classList are drop-in replacements for their counterparts in Html.Attributes, except they take a record accessor to specify a class name from your CSS module (e.g. .someClass).

view =
    div
        [ classList
            [ ( .someClass, True )
            , ( .anotherClass, False )
            ]
        ]

toString lets you obtain the raw String for a given class name, which you might need if you're mixing CSS Module classes together with plain string class names.