feat: implement put() function

Author: streamich

lib/ast.js

@@ -2,47 +2,41 @@
 
 var interpolateSelectors = require('./interpolateSelectors');
 
-var KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
-var KEBAB_MATCHER = function(match) { return '-' + match.toLowerCase(); };
+var KEBAB_REGEX = /[A-Z]/g;
 
-function kebabCase(str) {
-    return str.replace(KEBAB_REGEX, KEBAB_MATCHER);
-}
+function onDecls (selector, decls) {
+    var selectors = selector.split(',');
+    var str = '', strDecls = '';
+    var prop, value;
 
-exports.toCss = function toCss (pojso) {
-    var str = '';
+    for (prop in decls) {
+        value = decls[prop];
 
-    for (var selector in pojso) {
-        var values = pojso[selector];
+        if (value instanceof Object) {
+            var selectorsInterpolated = interpolateSelectors(selectors, prop);
+            str += onDecls(selectorsInterpolated, value);
+        } else {
+            prop = prop.replace(KEBAB_REGEX, '-$&').toLowerCase();
+            strDecls += prop + ':' + value + ';';
+        }
+    }
 
-        // Atrule: @media, @keyframe, ...
+    return str + selector + '{' + strDecls + '}';
+}
+
+function onStyles (styles) {
+    var str = '', selector;
+
+    for (selector in styles) {
         if (selector[0] === '@') {
-            str += selector + '{' + toCss(values) + '}';
+            str += selector + '{' + onStyles(styles[selector]) + '}';
         } else {
-            var selectors = selector.split(',');
-            var declarations = '';
-
-            for (var prop in values) {
-                var value = values[prop];
-
-                switch (typeof value) {
-                case 'string':
-                case 'number':
-                    prop = kebabCase(prop);
-                    declarations += prop + ':' + value + ';';
-                    break;
-                case 'object': {
-                    var selectorsInterpolated = interpolateSelectors(selectors, prop);
-                    var obj = {};
-                    obj[selectorsInterpolated] = value;
-                    str += toCss(obj);
-                    break;
-                }
-                }
-            }
-            str += selectors + '{' + declarations + '}';
+            str += onDecls(selector, styles[selector]);
         }
     }
 
     return str;
-};
+}
+
+exports.onDecls = onDecls;
+exports.onStyles = onStyles;

lib/index.js

@@ -1,31 +1,59 @@
 'use strict';
 
-var h = require('react').createElement;
-var toCss = require('./ast').toCss;
-var hoistGlobalsAndWrapContext = require('./hoistGlobalsAndWrapContext');
 var hash = require('./hash').hash;
+var interpolateSelectors = require('./interpolateSelectors');
 
-function stringify(styles, block) {
-    return toCss(hoistGlobalsAndWrapContext(styles, '.' + block));
-}
-
+var KEBAB_REGEX = /[A-Z]/g;
 var isClient = typeof window === 'object';
 
-exports.create = function () {
+exports.create = function (h) {
     var renderer = {
         raw: '',
         cns: {},
         pfx: ' _',
         cnt: 0
     };
 
+    var putRaw;
+
+    if (isClient) {
+        var sheet = document.head.appendChild(document.createElement('style')).sheet;
+        putRaw = function (rawCss) {
+            sheet.insertRule(rawCss, 0);
+        };
+    } else {
+        putRaw = function (rawCss) {
+            renderer.raw += rawCss;
+        };
+    }
+
+    function put (selector, decls) {
+        var selectors = selector.split(',');
+        var str = '';
+        var prop, value;
+
+        for (prop in decls) {
+            value = decls[prop];
+
+            if (value instanceof Object) {
+                var selectorInterpolated = interpolateSelectors(selectors, prop);
+                put(selectorInterpolated, value);
+            } else {
+                prop = prop.replace(KEBAB_REGEX, '-$&').toLowerCase();
+                str += prop + ':' + value + ';';
+            }
+        }
+
+        str = selector + '{' + str + '}';
+
+        putRaw(str);
+    }
+
     renderer.rule = function(styles, block) {
         if (!block) {
             block = hash(styles);
         }
 
-        var rawCss = stringify(styles, block);
-
         if (isClient) {
             if (process.env.NODE_ENV !== 'production') {
                 if (isClient) {
@@ -46,22 +74,9 @@ exports.create = function () {
 
                 return;
             }
-
-            var el= document.createElement('style');
-
-            document.head.appendChild(el);
-
-            if (process.env.NODE_ENV !== 'production') {
-                if (isClient) {
-                    el.id = 'css-' + block;
-                }
-            }
-
-            el.appendChild(document.createTextNode(rawCss));
-        } else {
-            this.raw += rawCss;
         }
 
+        put(block, styles);
         this.cns[block] = 1;
 
         return ' ' + block;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "pico-style",
+  "name": "zepto-style",
   "version": "0.0.1",
   "description": "Smallest 4th gen CSS-in-JS library",
   "main": "lib/index.js",