feat: implement basic ref() interface

Author: streamich

.storybook/ref.stories.js

@@ -1,4 +1,4 @@
-import {createElement as h} from 'react';
+import {createElement as h, Component} from 'react';
 import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
@@ -11,7 +11,32 @@ addonRef(nano);
 
 const css = nano.createRef();
 
+class RefExample extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            color: 'red',
+        };
+    }
+
+    render () {
+        var data = nano.ref({'&': {color: this.state.color}, '&:hover': {color: 'blue'}});
+
+        return h('div', {},
+            h('div', data, 'Hello world'),
+
+            h('br'),
+
+            h('button', {onClick: () => this.setState({color: 'red'})}, 'red'),
+            h('button', {onClick: () => this.setState({color: 'blue'})}, 'blue'),
+        );
+    }
+}
+
 storiesOf('Addons/ref', module)
     .add('Default', () =>
         h('div', css({'&': {color: 'red'}, '&:hover': {color: 'blue'}}), 'Hello world')
     )
+    .add('ref()', () =>
+        h(RefExample)
+    )

addon/ref.js

@@ -2,6 +2,9 @@
 
 var addonPipe = require('./pipe').addon;
 
+// eslint-disable-next-line no-undef
+var sNano = typeof Symbol === 'object' ? Symbol('nano-css') : '@@nano-css';
+
 exports.addon = function (renderer) {
     if (!renderer.pipe) {
         addonPipe(renderer);
@@ -14,15 +17,13 @@ exports.addon = function (renderer) {
     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] = '';
@@ -32,4 +33,32 @@ exports.addon = function (renderer) {
             return obj;
         };
     };
+
+    renderer.ref = function (css, originalRef) {
+        if (process.env.NODE_ENV !== 'production') {
+            if (originalRef && typeof originalRef !== 'function') {
+                console.error(
+                    'nano-css "ref" function expects argument to be a ref function, "' + (typeof originalRef) + '" provided.'
+                );
+            }
+        }
+
+        var obj = {
+            ref: function (el) {
+                if (originalRef) originalRef(el);
+                if (!el) return;
+
+                var pipe = el[sNano];
+
+                if (!pipe) {
+                    el[sNano] = pipe = renderer.pipe();
+                    el.setAttribute(pipe.attr, '');
+                }
+
+                pipe.css(css);
+            }
+        };
+
+        return obj;
+    };
 };