feat: implement styled()

streamich · Mar 13, 2018 · 33d31b4 · 33d31b4
1 parent cf2070f
commit 33d31b4
Showing 1 changed file with 22 additions and 40 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -100,82 +100,64 @@ exports.create = function (h) {
         return ' ' + block;
     };
 
-    renderer.styled = function (fn, styles, dynamicTemplate, block) {
+    renderer.jsx = function (fn, styles, block) {
         var className;
         var isElement = typeof fn === 'string';
 
         if (!block && !isElement)
             block = fn.displayName || fn.name;
 
-        var Component = function(props) {
+        var Component = function (props) {
             if (!className) {
                 className = renderer.rule(styles, block);
             }
 
-            var dynamicClassName = '';
-            var dynamicStylesElement = null;
-
-            if (dynamicTemplate) {
-                dynamicClassName = renderer.pfx + (renderer.cnt++).toString(36);
-
-                var dynamicStyles = dynamicTemplate(props);
-                var rawCss = stringify(dynamicStyles, dynamicClassName);
-
-                dynamicStylesElement = h('style', {
-                    dangerouslySetInnerHTML: {__html: rawCss}
-                });
-            }
+            var copy = props;
 
             if (process.env.NODE_ENV !== 'production') {
-                return [
-                    dynamicStylesElement,
-                    h(fn, Object.assign({}, props, {className: (props.className || '') + className + dynamicClassName}))
-                ];
+                copy = Object.assign({}, props);
             }
 
-            props.className = (props.className || '') + className + dynamicClassName;
+            var dynamicClassName = fromCache(props.css);
+            delete copy.css;
+
+            copy.className = (props.className || '') + className + dynamicClassName;
 
-            return [
-                dynamicStylesElement,
-                isElement ? h(fn, props) : fn(props)
-            ];
+            return isElement ? h(fn, copy) : fn(copy);
         };
 
-        if (process.env.NODE_EVN !== 'production' && block) {
-            Component.displayName = 'styled(' + block + ')';
+        if (block && (process.env.NODE_EVN !== 'production')) {
+            Component.displayName = 'jsx(' + block + ')';
         }
 
         return Component;
     };
 
-    renderer.jsx = function (fn, styles, block) {
-        var className;
+    renderer.styled = function (fn, styles, dynamicTemplate, block) {
         var isElement = typeof fn === 'string';
+        var jsxComponent = renderer.jsx(fn, styles, block);
 
         if (!block && !isElement)
             block = fn.displayName || fn.name;
 
-        var Component = function (props) {
-            if (!className) {
-                className = renderer.rule(styles, block);
-            }
-
+        var Component = function(props) {
             var copy = props;
 
             if (process.env.NODE_ENV !== 'production') {
                 copy = Object.assign({}, props);
             }
 
-            var dynamicClassName = fromCache(props.css);
-            delete copy.css;
-
-            copy.className = (props.className || '') + className + dynamicClassName;
+            if (dynamicTemplate) {
+                copy.css = dynamicTemplate(props);
+            }
 
-            return isElement ? h(fn, copy) : fn(copy);
+            return jsxComponent(copy);
         };
 
-        if (block && (process.env.NODE_EVN !== 'production')) {
-            Component.displayName = 'jsx(' + block + ')';
+        if (process.env.NODE_EVN !== 'production') {
+            if (block || (typeof fn === 'function')) {
+                Component.displayName = 'styled(' + (block || fn.displayName || fn.name) + ')';
+            }
         }
 
         return Component;