Transparently apply CSS Modules to hyperscript-compatible DOM builders, such as virtual-hyperscript and React.
$ npm install hyperstyles
var h = require('hyperstyles')(require('virtual-dom/h'), require('./car.css'));
module.exports = function render() {
return h('div.root', [
h('div.front-door'),
h('div.back-door')
]);
}
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!
In ES2015, using virtual-hyperscript
:
import vh from 'virtual-dom/h';
import styles from './car.css';
import hyperstyles from 'hyperstyles';
const h = hyperstyles(vh, styles);
function render() {
return h('div', {styleName: 'root'}, [
h('div', {styleName: 'front-door'}),
h('div', {styleName: 'back-door'})
]);
}
export default render;
In JSX, using React.createElement
:
/** @jsx h */
var React = require('react');
var styles = require('./car.css');
var hyperstyles = require('hyperstyles');
var h = hyperstyles(React.createElement, styles);
var Car = React.createClass({
render: function () {
return (
<div styleName="root">
<div styleName="front-door"></div>
<div styleName="back-door"></div>
</div>
);
}
});
module.exports = Car;
In ES5, using React.createElement
:
var React = require('react');
var styles = require('./car.css');
var hyperstyles = require('hyperstyles');
var h = hyperstyles(React.createElement, styles);
var Car = React.createClass({
render: function () {
return h('div.root', [
h('div.front-door'),
h('div.back-door')
]);
}
});
module.exports = Car;
Note that we use the styleName
property instead of className
to denote classes we want to replace from the CSS module. You can use them together and classNames
s will remain as they are, with styleName
s appended.
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.
var vh = require('virtual-dom/virtual-hyperscript');
var hyper = require('hyperstyles')(vh);
var hCar = hyper(require('./car.css'));
var hBike = hyper(require('./bike.css'));
function renderCar() {
return hCar('div.root', [
hCar('div.front-door'),
hCar('div.back-door')
]);
}
function renderBike() {
return hBike('div.root', [
hBike('div.front-wheel'),
hBike('div.back-wheel')
]);
}
This is useful if you expose your partially applied function as a module, which each of your components can include and call with their own styles.
You can use the tagName
shorthand (as demonstrated in the first example) to quickly set the id
and className
properties on the node you are creating. Any CSS classes you put the shorthand format will be treated as if you passed them in as the styleName
property rather than the className
property, and as such, will be transformed by hyperstyles. The shorthand will even work with React, as long as you're not using JSX.
ISC