babel-plugin-transform-styl-modules

Transforms "styl" tagged template literals into css modules. 🚀

Write your stylus code this way:

  const css = styl`
    .your-class
      background: tomato
  `

And it will be transpiled into:

  const css = {
    'your-class': '_your-class_<hash>'
  }

It exports the generated css into the <dest>/.modules folder where your .babelrc is found.

Usage

For an explanation of css-modules go here and for stylus-lang here.

Install

1. Install via yarn or npm

yarn add --dev babel-plugin-transform-styl-modules

npm install --save-dev babel-plugin-transform-styl-modules

2. Add to babel configuration (usually in .babelrc)

{
  "plugins": [
    ["transform-styl-modules", { "dest": "any/dir" }]
  ]
}

The "dest"-parameter is optional. You can use it to pipe the generated output into your watch-directory for your build process.

Basic example

Write some front-end component:

// cwd/path/to/component/Icon.js

import {h} from 'your-favorite-framework' // react/vue whatever

const css = styl`
  .icon
    fill: currentColor
    // ... rest of your styles
`

export default ({href}) =>
  h('svg', {class: css.icon},
    h('use', {href: href}))

After transpiling:

// CWD/path/to/component/Icon.js

import {h} from 'your-favorit-framework' // react/vue whatever

const css = {
  'icon': '_icon_11j4s_1'
}
`

export default ({href}) =>
  h('svg', {class: css.icon},
    h('use', {href: href}))

Generates the following files:

// CWD/any/dir/.modules/path/to/component/Icon.css

._icon_11j4s_1 {
  fill: currentColor
}

// CWD/any/dir/.modules/bundle.styl

@require "./**/*.css"

Include these files into your build pipeline.

Limitations

Global styles are currently ignored 😢

License

MIT