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