feat: make rule() work

Author: streamich

lib/index.js

@@ -10,7 +10,7 @@ exports.create = function (h) {
     var renderer = {
         raw: '',
         cns: {},
-        pfx: ' _',
+        pfx: '_',
         cnt: 0
     };
 
@@ -44,9 +44,10 @@ exports.create = function (h) {
             }
         }
 
-        str = selector + '{' + str + '}';
-
-        putRaw(str);
+        if (str) {
+            str = '.' + selector + '{' + str + '}';
+            putRaw(str);
+        }
     }
 
     renderer.rule = function(styles, block) {
@@ -57,27 +58,30 @@ exports.create = function (h) {
         if (isClient) {
             if (process.env.NODE_ENV !== 'production') {
                 if (isClient) {
+                    /*
                     if (document.getElementById('css-' + block)) {
                         console.error(
                             'ezcss detected class name collision "css-' + block + '". ' +
                                 'Multiple components use the same class name.'
                         );
                     }
+                    */
                 }
             }
 
-            if (this.cns[block]) {
+            if (renderer.cns[block]) {
                 if (process.env.NODE_ENV !== 'production') {
                     // eslint-disable-next-line
-                    console.log('Hydration cache hit: "' + block + '"');
+                    console.info('Hydration cache hit: "' + block + '"');
                 }
 
                 return;
             }
         }
 
+        block = renderer.pfx + block;
         put(block, styles);
-        this.cns[block] = 1;
+        renderer.cns[block] = 1;
 
         return ' ' + block;
     };
@@ -88,14 +92,14 @@ exports.create = function (h) {
 
         var Component = function(props) {
             if (!className) {
-                className = this.rule(styles, block);
+                className = renderer.rule(styles, block);
             }
 
             var dynamicClassName = '';
             var dynamicStylesElement = null;
 
             if (dynamicTemplate) {
-                dynamicClassName = this.pfx + (this.cnt++).toString(36);
+                dynamicClassName = renderer.pfx + (renderer.cnt++).toString(36);
 
                 var dynamicStyles = dynamicTemplate(props);
                 var rawCss = stringify(dynamicStyles, dynamicClassName);
@@ -126,4 +130,6 @@ exports.create = function (h) {
 
         return Component;
     };
+
+    return renderer;
 };