hyperstyles
Transparently apply CSS Modules to hyperscript-compatible DOM builders, such as virtual-hyperscript and React.
$ npm install hyperstyles
Here's a quick example using virtual-hyperscript
in ES2015:
;;; const h = ; { return ;}
When rendered, the following markup will be produced:
Usage
To use CSS Modules, you'll need to set up your module bundler to load Interoperable CSS.
Once your build process is configured you can use hyperstyles!
React.createElement
:
ES2015 (JSX), using /** @jsx h */ import React from 'react';import styles from './car.css';import hyperstyles from 'hyperstyles'; const h = ; Component { return <div ="root"> <div ="front-door"></div> <div ="back-door"></div> </div> ; });
Note that we use the styleName
property instead of className
to denote classes we want to replace using the CSS module. You can use them together and className
s will remain as they are, with styleName
s appended.
virtual-hyperscript
:
ES5, using var hyperstyles = ;var styles = ; var h = ; module { return ;}
React.createElement
:
ES5, using var React = ;var styles = ;var hyperstyles = ; var h = ; var Car = React; moduleexports = Car;
hyperx
+ virtual-hyperscript
:
ES5+2015, using var h = var hyperx = ;var hyperstyles = ;var styles = ; var hx = ; module { return hx`<div styleName="root"> <div styleName="front-door"></div> <div styleName="back-door"></div> </div>`;};
Tips
Here's a couple of ways to get the most out of hyperstyles
Tip A: Use partial application
If you just supply a single argument (a hyperscript-compatible function) to hyperstyles, it'll return a function which you can then call multiple times with different CSS modules to create multiple wrapped functions.
In hyper.js
:
;; h;
In car.js
:
;; const h = ; { return ;}
In bike.js
:
;; const h = ; { return ;}
tagName
shorthand
Tip B: Use the You can use the tagName
className shorthand (as demonstrated in the first example) as an alternative to setting the styleName
property. The shorthand will even work with React, as long as you're not using JSX.
Any CSS classes you write in the shorthand format will be transformed into the className
property by hyperstyles, even if you didn't pass any properties in. If your underlying DOM creation function also recognises this kind of shorthand, you can safely include your desired element id
, which will be passed through once hyperstyles has transformed the classNames.
Here's what would happen during the transform:
In | Out |
---|---|
['div'] |
['div'] |
['div.things'] |
['div', {className: 'things__r489jf'}] |
['div.things', {className: 'stuff'}] |
['div', {className: 'stuff things__r489jf'}] |
['div.things#stuff'] |
['div#stuff', {className: 'things__r489jf'}] |
Tests
$ npm test
There are currently tests to ensure hyperstyles is compatible with the following utilities:
- React
- virtual-hyperscript
- hyperx (wrapping virtual-hyperscript or React)
- hyperscript
It has also been succesfully used with crel, which cannot be tested outside a browser environment.
License
ISC