From 005dd68c990ec2160b1d4f7797c1f98d70e5c370 Mon Sep 17 00:00:00 2001
From: Vadim Dalecky <streamich@gmail.com>
Date: Sun, 18 Mar 2018 12:07:46 +0000
Subject: [PATCH] feat: add inline-style-prefixer addon

---
 .storybook/inline-style-prefixer.stories.js | 21 ++++++++
 addon/inline-style-prefixer.js              | 54 +++++++++++++++++++++
 index.js                                    |  5 +-
 package.json                                |  3 +-
 4 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 .storybook/inline-style-prefixer.stories.js
 create mode 100644 addon/inline-style-prefixer.js

diff --git a/.storybook/inline-style-prefixer.stories.js b/.storybook/inline-style-prefixer.stories.js
new file mode 100644
index 00000000..d44bb9de
--- /dev/null
+++ b/.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')
+  )
diff --git a/addon/inline-style-prefixer.js b/addon/inline-style-prefixer.js
new file mode 100644
index 00000000..7727e7cc
--- /dev/null
+++ b/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;
+    };
+};
diff --git a/index.js b/index.js
index d5ebd9c1..e03823b4 100644
--- a/index.js
+++ b/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) {
diff --git a/package.json b/package.json
index 88e1aab4..1e6d93a2 100644
--- a/package.json
+++ b/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",