feat: create new snake instance dynamically

Author: streamich

.storybook/snake.stories.js

@@ -0,0 +1,35 @@
+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: addonRule} = require('../addon/rule');
+const {addon: addonCache} = require('../addon/cache');
+const {addon: addonSnake} = require('../addon/snake');
+
+const nano = create({h});
+addonRule(nano);
+addonCache(nano);
+addonSnake(nano);
+
+const {s} = nano;
+
+const redBorderClass = nano.rule(
+    s.bd('1px solid red').obj
+);
+
+const lazy = s.ta('center');
+
+storiesOf('Addons/snake', module)
+    .add('Inside rule()', () =>
+        h('div', {className: redBorderClass}, 'Hello world')
+    )
+    .add('Evaluate inline', () =>
+        h('div', {className: s.col('blue')}, 'Hello world')
+    )
+    .add('Lazy evaluate', () =>
+        h('div', {className: lazy}, 'Hello world')
+    )
+    .add('Getters', () =>
+        h('div', {className: s.bgBlack.col('pink')}, 'Hello world')
+    )

addon/snake.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-invalid-this */
 'use strict';
 
 var atoms = require('./atoms').atoms;
@@ -7,27 +8,47 @@ var createSnake = function (renderer, rules) {
 
     var defaultRules = renderer.assign({}, atoms, {
         bgWhite: function () {
-            defaultRules.bg.call(this, '#fff');
+            this.backgroundColor = '#fff';
         },
 
         bgBlack: function () {
-            defaultRules.bg.call(this, '#000');
+            this.backgroundColor = '#000';
         },
     });
 
     rules = renderer.assign({}, defaultRules, rules);
 
-    var snake = {
-        start: function () {
-            var instance = Object.create(snake);
+    var snake = {};
 
-            instance.obj = {};
-            instance.toString = function () {
-                return renderer.cache(instance.obj);
-            };
+    var start = function () {
+        var instance = Object.create(snake);
 
-            return instance;
-        }
+        instance.obj = {};
+        instance.toString = function () {
+            if (process.env.NODE_ENV !== 'production') {
+                require('./__dev__/warnOnMissingDependencies')('snake', renderer, ['cache']);
+            }
+
+            return renderer.cache(instance.obj);
+        };
+
+        return instance;
+    };
+
+    var checkStart = function (name, fn) {
+        return function () {
+            if (!this.obj) {
+                var instance = start();
+
+                if (typeof instance[name] === 'function') {
+                    return instance[name].apply(instance, arguments);
+                }
+
+                return instance[name];
+            }
+
+            return fn.apply(this, arguments);
+        };
     };
 
     var onRule = function (name) {
@@ -36,22 +57,22 @@ var createSnake = function (renderer, rules) {
         if (typeof rule === 'function') {
             if (!rule.length) {
                 Object.defineProperty(snake, name, {
-                    get: function () {
+                    get: checkStart(name, function () {
                         rule.call(this.obj);
                         return this;
-                    }
+                    })
                 });
             } else {
-                snake[name] = function () {
+                snake[name] = checkStart(name, function () {
                     rule.apply(this.obj, arguments);
                     return this;
-                };
+                });
             }
         } else {
-            snake[name] = function (value) {
+            snake[name] = checkStart(name, function (value) {
                 this.obj['' + rule] = value;
                 return this;
-            };
+            });
         }
     };
 
@@ -61,15 +82,7 @@ var createSnake = function (renderer, rules) {
 };
 
 exports.addon = function (renderer) {
-    if (process.env.NODE_ENV !== 'production') {
-        require('./__dev__/warnOnMissingDependencies')('sheet', renderer, ['cache']);
-    }
-
     var snake = createSnake(renderer);
 
-    Object.defineProperty(renderer, 's', {
-        get: function () {
-            return snake.start();
-        }
-    });
+    renderer.s = snake;
 };

docs/googleFont.md

@@ -15,6 +15,14 @@ Below example loads `Roboto Slab` font at `400` and `700` widths, including `cyr
 nano.googleFont('Roboto Slab', [400, 700], 'cyrillic');
 ```
 
+Now you can use this font.
+
+```js
+const className = nano.rule({
+    fontFamily: '"Roboto Slab", sans'
+});
+```
+
 
 ## Installation