ezcss/lib/Renderer.js

Super lite CSS-in-JS

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var util_1 = require("./util");
var hoistGlobalsAndWrapContext_1 = require("./hoistGlobalsAndWrapContext");
var toStylesheet_1 = require("./toStylesheet");
var toCss_1 = require("./toCss");
var createStyleElement_1 = require("./createStyleElement");
var hash_1 = require("./hash");
var Renderer = /** @class */ (function () {
    function Renderer() {
        var _this = this;
        this.raw = '';
        this.cns = {};
        this.rule = function (styles, block) {
            /*
            if (process.env.NODE_ENV !== 'production') {
                if (!block) {
                    const error = new TypeError('ezcss block name not provided for below styles:');
    
                    console.warn(error);
                    console.warn(styles);
                }
            }
            */
            if (!block) {
                block = hash_1.hashStyles(styles);
            }
            var stylesheet = toStylesheet_1.default(hoistGlobalsAndWrapContext_1.default(styles, '.' + block));
            var rawCss = toCss_1.default(stylesheet);
            if (util_1.isClient) {
                if (process.env.NODE_ENV !== 'production') {
                    if (util_1.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 (process.env.NODE_ENV !== 'production') {
                        console.info("Hydration cache hit: \"" + block + "\"");
                    }
                    return;
                }
                var el = createStyleElement_1.default();
                if (process.env.NODE_ENV !== 'production') {
                    if (util_1.isClient) {
                        el.id = 'css-' + block;
                    }
                }
                el.appendChild(document.createTextNode(rawCss));
            }
            else {
                _this.raw += rawCss;
            }
            _this.cns[block] = 1;
            return ' ' + block;
        };
        this.sheet = function (map, block) {
            var result = {};
            if (!block) {
                block = hash_1.hashStyles(map);
            }
            var _loop_1 = function (elementModifier) {
                var styles = map[elementModifier];
                Object.defineProperty(result, elementModifier, {
                    configurable: true,
                    get: function () {
                        var classNames = _this.rule(styles, block + '-' + elementModifier);
                        Object.defineProperty(result, elementModifier, {
                            value: classNames,
                        });
                        return classNames;
                    },
                });
            };
            for (var elementModifier in map) {
                _loop_1(elementModifier);
            }
            return result;
        };
        this.withStyles = function (map, fn, block) {
            if (block === void 0) { block = fn.displayName || fn.name; }
            var styles = _this.sheet(map, block);
            var Component = function (props) {
                if (process.env.NODE_ENV === 'production') {
                    props.styles = styles;
                    return fn(props);
                }
                else {
                    return fn(Object.assign({}, props, { styles: styles }));
                }
            };
            if (process.env.NODE_ENV !== 'production') {
                Component.displayName = block;
            }
            return Component;
        };
        this.useStyles = function (map, fn, block) {
            if (block === void 0) { block = fn.displayName || fn.name; }
            var styles = _this.sheet(map, block);
            var Component = function (props) { return fn(props, styles); };
            if (process.env.NODE_ENV !== 'production') {
                Component.displayName = block;
            }
            return Component;
        };
        this.styled = function (fn, styles, block) {
            if (block === void 0) { block = fn.displayName || fn.name; }
            var className;
            var isElement = typeof fn === 'string';
            var Component = function (props) {
                if (!className) {
                    className = _this.rule(styles, block);
                }
                if (process.env.NODE_ENV === 'production') {
                    props.className = (props.className || '') + className;
                    return isElement ? react_1.createElement(fn, props) : fn(props);
                }
                else {
                    return react_1.createElement(fn, Object.assign({}, props, { className: (props.className || '') + className }));
                }
            };
            if (process.env.NODE_EVN !== 'production') {
                Component.displayName = "styled(" + block + ")";
            }
            return Component;
        };
        this.css = function (styles, block) { return function (fn) {
            if (!block) {
                block = fn.displayName || fn.name;
            }
            var rule = _this.rule;
            var prototype = fn.prototype;
            var render_ = prototype.render;
            var className = '';
            prototype.render = function () {
                var element = render_.call(this);
                if (element) {
                    if (!className) {
                        className = rule(styles, block);
                    }
                    if (process.env.NODE_ENV === 'production') {
                        element.props.className = (element.props.className || '') + className;
                    }
                    else {
                        element = react_1.cloneElement(element, {
                            className: (element.props.className || '') + className,
                        });
                    }
                }
                return element;
            };
        }; };
    }
    Renderer.prototype.flush = function () {
        var raw = this.raw;
        this.raw = '';
        return raw;
    };
    return Renderer;
}());
exports.default = Renderer;