feat: add inline-style-prefixer addon

Author: streamich

.storybook/inline-style-prefixer.stories.js

@@ -0,0 +1,21 @@
+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: addonPrefixer} = require('../addon/inline-style-prefixer');
+
+const renderer = create();
+addonRule(renderer);
+addonPrefixer(renderer);
+const {rule} = renderer;
+
+const className1 = rule({
+    alignItems: 'center'
+});
+
+storiesOf('Addons/inline-style-prefixer', module)
+  .add('Default', () =>
+    h('div', {className: className1}, 'Hello world')
+  )

addon/inline-style-prefixer.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var prefixAll = require('inline-style-prefixer/static');
+
+var CAMEL_REGEX = /-[a-z\u00E0-\u00F6\u00F8-\u00FE]/g;
+
+var matchCallback = function (match) {
+    return match.slice(1).toUpperCase();
+};
+
+exports.addon = function (renderer) {
+    var decl = renderer.decl;
+
+    renderer.toCamel = function (prop) {
+        return prop.replace(CAMEL_REGEX, matchCallback);
+    };
+
+    renderer.prefix = function (prop, value) {
+        var obj = {};
+        obj[renderer.toCamel(prop)] = value;
+        obj = prefixAll(obj);
+
+        var str = '';
+
+        for (var propPrefixed in obj) {
+            str += propPrefixed + ':' + obj[propPrefixed] + ';';
+        }
+
+        return str;
+    };
+
+    renderer.decl = function (prop, value) {
+        var str = decl(prop, value);
+        var declarations = str.split(';');
+
+        if (!declarations.length) {
+            return str;
+        }
+
+        var prefixed = '';
+
+        for (var i = 0; i < declarations.length; i++) {
+            var declaration = declarations[i];
+
+            if (declaration) {
+                var pos = declaration.indexOf(':');
+
+                prefixed += renderer.prefix(declaration.substr(0, pos), declaration.substr(pos + 1));
+            }
+        }
+
+        return prefixed;
+    };
+};

index.js

@@ -20,8 +20,11 @@ exports.create = function (config) {
         client: typeof window === 'object',
         assign: assign,
         stringify: JSON.stringify,
+        toKebab: function (prop) {
+            return prop.replace(KEBAB_REGEX, '-$&').toLowerCase();
+        },
         decl: function (key, value) {
-            key = key.replace(KEBAB_REGEX, '-$&').toLowerCase();
+            key = renderer.toKebab(key);
             return key + ':' + value + ';';
         },
         hash: function (obj) {

package.json

@@ -37,7 +37,8 @@
   },
   "dependencies": {
     "fastest-stable-stringify": "^1.0.1",
-    "stylis": "3.5.0"
+    "stylis": "3.5.0",
+    "inline-style-prefixer": "^4.0.0"
   },
   "devDependencies": {
     "@types/react": "16.0.40",