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.
For an explanation of css-modules go here and for stylus-lang here.
- Install via yarn or npm
yarn add --dev babel-plugin-transform-styl-modules
npm install --save-dev babel-plugin-transform-styl-modules
- 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.
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.
Global styles are currently ignored 😢
MIT