zgreen/postcss-elm-modules

Transpile CSS modules to Elm.

PostCSS Elm Modules

Transpile CSS modules to Elm.

This plugin is useable, but should still be considered a work-in-progress. If you find a bug or have a question, file an issue!

Install

npm install --save-dev postcss-elm-modules

or

yarn add -D postcss-elm-modules

What does this plugin do?

This plugin creates valid Elm modules from CSS modules.

For example, consider the following CSS module:

example.css

.foo {
  color: tomato
}

.bar {
  color: gold
}

This plugin will then create an Elm module based on example.css, containing a record of the selectors and their locally-scoped versions:

Styles.elm

-- Elm CSS Module, generated by postcss-elm-modules
module Styles exposing (styles)


styles =
    { foo = "file__foo---2-9NY"
    , bar = "file__bar---7FSOM"
    }

You can then use these selectors much as you would when using CSS modules in JavaScript:

Main.elm

module Main exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Styles exposing (styles)

main =
    h1 [ class (styles.foo ++ " " ++ styles.bar) ] [ text "Hello, World." ]

Plugin arguments

This plugin takes a single object as an argument, with the following valid properties:

cssModules: Object<bool, string>

• cssModules.enabled: bool Enable CSS modules. Default true.
• cssModules.scopePattern: string The scoping pattern to use. Default '[name]__[local]---[hash:base64:5]'.

dir: string

Directory where the Elm module will be written. Default ''.

log: bool

Log the output to console. Default true.

moduleName: string

The name of the Elm module to write. Default 'styles'.

Example PostCSS config

module.exports = {
  plugins: [require('postcss-elm-modules')({
    cssModules: {
      enabled: true,
      scopePattern: '[name]__[local]---[hash:base64:5]'
    },
    dir: '',
    log: true,
    moduleName: 'styles'
  })]
}

atRule arguments

You may optionally set the moduleName and dir inline, using an atRule. For example:

@elmModule Foo src;
.foo {
  color: tomato
}

.bar {
  color: gold
}

This will write an Elm module Foo.elm at directory src/.

Try it out.

An example is available in this repo. Use the command yarn example or npm run example to try it out.

Justification

If you prefer authoring your styles in CSS rather than in Elm, and if you prefer the scoped selector approach offered by CSS Modules, consider giving this plugin a try.