README
Snabbdom TypeStyle
Maintainable, scalable, and elegant styling with Snabbdom + TypeStyle
- All the power and benefits of TypeStyle
- Internal handling of classname mapping
- Server-side rendering support
Installation
npm install snabbdom-typestyle
Usage
Simply pass css
to your Snabbdom virtual node!
import { Style } from 'snabbdom-typestyle';
function view() {
const buttonStyle: Style = {
color: 'blue'
};
return (
<button css={ buttonStyle }>
My Button
</button>
);
}
The CssModule is essentially a wrapper around TypeStyle style and can be passed either a single NestedCssProperties
or an array of NestedCssProperties
(or Style
, which is an alias provided by snabbdom-typestyle).
Make sure to pass the CssModule before the ClassModule when initializing Snabbdom.
import { init } from 'snabbdom';
import CssModule from 'snabbdom-typestyle';
import ClassModule from 'snabbdom/modules/class';
const modules = [
CssModule,
ClassModule
];
const patch = init(modules);
Or, if you are using Cycle.js pass modules
in the options of makeDOMdriver
.
run(main, { DOM: makeDOMDriver('#root', { modules }) });
For examples, take a look at this fork of the Cycle.js Todo-MVC implementation which uses snabbdom-typestyle.
Server-side Rendering
To use snabbdom-typestyle
in a server-side rendered environment, initialize Snabbdom with the serverSideCssModule
.
import { serverSideCssModule, collectStyles } from 'snabbdom-typestyle';
import modulesForHTML from 'snabbdom-to-html/modules';
import { h } from 'snabbdom';
const modules = [
serverSideCssModule,
modulesForHTML.class
];
const patch = init(modules);
When you are rendering your html, you can grab the styles via collectStyles(node: VNode): String
.
h('style#styles', collectStyles(vtree));
Then, on the client-side, pass a selector for the style element rendered by the server to makeClientSideCssModule(styleElementSelector: string | undefined)
.
Doing this avoids duplication of the style element when the application is hydrated.
import { makeClientSideCssModule } from 'snabbdom-typestyle';
import ClassModule from 'snabbdom/modules/class';
const modules = [
makeClientSideCssModule('#styles'),
ClassModule
];
Take a look at the Cycle.js example here
License
MIT