feat: 🎸 improve hydrate addon

Allow to hydrate arbitrary number of stylesheets, expose .hydrate()
method

.storybook/hydrate.stories.js

@@ -0,0 +1,21 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+const {action} = require('@storybook/addon-actions');
+const {linkTo} = require('@storybook/addon-links');
+const {create} = require('../index');
+const {addon: addonHydrate} = require('../addon/hydrate');
+
+const nano1 = create();
+nano1.put('.hydrate-test', {color: 'red'});
+
+const nano2 = create({
+    sh: nano1.sh
+});
+addonHydrate(nano2);
+// nano2.hydrate(nano1.sh);
+nano2.put('.hydrate-test', {color: 'red'});
+
+storiesOf('Addons/hydrate()', module)
+  .add('Default', () =>
+    h('div', {}, 'Should log hydration info')
+  )

addon/hydrate.js

@@ -1,26 +1,21 @@
 'use strict';
 
-exports.addon = function (renderer, stylesheet) {
+exports.addon = function (renderer) {
     if (process.env.NODE_ENV !== 'production') {
         require('./__dev__/warnOnMissingDependencies')('hydrate', renderer, ['put']);
     }
 
-    if (renderer.client) {
-        var hydrated = {};
-        stylesheet = stylesheet || renderer.sh;
-
-        if (!stylesheet) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.error('Hydration style sheet was not found.');
-            }
+    var hydrated = {};
 
-            return;
-        }
-
-        var cssRules = stylesheet.sheet.cssRules;
+    renderer.hydrate = function (sh) {
+        var cssRules = sh.cssRules || sh.sheet.cssRules;
 
         for (var i = 0; i < cssRules.length; i++)
             hydrated[cssRules[i].selectorText] = 1;
+    };
+
+    if (renderer.client) {
+        if (renderer.sh) renderer.hydrate(renderer.sh);
 
         var put = renderer.put;
 

docs/hydrate.md

@@ -20,6 +20,21 @@ const nano = create({
 
 That's it! `nano-css` will not inject CSS rules are already present in the style sheet.
 
+You can also manually hydrate any stylesheet or external stylesheet you might have created using [`extract`](./extract.md) addon.
+
+Let's say you have and external style sheet:
+
+```html
+<link rel="stylesheet" type="text/css" href="extracted.css" id="extracted-css">
+```
+
+You can hydrate it like so:
+
+```js
+nano.hydrate(document.getElementById('extracted-css'));
+```
+
+*P.S. Currently, does not hydrate media queries or animation keyframes.*
 
 ## Installation
 

docs/put.md

@@ -37,7 +37,7 @@ It maps 1-to-1 to analogous CSS.
 
 ```css
 .selector {
-    color: red
+    color: red;
 }
 
 .selector:hover {
@@ -92,3 +92,5 @@ and camel-case property syntax.
 ```
 
 It also supports *Atoms* via the [`atoms`](./atoms.md) addon and "chaining" using the [`snake`](./snake.md) addon.
+You might also want to take a look at [`stylis`](./stylis.md) addon that supports writing CSS as a string and 
+[`tachyons`](./tachyons.md) addon that allows to chain *tachyons*.

docs/style.md

@@ -17,6 +17,8 @@ const Button = style('button', {
     background: props.primary ? 'blue' : 'grey',
     fontSize: props.small ? '12px' : '16px'
 }));
+
+<Button>Click me!</Button>
 ```
 
 `style()` has the following signature: