feat: add stylis

.storybook/stylis.stories.js

@@ -0,0 +1,15 @@
+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: addonStylis} = require('../addon/stylis');
+
+const renderer = create({h});
+addonStylis(renderer);
+const {jsx} = renderer;
+
+storiesOf('Addons/stylis', module)
+    .add('Default', () =>
+        h('div', null, 'Hello world')
+    )

addon/stylis.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var Stylis = require('stylis');
+var onRulePlugin = require('./stylis/plugin-onRule');
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('stylis', renderer, ['put']);
+    }
+
+    renderer.stylis = new Stylis();
+
+    var plugin = onRulePlugin(function (rawCssRule) {
+        renderer.putRaw(rawCssRule);
+    });
+
+    renderer.stylis.use(plugin);
+
+    var put = renderer.put;
+
+    renderer.put = function (selector, css) {
+        if (typeof css !== 'string') {
+            return put(selector, css);
+        }
+
+        renderer.stylis(selector, css);
+    };
+};

addon/stylis/plugin-onRule.js

@@ -0,0 +1,43 @@
+'use strict';
+
+module.exports = function (insertRule) {
+    var delimiter = '/*|*/';
+    var needle = delimiter + '}';
+
+    function toSheet (block) {
+        if (block)
+            try {
+                insertRule(block + '}');
+            } catch (e) {
+                // eslint-disable-next-line
+            };
+    }
+
+    return function ruleSheet (context, content, selectors, parents, line, column, length, ns, depth, at) {
+        switch (context) {
+        // property
+        case 1:
+            // @import
+            if (depth === 0 && content.charCodeAt(0) === 64)
+                return insertRule(content+';'), '';
+            break;
+        // selector
+        case 2:
+            if (ns === 0)
+                return content + delimiter;
+            break;
+        // at-rule
+        case 3:
+            switch (ns) {
+            // @font-face, @page
+            case 102:
+            case 112:
+                return insertRule(selectors[0]+content), '';
+            default:
+                return content + (at === 0 ? delimiter : '');
+            }
+        case -2:
+            content.split(needle).forEach(toSheet);
+        }
+    };
+};