khufu/lib/compile_style.js

A template language for incremental-dom or DSL for javascript views

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

exports.to_postcss = to_postcss;
exports.compile_text = compile_text;
exports.compile = compile;

var _babelTypes = require('babel-types');

var T = _interopRequireWildcard(_babelTypes);

var _babelUtil = require('./babel-util');

var _compiler = require('./compiler');

var _postcss = require('postcss');

var _postcss2 = _interopRequireDefault(_postcss);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function rule(parent, item, cls, opt) {
    var _item = _slicedToArray(item, 3),
        _rule = _item[0],
        selectors = _item[1],
        properties = _item[2];

    if (opt.additional_class) {
        selectors = selectors.map(function (sel) {
            return sel.replace(/^([a-zA-Z0-9-]*)/, '$1' + cls);
        });
    }
    var rule = _postcss2.default.rule({ 'selector': selectors.join(', ') });
    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
        for (var _iterator = properties[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var line = _step.value;

            switch (line[0]) {
                case 'property':
                    {
                        var _line = _slicedToArray(line, 3),
                            _property = _line[0],
                            prop = _line[1],
                            value = _line[2];

                        rule.push(_postcss2.default.decl({ prop: prop, value: value }));
                        break;
                    }
            }
        }
    } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion && _iterator.return) {
                _iterator.return();
            }
        } finally {
            if (_didIteratorError) {
                throw _iteratorError;
            }
        }
    }

    parent.push(rule);
}

function to_postcss(body, opt) {
    var root = _postcss2.default.root();
    var buf = [];
    var cls = (opt.additional_class || "").replace(/^\s*|\s+/g, '.');
    var _iteratorNormalCompletion2 = true;
    var _didIteratorError2 = false;
    var _iteratorError2 = undefined;

    try {
        for (var _iterator2 = body[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
            var item = _step2.value;

            switch (item[0]) {
                case 'rule':
                    {
                        rule(root, item, cls, opt);
                        break;
                    }
                case 'media':
                    {
                        var _item2 = _slicedToArray(item, 3),
                            _media = _item2[0],
                            filter = _item2[1],
                            rules = _item2[2];

                        var atrule = _postcss2.default.rule({ selector: '@media ' + filter });
                        var _iteratorNormalCompletion3 = true;
                        var _didIteratorError3 = false;
                        var _iteratorError3 = undefined;

                        try {
                            for (var _iterator3 = rules[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
                                var item = _step3.value;

                                rule(atrule, item, cls, opt);
                            }
                        } catch (err) {
                            _didIteratorError3 = true;
                            _iteratorError3 = err;
                        } finally {
                            try {
                                if (!_iteratorNormalCompletion3 && _iterator3.return) {
                                    _iterator3.return();
                                }
                            } finally {
                                if (_didIteratorError3) {
                                    throw _iteratorError3;
                                }
                            }
                        }

                        root.push(atrule);
                        break;
                    }
                default:
                    throw (0, _compiler.parse_tree_error)('Unknown element', body);
            }
        }
    } catch (err) {
        _didIteratorError2 = true;
        _iteratorError2 = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion2 && _iterator2.return) {
                _iterator2.return();
            }
        } finally {
            if (_didIteratorError2) {
                throw _iteratorError2;
            }
        }
    }

    return root;
}

function scan_for_tags(body, opt) {
    var _iteratorNormalCompletion4 = true;
    var _didIteratorError4 = false;
    var _iteratorError4 = undefined;

    try {
        for (var _iterator4 = body[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
            var item = _step4.value;

            switch (item[0]) {
                case 'rule':
                    {
                        var _item3 = _slicedToArray(item, 3),
                            _rule = _item3[0],
                            selectors = _item3[1],
                            properties = _item3[2];

                        var _iteratorNormalCompletion5 = true;
                        var _didIteratorError5 = false;
                        var _iteratorError5 = undefined;

                        try {
                            for (var _iterator5 = selectors[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
                                var sel = _step5.value;

                                // add all bare tags
                                if (/^[a-zA-Z0-9]+$/.exec(sel)) {
                                    opt.always_add_class.add(sel);
                                }
                            }
                        } catch (err) {
                            _didIteratorError5 = true;
                            _iteratorError5 = err;
                        } finally {
                            try {
                                if (!_iteratorNormalCompletion5 && _iterator5.return) {
                                    _iterator5.return();
                                }
                            } finally {
                                if (_didIteratorError5) {
                                    throw _iteratorError5;
                                }
                            }
                        }

                        break;
                    }
            }
        }
    } catch (err) {
        _didIteratorError4 = true;
        _iteratorError4 = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion4 && _iterator4.return) {
                _iterator4.return();
            }
        } finally {
            if (_didIteratorError4) {
                throw _iteratorError4;
            }
        }
    }
}

function compile_text(body, opt) {
    scan_for_tags(body, opt);
    return (0, _postcss2.default)(opt.postcss || []).process(body, { parser: function parser(body) {
            return to_postcss(body, opt);
        } }).css;
}

function compile(style, path, opt) {
    var _style2 = _slicedToArray(style, 2),
        _style = _style2[0],
        body = _style2[1];

    if (!path.scope.getData('khufu:style-imported')) {
        path.unshiftContainer("body", T.importDeclaration([T.importSpecifier(T.identifier("add_style"), T.identifier("add_style"))], T.stringLiteral("khufu-runtime")));
        path.scope.setData('khufu:style-imported', true);
    }
    var data = compile_text(body, opt);
    var id = path.scope.generateUidIdentifier('style_remover');
    (0, _babelUtil.push_to_body)(path, T.variableDeclaration('let', [T.variableDeclarator(id, T.callExpression(T.identifier('add_style'), [T.stringLiteral(data)]))]));
    (0, _babelUtil.push_to_body)(path, T.ifStatement(T.memberExpression(T.identifier('module'), T.identifier('hot')), T.blockStatement([T.expressionStatement(T.callExpression(T.memberExpression(T.memberExpression(T.identifier('module'), T.identifier('hot')), T.identifier('dispose')), [id]))])));
}