feat: add spread addon

.storybook/spread.stories.js

@@ -0,0 +1,22 @@
+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} = require('../addon/spread');
+
+const renderer = create();
+addon(renderer);
+const {spread} = renderer;
+
+const rule = spread({
+  border: '1px solid red'
+}, 'RedBorder');
+
+storiesOf('Addons/spread()', module)
+  .add('As class name', () =>
+    h('div', {className: rule}, 'Hello world')
+  )
+  .add('As data attribute', () =>
+    h('div', rule, 'Hello world')
+  )

README.md

@@ -47,6 +47,7 @@ __Motto of `nano-css` is simple__: *create the smallest possible CSS-in-JS libra
   - [`limit`](./docs/limit.md)
   - [`amp`](./docs/amp.md)
   - [`virtual`](./docs/virtual.md)
+  - [`spread`](./docs/spread.md)
 - [Server-side rendering](./docs/SSR.md)
 
 

docs/Addons.md

@@ -33,6 +33,7 @@ plenty more to chose from. Below is a list of addons shipped with `nano-css`.
 - [`limit`](./limit.md) — limits server-side style sheet size
 - [`amp`](./amp.md) — displays warnings and cleans up styles for AMP apps
 - [`virtual`](./virtual.md) — virtual CSS renderer, splits css rules in atomic declarations
+- [`spread`](./spread.md) — returns an object with data attributes used as a selector
 
 ## Addon Installation
 

docs/spread.md

@@ -0,0 +1,29 @@
+# `spread()` Addon
+
+Works the same as [`rule()`](./rule.md) interface, but instead of returning a string of
+class names, it returns an object of data attributes that can be "spread".
+
+```js
+const rule = nano.spread({
+    color: 'red'
+});
+
+<div {...rule}>Hello world!</div>
+```
+
+Or, it can be stringified to get a class name.
+
+```js
+const rule = nano.spread({
+    color: 'red'
+});
+
+<div className={rule}>Hello world!</div>
+```
+
+
+## Installation
+
+Simply install `spread` addon.
+
+Read more about the [Addon Installation](./Addons.md#addon-installation).