A Parcel plugin for generating Elm file for your CSS Modules automatically.

Installation

npm install parcel-plugin-elm-css-modules

Parcel will use any installed package that begins with parcel-plugin- as plugin automatically.

Usage

You need to enable CSS Modules. To do this, create a .postcssrc file with "modules": true in it, e.g.:

{
  "modules": true
}

You need to import the css file in your build chain to have it processed (e.g.: a <link rel="stylesheet" type="text/css" href="index.css"> at your index.html).

By default, all files will be stored in a autogenerated folder at where parcel is being run at. At the moment it is not possible to customize the output folder.

Make sure to add the autogenerated folder to your elm.json file, e.g.:

{
  "type": "application",
  "source-directories": ["src", "autogenerated"],
  "elm-version": "0.19.0",
  ...
}

It is recommended to add the autogenerated folder to your .gitignore.

Examples

This index.css at the same dir of the entry file (commonly index.html):

.myClass {
  display: block;
}

.another-class {
  display: block;
}

:global(.non-localized-class) {
  background-color: rebeccapurple;
}

will produce this Index.elm file:

module Index exposing (..)

-- This file was autogenerated by parcel-plugin-elm-css-modules.
-- Do not edit it manually.


myClass : String
myClass =
    "_myClass_84803"


anotherClass : String
anotherClass =
    "_another-class_84803"

And this styles/sass-example.scss:

.myClass {
  display: block;

  .another {
    display: block;
  }
}

.another-class {
  display: block;
}

will produce this Styles/SassExample.elm file:

module Styles.SassExample exposing (..)

-- This file was autogenerated by parcel-plugin-elm-css-modules.
-- Do not edit it manually.


myClass : String
myClass =
    "_myClass_a11ed"


another : String
another =
    "_another_a11ed"


anotherClass : String
anotherClass =
    "_another-class_a11ed"