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!