feat: implement ref addon

.storybook/ref.stories.js

@@ -0,0 +1,17 @@
+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: addonRef} = require('../addon/ref');
+
+const nano = create();
+
+addonRef(nano);
+
+const css = nano.createRef();
+
+storiesOf('Addons/ref', module)
+    .add('Default', () =>
+        h('div', css({'&': {color: 'red'}, '&:hover': {color: 'blue'}}), 'Hello world')
+    )

addon/pipe.js

@@ -11,22 +11,39 @@ exports.addon = function (renderer) {
         require('./__dev__/warnOnMissingDependencies')('pipe', renderer, ['putRule']);
     }
 
-    renderer.pipe = function (initialDecls) {
-        var className = 'a';
-        var rule = renderer.putRule('.' + className);
-
-        for (var prop in initialDecls) {
-            rule.style.setProperty(prop, initialDecls[prop]);
-        }
-
-        var closure = function (decls) {
-            for (var prop in decls) {
-                rule.style.setProperty(prop, decls[prop]);
+    var counter = 0;
+
+    renderer.pipe = function () {
+        var rules = {};
+        var className = renderer.pfx + 'pipe-' + (counter++).toString(36);
+        var attr = 'data-' + className;
+        var scope1 = '.' + className;
+        var scope2 = '[' + attr + ']';
+
+        var obj = {
+            attr: attr,
+            className: className,
+            css: function (css) {
+                for (var selectorTemplate in css) {
+                    var declarations = css[selectorTemplate];
+                    var rule = rules[selectorTemplate];
+
+                    if (!rule) {
+                        var selector = selectorTemplate.replace('&', scope1) + ',' + selectorTemplate.replace('&', scope2);
+
+                        rules[selectorTemplate] = rule = renderer.putRule(selector);
+                    }
+
+                    for (var prop in declarations)
+                        rule.style.setProperty(prop, declarations[prop]);
+                }
+            },
+            remove: function () {
+                for (var selectorTemplate in rules)
+                    rules[selectorTemplate].remove();
             }
-
-            return ' ' + className;
         };
 
-        return closure;
+        return obj;
     };
 };

addon/ref.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var addonPipe = require('./pipe').addon;
+
+exports.addon = function (renderer) {
+    if (!renderer.pipe) {
+        addonPipe(renderer);
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('ref', renderer, ['pipe']);
+    }
+
+    renderer.createRef = function () {
+        var pipe = renderer.pipe();
+        var el = null;
+
+        var ref = function (element) {
+            if (el) el = element;
+            else {
+                el = null;
+                pipe.remove();
+            }
+        };
+
+        var obj = {ref: ref};
+
+        obj[pipe.attr] = '';
+
+        return function (css) {
+            pipe.css(css);
+            return obj;
+        };
+    };
+};