hyperscript-css-modules-injector v0.1.1
hyperscript-css-modules-injector
Automatically transform this:
import h from 'preact-hyperscript-h'
import style from './style.styl'
h('div.class', {}, ...)
into this:
import h from 'preact-hyperscript-h'
import style from './style.styl'
h(`div.class.${style['class']}`, {}, ...)
with this webpack loader!
It adds CSS Modules's classnames exported from style file automatically to the hyperscript's tag (1st) argument.
Install
npm i hyperscript-css-modules-injector
Usage
In your webpack.config.js:
{
loaders: [{
test: /\.js$/,
include: sourceDir,
loader: [
'babel-loader',
'hyperscript-css-modules-injector',
],
}]
}
In your component
├───index.js
└───style.styl
Make sure your index.js
imports style.styl
(possible extensions: /.*(?css|sass|less|styl)/
) as style
and uses h
(from preact-hyperscript), exactly like this:
import {createElement as h} from 'preact-hyperscript';
import style from './style.styl';
export default h('div.class', {}, [...])
Detailed usage
If you're using preact-hyperscript
and CSS with webpack like this:
some-component.js:
import {createElement as h} from 'preact-hyperscript';
import style from './style.styl';
export default h('div.class', {}, [...])
style.styl:
.class
background: yellow
And you've configured you css-loader in webpack to use CSS Modules (modules: true
) then you'll know that you have to somehow assign the value of style.class
in your js file as a class name in your hyperscript component. Either by simply doing h('div', {class: style.class}, [...])
or by using things like hyperstyles (or hyperstyles-loader) (or in React/JSX you may have used react-css-modules).
This module tries to transparently apply the classname in your component with a simple regex-replace (at least for now).
So the above would be transformed to:
some-component.js:
import {createElement as h} from 'preact-hyperscript';
import style from './style.styl';
export default h(`div.class.${style.class}`, {}, [...])
It automatically transforms h('div.class')
into h(`div.class.${style'class'}`)
Right now it's logic is very simple. It replaces /h('(.*)\.(.*)')/g
to h(`$1.${style.$2}`) in regex.
Future plans
- More versatile syntax parsing. Currently it only replaces
h('<tagname>.<class>')
. There may be loads of different use cases. - Make it work with hyperscript. Currently it only works if
h
can parse classnames from 1st argument (preact-hyperscript).
Other solutions:
- hyperstyles (too much prerequisite (see hyperstyles-loader))
- hyperstyles-loader (would cause issues server-side, when style files are set to be ignored)
- react-css-modules (not for hyperscript)