feat: add toCss()

Author: streamich

build/gulpfile.js

@@ -4,7 +4,7 @@ var pkg = require('../package.json');
 var join = require('path').join;
 
 module.exports = {
-    entry: join(__dirname, '..', 'src', 'index.ts'),
+    entry: join(__dirname, '..', 'lib', 'index.js'),
 
     output: {
         filename: pkg.name + '.min.js',

build/webpack.config.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var configure = require('enzyme').configure;
+var Adapter = require('enzyme-adapter-react-16');
+
+process.env.NODE_ENV = 'production';
+
+configure({
+    adapter: new Adapter()
+});
+
+global.requestAnimationFrame = window.requestAnimationFrame = function(callback) { setTimeout(callback, 17); };

lib/__tests__/setup.js

@@ -0,0 +1,31 @@
+/* eslint-disable */
+'use strict';
+
+var toCss = require('../ast').toCss;
+
+describe('toCss', function() {
+    it('basic example', function() {
+        var css = toCss({
+            '.foo': {
+                color: 'red'
+            }
+        });
+
+        expect(css).toBe('.foo{color:red;}');
+    });
+
+    it('@-rule', function() {
+        var css = toCss({
+            '.foo': {
+                color: 'red'
+            },
+            '@media screen': {
+                '.foo': {
+                    color: 'red'
+                }
+            }
+        });
+
+        expect(css).toBe('.foo{color:red;}@media screen{.foo{color:red;}}');
+    });
+});

lib/__tests__/toCss.test.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var interpolateSelectors = require('./interpolateSelectors');
+
+var KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
+var KEBAB_MATCHER = function(match) { return '-' + match.toLowerCase(); };
+
+function kebabCase(str) {
+    return str.replace(KEBAB_REGEX, KEBAB_MATCHER);
+}
+
+exports.toCss = function toCss (pojso) {
+    var str = '';
+
+    for (var selector in pojso) {
+        var values = pojso[selector];
+
+        // Atrule: @media, @keyframe, ...
+        if (selector[0] === '@') {
+            str += selector + '{' + toCss(values) + '}';
+        } 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 + '}';
+        }
+    }
+
+    return str;
+};

lib/ast.js

@@ -0,0 +1,38 @@
+'use strict';
+
+module.exports = function(parents, selector) {
+    var result = [];
+    var selectors = selector.split(',');
+    var len1 = parents.length;
+    var len2 = selectors.length;
+    var i, j, part1, part2, sel, pos, parent, replacedSelector;
+
+    for (i = 0; i < len2; i++) {
+        sel = selectors[i];
+        pos = sel.indexOf('&');
+
+        if (pos > -1) {
+            part1 = sel.substr(0, pos);
+            part2 = sel.substr(pos + 1);
+
+            for (j = 0; j < len1; j++) {
+                parent = parents[j];
+                replacedSelector = part1 + parent + part2;
+
+                result.push(replacedSelector);
+            }
+        } else {
+            for (j = 0; j < len1; j++) {
+                parent = parents[j];
+
+                if (parent) {
+                    result.push(parent + ' ' + sel);
+                } else {
+                    result.push(sel);
+                }
+            }
+        }
+    }
+
+    return result.join(',');
+};

lib/interpolateSelectors.js

@@ -13,8 +13,6 @@
     "start": "npm run storybook",
     "clean": "rimraf dist && npm run test:visual:clean",
     "build": "npm run clean && npm run build:cjs && npm run build:umd",
-    "build:modules": "gulp build-modules --gulpfile build/gulpfile.js",
-    "build:lib": "gulp build-ts --gulpfile build/gulpfile.js",
     "build:cjs": "webpack -p --config build/webpack.config.cjs.js",
     "build:umd": "webpack -p --config build/webpack.config.umd.js",
     "test": "npm run eslint && npm run test:server && jest",
@@ -91,7 +89,7 @@
     "transformIgnorePatterns": [],
     "testRegex": ".*/__tests__/.*\\.(test|spec)\\.(jsx?)$",
     "setupFiles": [
-      "./src/__tests__/setup.js"
+      "./lib/__tests__/setup.js"
     ],
     "moduleFileExtensions": [
       "js",