feat: add useStyles interface

.storybook/withStyles.stories.js

@@ -26,7 +26,22 @@ const Example1 = withStyles(styles, function Example1 (props) {
     )
 });
 
+const styles2 = {
+    main: {
+        border: '1px solid red',
+    }
+};
+
+function HelloWorld ({styles}) {
+    return h('div', {className: styles.main}, 'Hello world!');
+}
+
+const Bordered = withStyles(styles2, HelloWorld);
+
 storiesOf('Addons/withStyles()', module)
     .add('Default', () =>
         h(Example1)
     )
+    .add('Hello world', () =>
+        h(Bordered)
+    )

addon/useStyles.js

@@ -0,0 +1,20 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    renderer.useStyles = function (map, fn, block) {
+        block = block || fn.displayName || fn.name;
+
+        var styles = renderer.sheet(map, block);
+        var Component = function (props) {
+            return fn(props, styles);
+        };
+
+        if (process.env.NODE_ENV !== 'production') {
+            if (block) {
+                Component.displayName = 'useStyles(' + block + ')';
+            }
+        }
+
+        return Component;
+    };
+};

addon/withStyles.js

@@ -19,7 +19,7 @@ exports.addon = function (renderer) {
 
         if (process.env.NODE_ENV !== 'production') {
             if (block) {
-                Component.displayName = block;
+                Component.displayName = 'withStyles(' + block + ')';
             }
         }