https://github.com/zgreen/postcss-elm-modules

Transpile CSS modules to Elm.
https://github.com/zgreen/postcss-elm-modules

css css-modules elm postcss postcss-plugin

Last synced: about 1 month ago
JSON representation

Transpile CSS modules to Elm.

• Host: GitHub
• URL: https://github.com/zgreen/postcss-elm-modules
• Owner: zgreen
• Created: 2017-07-03T12:45:18.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T21:44:06.000Z (almost 2 years ago)
• Last Synced: 2024-09-30T05:23:13.954Z (about 2 months ago)
• Topics: css, css-modules, elm, postcss, postcss-plugin
• Language: JavaScript
• Size: 115 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PostCSS Elm Modules

![Travis build status](https://travis-ci.org/zgreen/postcss-elm-modules.svg?branch=master)

Transpile [CSS modules](https://github.com/css-modules/css-modules) to [Elm](http://elm-lang.org/).

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

```bash

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

```

or

```bash

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`

```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

-- 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`

```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`

- `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

```js

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:

```css

@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.