1.0.1 • Published 8 years ago
hyperstyles-loader v1.0.1
hyperstyles-loader
Hyperscript + CSS modules + Hyperstyles + Webpack
I’ve been using hyperscript in place of JSX. The problem is that it’s so verbose to use with CSS modules.
import styles from './styles.styl'
// JSX
<div className={styles.root}>Text</div>
// hyperscript
h('div', { className: styles.root }, [ 'text' ])
Now there’s hyperstyles
that merges the hyperscript
and styles
together.
import styles from './styles.styl'
import hyperstyles from 'hyperstyles'
import hyperscript from 'react-hyperscript'
const h = hyperstyles(hyperscript, styles)
h('div.root', [ 'text' ])
Now that’s much better, except now I have to require three files instead of one! So I created this webpack loader.
import h from './styles.styl'
h('div.root', [ 'text' ])
Now it’s so short!!!!
Example webpack configuration:
{
module: {
loaders: [
{
test: /\.styl$/,
loaders: [
'hyperstyles?h=react-hyperscript', // <--
'style',
'css?modules'
'postcss',
'stylus'
]
}
]
}
}
Substitute style!css
for css/locals
for prerendering!
1.0.1
8 years ago