feat: various

.gitignore

@@ -11,8 +11,5 @@ dist/
 lerna-debug.log
 /modules/
 /dist/
-.vscode/
 _book/
-/demo/*.js
-/demo/*.js.map
-/demo/analyzer/
+/demo/

.storybook/jsx.stories.js

@@ -3,10 +3,12 @@ import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../index');
+const {addon: addonKeyframes} = require('../addon/keyframes');
 const {addon: addonRule} = require('../addon/rule');
 const {addon: addonJsx} = require('../addon/jsx');
 
 const renderer = create({h});
+addonKeyframes(renderer);
 addonRule(renderer);
 addonJsx(renderer);
 const {jsx} = renderer;

.storybook/nesting.stories.js

@@ -15,10 +15,13 @@ const className = rule({
     border: '1px solid red',
     '&:hover': {
         fontWeight: 'bold'
-    }
+    },
+    '&>span': {
+        color: 'red',
+    },
 }, 'nesting');
 
 storiesOf('Addons/Nesting', module)
     .add('Default', () =>
-        h('div', {className}, 'Hover me!')
+        h('div', {className}, 'Hover ', h('span', null, 'me!'))
     )

.storybook/put.stories.js

@@ -7,20 +7,20 @@ const {create} = require('../index');
 const renderer = create();
 const {put} = renderer;
 
-put('red-border', {
-  border: '1px solid red',
-  ':hover': {
-      fontWeight: 'bold'
-  },
-  span: {
-      color: 'red'
-  }
+put('.red-border', {
+    border: '1px solid red',
+    ':hover': {
+        fontWeight: 'bold'
+    },
+    span: {
+        color: 'red'
+    }
 });
 
 storiesOf('Addons/put()', module)
-  .add('Default', () =>
-    h('div', {className: 'red-border'}, 'Hello world')
-  )
-  .add('Nesting', () =>
-    h('div', {className: 'red-border'}, 'Hello ', h('span', null, 'world'))
-  )
+    .add('Default', () =>
+        h('div', {className: 'red-border'}, 'Hello world')
+    )
+    .add('Nesting', () =>
+        h('div', {className: 'red-border'}, 'Hello ', h('span', null, 'world'))
+    )

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.tabSize": 4
+}

README.md

@@ -2,18 +2,19 @@
 
 [![][npm-badge]][npm-url] [![][travis-badge]][travis-url]
 
-The smallest [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation) CSS-in-JS library that you can actually use in production; *with tons of addons*.
+__Tiny [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation) CSS-in-JS library__ that you can actually use in production; *with tons of [addons](./docs/Addons.md)*.
 
-- Only __0.5Kb__ in base configuration
+- Only __0.5 Kb__ in base configuration
 - __Agnostic__ &mdash; use it standalone, with React, Preact, Vue.js, or any other library
-- __Isomorphic__ &mdash; render on server and browser
-- __Performant__ &mdash; does not create wrapper components and caches styles
+- __Isomorphic__ &mdash; render on server and browser, generates stable class names, and re-hydrates
+- __Performant__ &mdash; does not create wrapper components, does not use inline styles or inline style sheets `<style dangerouslySetInnerHTML={{__html: ''}}/>`, but caches all class names for re-use and injects CSS using `.insertRule()`
+- Supports `@media` queries and animation `@keyframes`
 
 
 ## Reference
 
-- Usage
-- Addons
+- [Usage](./docs/Usage.md)
+- [Addons](./docs/Addons.md)
   - [`put()`](./docs/put.md)
   - [`rule()`](./docs/rule.md)
   - [`drule()`](./docs/drule.md)
@@ -22,7 +23,7 @@ The smallest [5<sup>th</sup> generation](https://github.com/streamich/freestyler
   - [`jsx()`](./docs/jsx.md)
   - [`useStyles()`](./docs/useStyles.md)
   - [`withStyles()`](./docs/withStyles.md)
-  - [`Decorator`](./docs/Decorator.md)
+  - [`@css` decorator](./docs/Decorator.md)
   - [`style()`](./docs/style.md)
   - [`styled()`](./docs/styled.md)
   - [`hyperstyle()`](./docs/hyperstyle.md)

addon/rule.js

@@ -32,7 +32,7 @@ exports.addon = function (renderer) {
         }
 
         block = renderer.pfx + block;
-        renderer.put(block, styles);
+        renderer.put('.' + block, styles);
         renderer.cns[block] = 1;
 
         return ' ' + block;

docs/Usage.md

@@ -0,0 +1,63 @@
+# Usage
+
+Install `nano-css`
+
+<pre>
+npm i <a href="https://www.npmjs.com/package/nano-css">nano-css</a> --save
+</pre>
+
+To use the stock version simply create a `renderer`
+
+```jsx
+import {create} from 'nano-css';
+
+const renderer = create();
+const {put} = renderer;
+
+put('.test', {
+    color: 'red',
+    border: '1px solid red'
+});
+
+<div className='test'>Hello world!</div>
+```
+
+However, recommended optimal usage in a large project is with the following addons (read more about [addons](./Addons.md)),
+create an empty `css.js` file in your project and paste the below
+
+```js
+import {createElement} from 'react';
+import {create} from 'nano-css';
+import {addon as addonCache} from 'nano-css/addon/cache'
+import {addon as addonStable} from 'nano-css/addon/stable'
+import {addon as addonNesting} from 'nano-css/addon/nesting'
+import {addon as addonAtoms} from 'nano-css/addon/atoms'
+import {addon as addonKeyframes} from 'nano-css/addon/keyframes'
+import {addon as addonRule} from 'nano-css/addon/rule'
+import {addon as addonSheet} from 'nano-css/addon/sheet'
+import {addon as addonJsx} from 'nano-css/addon/jsx'
+
+const nano = create({
+    pfx: 'my-company-',
+    h: createElement,
+});
+
+addonCache(nano);
+addonStable(nano);
+addonNesting(nano);
+addonAtoms(nano);
+addonKeyframes(nano);
+addonRule(nano);
+addonSheet(nano);
+addonJsx(nano);
+
+const {put, rule, sheet, jsx, keyframes} = nano;
+
+export {
+    put,
+    rule,
+    sheet,
+    jsx,
+    keyframes,
+};
+```

index.js

@@ -31,46 +31,64 @@ exports.create = function (config) {
         selector: function (parent, selector) {
             return parent + (selector[0] === ':' ? ''  : ' ') + selector;
         },
+        putRaw: function (rawCssRule) {
+            renderer.raw += rawCssRule;
+        },
+        putAtrule: function (selector, decls, prelude) {
+            renderer.put(selector, decls, prelude);
+        }
     }, config);
 
-    var putRaw;
+    var sheet, stylesheet;
 
     if (renderer.client) {
-        var sheet = document.head.appendChild(document.createElement('style')).sheet;
-        putRaw = function (rawCss) {
-            sheet.insertRule(rawCss, 0);
-        };
-    } else {
-        putRaw = function (rawCss) {
-            renderer.raw += rawCss;
+        if (process.env.NODE_ENV === 'production') {
+            sheet = document.head.appendChild(document.createElement('style')).sheet;
+        } else {
+            stylesheet = document.createElement('style');
+            document.head.appendChild(stylesheet);
+        }
+
+        renderer.putRaw = function (rawCssRule) {
+            if (process.env.NODE_ENV === 'production') {
+                sheet.insertRule(rawCssRule, 0);
+            } else {
+                try {
+                    stylesheet.sheet.insertRule(rawCssRule, 0);
+                } catch (error) {
+                    // eslint-disable-next-line
+                    console.info('Could not insert CSS rule.');
+                    console.error(error);
+
+                    stylesheet.appendChild(document.createTextNode(rawCssRule));
+                }
+            }
         };
     }
 
-    var put = function (selector, decls, atrule) {
+    renderer.put = function (selector, decls, atrule) {
         var str = '';
         var prop, value;
 
         for (prop in decls) {
             value = decls[prop];
 
-            if (value instanceof Object) {
+            if ((value instanceof Object) && !(value instanceof Array)) {
                 if (prop[0] === '@') {
-                    put(selector, value, prop);
+                    renderer.putAtrule(selector, value, prop);
                 } else {
-                    put(renderer.selector(selector, prop), value, atrule);
+                    renderer.put(renderer.selector(selector, prop), value, atrule);
                 }
             } else {
                 str += renderer.decl(prop, value);
             }
         }
 
         if (str) {
-            str = '.' + selector + '{' + str + '}';
-            putRaw(atrule ? atrule + '{' + str + '}' : str);
+            str = selector + '{' + str + '}';
+            renderer.putRaw(atrule ? atrule + '{' + str + '}' : str);
         }
     };
 
-    renderer.put = put;
-
     return renderer;
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nano-css",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Smallest 5th gen CSS-in-JS library",
   "main": "index.js",
   "unpkg": "dist/nano-css.umd.min.js",
@@ -18,7 +18,7 @@
     "test": "npm run eslint && npm run test:server && jest",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
-    "test:server": "NODE_ENV=production mocha -r ts-node/register src/**/*.test-server.ts*",
+    "test:server": "NODE_ENV=production mocha addon/**/*.test-server.js",
     "test:visual": "npm run storybook",
     "test:visual:build": "build-storybook",
     "test:visual:clean": "rimraf storybook-static",
@@ -92,7 +92,7 @@
     "transformIgnorePatterns": [],
     "testRegex": ".*/__tests__/.*\\.(test|spec)\\.(jsx?)$",
     "setupFiles": [
-      "./lib/__tests__/setup.js"
+      "./addon/__tests__/setup.js"
     ],
     "moduleFileExtensions": [
       "js",