Merge pull request #22 from streamich/feat/inline-style-prefixer

Feat/inline style prefixer

Author: streamich

.storybook/prefixer.stories.js

@@ -0,0 +1,25 @@
+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/prefixer');
+
+const renderer = create();
+addonRule(renderer);
+addonPrefixer(renderer);
+const {rule} = renderer;
+
+const className1 = rule({
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    boxShadow: '0 0 5px red',
+    'text-shadow': '2px 2px #ff0000',
+});
+
+storiesOf('Addons/prefixer', module)
+    .add('Default', () =>
+        h('div', {className: className1}, 'Hello world')
+    )

README.md

@@ -9,6 +9,7 @@ __Tiny [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/
 - __Isomorphic__ &mdash; render on server and browser, generates stable class names, and re-hydrates
 - __Performant__ &mdash; does not create wrapper components, does not use inline styles or inline `<style>` elements in the document body, but caches all class names for re-use and injects CSS using `.insertRule()` for performance
 - __`@media` queries__ and __animation `@keyframes`__ are supported
+- __Auto-prefixes__ your styles
 
 
 ## Reference
@@ -33,6 +34,7 @@ __Tiny [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/
   - [`nesting`](./docs/nesting.md)
   - [`keyframes()`](./docs/keyframes.md)
   - [`hydrate`](./docs/hydrate.md)
+  - [`prefixer`](./docs/prefixer.md)
   - [`stylis`](./docs/stylis.md)
   - [`unitless`](./docs/unitless.md)
   - [`!important`](./docs/important.md)

addon/prefixer.js

@@ -0,0 +1,61 @@
+'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.camel = function (prop) {
+        return prop.replace(CAMEL_REGEX, matchCallback);
+    };
+
+    renderer.prefix = function (prop, value) {
+        var obj = {};
+        obj[renderer.camel(prop)] = value;
+        obj = prefixAll(obj);
+
+        var str = '';
+
+        for (var propPrefixed in obj) {
+            value = obj[propPrefixed];
+            propPrefixed = renderer.kebab(propPrefixed);
+
+            if (value instanceof Array) {
+                str += propPrefixed + ':' + value.join(';' + propPrefixed + ':') + ';';
+            } else {
+                str += propPrefixed + ':' + value + ';';
+            }
+        }
+
+        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;
+    };
+};

docs/Addons.md

@@ -21,6 +21,7 @@ plenty more to chose from. Below is a list of addons shipped with `nano-css`.
 - [`nesting`](./nesting.md) — better nesting features
 - [`keyframes()`](./keyframes.md) — adds `@keyframes` support
 - [`hydrate`](./hydrate.md) — adds support for re-hydration on client side
+- [`prefixer`](./prefixer.md) — auto-prefixes your styles with correct vendor prefixes
 - [`stylis`](./stylis.md) — write CSS as strings
 - [`unitless`](./unitless.md) — automatically adds `px` to styles
 - [`!important`](./important.md) — adds `!important` to all declarations

docs/prefixer.md

@@ -0,0 +1,28 @@
+# `prefixer` Addon
+
+Uses [`inline-style-prefixer`](https://github.com/rofrischmann/inline-style-prefixer) library
+to auto-prefix your styles on the server and browser.
+
+Example:
+
+```js
+nano.put('.foo', {
+    flex: 1
+});
+```
+
+Result:
+
+```css
+.foo {
+    -webkit-flex:1;
+    flex:1;
+}
+```
+
+
+## Installation
+
+Simply install `prefixer` addon.
+
+Read more about the [Addons Installation](./Addons.md#addon-installation).

index.js

@@ -20,8 +20,11 @@ exports.create = function (config) {
         client: typeof window === 'object',
         assign: assign,
         stringify: JSON.stringify,
+        kebab: function (prop) {
+            return prop.replace(KEBAB_REGEX, '-$&').toLowerCase();
+        },
         decl: function (key, value) {
-            key = key.replace(KEBAB_REGEX, '-$&').toLowerCase();
+            key = renderer.kebab(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",