elm-css-modules

elm-css-modules compiles CSS modules written in CSS, Sass, or SCSS to plain CSS files and generates Elm definitions for every rule.

?

elm-css-modules compiles this:

examples/simple/src/Style/Thing.m.css

.thing {
  font-size: 32px;
}

.red {
  composes: thing;
  color: red;
}

.green {
  composes: thing;
  color: green;
}

into these:

examples/simple/src/Style/Thing.css

/* Generated by elm-css-modules. */

._3jx9u6u1 {
  font-size: 32px;
}

._3EGu-319 {
  color: red;
}

._3FzV0jPC {
  color: green;
}

examples/simple/src/Style/Thing.elm

module Style.Thing exposing (..)

-- Generated by elm-css-modules.

import Html exposing (Attribute)
import Html.Attributes exposing (class)


thing : Attribute msg
thing =
    class "_3jx9u6u1"


red : Attribute msg
red =
    class "_3EGu-319 _3jx9u6u1"


green : Attribute msg
green =
    class "_3FzV0jPC _3jx9u6u1"

and you can use it like this:

examples/simple/src/Main.elm

module Main exposing (main)

import Browser
import Html exposing (div, text)
import Style.Thing


main : Program () () ()
main =
    Browser.staticPage <|
        div []
            [ div [ Style.Thing.red ] [ text "Red" ]
            , div [ Style.Thing.green ] [ text "Green" ]
            ]

Why?

This package is for you if you want:

1. Modular CSS -- no more name conflicts, no more thinking about coming up with globally unique names.
2. No more typos -- every class is compiled into an Elm value which the Elm compiler verifies to exist at compile time.
3. Static CSS output -- you get a bunch of plain CSS files as output that you can concatenate and minify with your favorite bundler.

More information about CSS Modules here.

Install

Yarn

$ yarn global add elm-css-modules
# or
$ yarn add elm-css-modules

NPM

$ npm install --global elm-css-modules
# or
$ npm install --save elm-css-modules

Usage

1. Create CSS files with .m.css, .m.sass, or .m.scss extension in src/Style/, e.g. src/Style/Button.m.scss.

2. Run elm-css-modules src to compile once or elm-css-modules src --watch to watch and compile on every change.

3. Each .m.{css,sass/scss} file will be compiled into a .css and .elm file in the same directory with the same name.

4. Import and use the Html.Attribute values exported by the Elm file in your code and include the CSS file into your application using your preferred asset bundler or just add a <link rel="stylesheet" href="…"> to your HTML file.

License

MIT