Feat/cssom

.storybook/ref.stories.js

@@ -0,0 +1,44 @@
+import {createElement as h, Component} 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();
+
+class RefExample extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            color: 'red',
+            show: true
+        };
+    }
+
+    render () {
+        var data = nano.ref({'&': {color: this.state.color}, '&:hover': {color: 'blue'}});
+
+        return h('div', {},
+            this.state.show && h('div', data, 'Hello world'),
+
+            h('br'),
+
+            h('button', {onClick: () => this.setState({color: 'red'})}, 'red'),
+            h('button', {onClick: () => this.setState({color: 'blue'})}, 'blue'),
+            h('button', {onClick: () => this.setState({show: !this.state.show})}, 'show/hide'),
+        );
+    }
+}
+
+storiesOf('Addons/ref', module)
+    .add('Default', () =>
+        h('div', css({'&': {color: 'red'}, '&:hover': {color: 'blue'}}), 'Hello world')
+    )
+    .add('ref()', () =>
+        h(RefExample)
+    )

addon/__dev__/warnOnMissingDependencies.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var pkg = require('../../package.json');
+var pkgName = 'nano-css';
 
 module.exports = function warnOnMissingDependencies (addon, renderer, deps) {
     var missing = [];
@@ -17,7 +17,7 @@ module.exports = function warnOnMissingDependencies (addon, renderer, deps) {
         var str = 'Addon "' + addon + '" is missing the following dependencies:';
 
         for (var j = 0; j < missing.length; j++) {
-            str += '\n require("' + pkg.name + '/addon/' + missing[j] + '").addon(nano);';
+            str += '\n require("' + pkgName + '/addon/' + missing[j] + '").addon(nano);';
         }
 
         throw new Error(str);

addon/cssom.js

@@ -0,0 +1,27 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('cssom', renderer, ['sh']);
+    }
+
+    renderer.putRule = function (selector) {
+        var rawCss = selector + '{}';
+        var sheet = renderer.sh.sheet;
+        var index = sheet.insertRule(rawCss, 0);
+        var rule = (sheet.cssRules || sheet.rules)[index];
+        var result = {
+            remove: function () {}
+        };
+
+        result.index = index;
+        result.rule = rule;
+        result.style = rule.style;
+
+        return result;
+    };
+
+    // renderer.putAtRule = function (prelude) {
+    //     return renderer.putRule(prelude);
+    // };
+};

addon/pipe.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var addonCssom = require('./cssom').addon;
+
+exports.addon = function (renderer) {
+    if (!renderer.putRule) {
+        addonCssom(renderer);
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('pipe', renderer, ['putRule']);
+    }
+
+    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]);
+                }
+
+                // GC
+                for (var selectorTemplate2 in rules) {
+                    if (!(selectorTemplate2 in css)) {
+                        rules[selectorTemplate2].remove();
+                        delete rules[selectorTemplate2];
+                    }
+                }
+            },
+            remove: function () {
+                for (var selectorTemplate in rules)
+                    rules[selectorTemplate].remove();
+            }
+        };
+
+        return obj;
+    };
+};

addon/ref.js

@@ -0,0 +1,87 @@
+'use strict';
+
+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);
+    }
+
+    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;
+        };
+    };
+
+    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, '');
+
+                    // Add unmount logic
+
+                    var observer = new MutationObserver(function (mutations) {
+                        for (var i = 0; i < mutations.length; i++) {
+                            var mutation = mutations[i];
+
+                            if (mutation.removedNodes.length) {
+                                var nodes = mutation.removedNodes;
+
+                                for (var j = 0; j < nodes.length; j++) {
+                                    if (nodes[j] === el) {
+                                        pipe.remove();
+                                        delete el[sNano];
+                                        observer.disconnect();
+                                        return;
+                                    }
+                                }
+                            }
+                        }
+                    });
+
+                    observer.observe(el.parentNode, {childList: true});
+                }
+
+                pipe.css(css);
+            }
+        };
+
+        return obj;
+    };
+};

addon/reset-font.js

@@ -7,7 +7,7 @@ exports.addon = function (renderer) {
 
     renderer.put('', {
         'html, body': {
-            fontFamily: '"Open Sans",sans',
+            fontFamily: '"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",sans-serif',
             fontWeight: 400,
             fontSize: '16px',
 

docs/reset-font.md

@@ -5,7 +5,7 @@ Injects the below global styles to make fonts look better.
 ```js
 {
     'html, body': {
-        fontFamily: '"Open Sans",sans',
+        fontFamily: '"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",sans-serif',
         fontWeight: 400,
         fontSize: '16px',
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nano-css",
-  "version": "1.12.0",
+  "version": "1.15.2",
   "description": "Smallest 5th gen CSS-in-JS library",
   "main": "index.js",
   "unpkg": "dist/nano-css.umd.min.js",