elm-classname

A brief module for custom class attributes. It is usefull when using with CSS modules.

Say, you have a CSS file generated by CSS modules:

.prefix-by-css-modules__foo {
  color: red;
}

.prefix-by-css-modules__foo .prefix-by-css-modules__bar {
  background-color: blue;
}

.prefix-by-css-modules__foo .prefix-by-css-modules__baz {
  border: solid 2px pink;
}

Hey, it's frustrating to pass Elm the full class names:

import Html exposing (Html, div, text)
import Html.Attributes exposing (class)

view : () -> Html msg
view _ =
  div
    [ class "prefix-by-css-modules__foo"
    ]
    [ div
        [ class "prefix-by-css-modules__bar prefix-by-css-modules__baz"
        ]
        [ text "bar"
        ]
    ]

It's time to use elm-classname library:

import Html exposing (Attribute, Html, div, text)
import Html.Attributes.Classname exposing (classWith)

view : () -> Html msg
view _ =
  div
    [ class "foo"
    ]
    [ div
        [ class "bar baz"
        ]
        [ text "bar"
        ]
    ]


class : String -> Attribute msg
class =
  classWith (\name -> "prefix-by-css-modules__" ++ name)