feat: add hydration addon

README.md

@@ -34,7 +34,7 @@ __Tiny [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/
   - [`keyframes()`](./docs/keyframes.md)
   - [`unitless`](./docs/unitless.md)
   - [`!important`](./docs/important.md)
-  - [`global`](./docs/global.md)
+  - [`:global`](./docs/global.md)
 - [Server-side rendering](./docs/SSR.md)
 
 

addon/cache.js

@@ -3,13 +3,13 @@
 exports.addon = function (renderer) {
     var cache = {};
 
-    renderer.cache = function (styles) {
-        if (!styles) return '';
+    renderer.cache = function (css) {
+        if (!css) return '';
 
-        var key = renderer.hash(styles);
+        var key = renderer.hash(css);
 
         if (!cache[key]) {
-            cache[key] = renderer.rule(styles, key);
+            cache[key] = renderer.rule(css, key);
         }
 
         return cache[key];

addon/hydrate.js

@@ -0,0 +1,44 @@
+'use strict';
+
+exports.addon = function (renderer, id) {
+    id = id || 'nano-css';
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('hydrate', renderer, ['put']);
+    }
+
+    if (renderer.client) {
+        var hydrated = {};
+        var stylesheet = document.getElementById(id);
+
+        if (!stylesheet) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.error('Hydration stylesheet with id "' + id + '" was not found.');
+            }
+
+            return;
+        }
+
+        var cssRules = stylesheet.cssRules;
+
+        for (var i = 0; i < cssRules.length; i++) {
+            var rule = cssRules[i];
+            hydrated[rule.selectorText] = 1;
+        }
+
+        var put = renderer.put;
+
+        renderer.put = function (selector, css) {
+            if (selector in hydrated) {
+                if (process.env.NODE_ENV !== 'production') {
+                    // eslint-disable-next-line
+                    console.info('Hydrated selector: ' + selector);
+                }
+
+                return;
+            }
+
+            put(selector, css);
+        };
+    }
+};

addon/rule.js

@@ -5,35 +5,10 @@ exports.addon = function (renderer) {
         require('./__dev__/warnOnMissingDependencies')('rule', renderer, ['put']);
     }
 
-    renderer.rule = function (styles, block) {
-        if (!block) {
-            block = renderer.hash(styles);
-        }
-
-        if (process.env.NODE_ENV !== 'production') {
-            if (renderer.client) {
-                /*
-                if (document.getElementById('css-' + block)) {
-                    console.error(
-                        'ezcss detected class name collision "css-' + block + '". ' +
-                            'Multiple components use the same class name.'
-                    );
-                }
-                */
-                if (renderer.cns[block]) {
-                    if (process.env.NODE_ENV !== 'production') {
-                        // eslint-disable-next-line
-                        console.info('Hydration cache hit: "' + block + '"');
-                    }
-
-                    return;
-                }
-            }
-        }
-
+    renderer.rule = function (css, block) {
+        block = block || renderer.hash(css);
         block = renderer.pfx + block;
-        renderer.put('.' + block, styles);
-        renderer.cns[block] = 1;
+        renderer.put('.' + block, css);
 
         return ' ' + block;
     };

docs/Addons.md

@@ -22,7 +22,7 @@ plenty more to chose from. Below is a list of addons shipped with `nano-css`.
 - [`keyframes()`](./keyframes.md)
 - [`unitless`](./unitless.md)
 - [`!important`](./important.md)
-- [`global`](./global.md)
+- [`:global`](./global.md)
 
 
 ## Addon Installation

index.js

@@ -16,7 +16,6 @@ exports.create = function (config) {
 
     var renderer = assign({
         raw: '',
-        cns: {},
         pfx: '_',
         client: typeof window === 'object',
         assign: assign,