stylesheet-loader/lib/__tests__/transformer.js

Stylesheet loader.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var css = require("css");
var transformer_1 = require("../transformer");
describe('transformer', function () {
    it('should replace some characters of selector', function () {
        var result = transformer_1.default.sanitizeSelector('.abc');
        expect(result).toEqual('abc');
    });
    it('should transform nested selector when set transformDescendantCombinator to true', function () {
        var result = transformer_1.default.sanitizeSelector('.a .b', true);
        expect(result).toEqual('a_b');
    });
    it('should return null when writing multiple selectors', function () {
        var result = transformer_1.default.sanitizeSelector('.abc .bcd');
        expect(result).toBe('abc_bcd');
    });
    it('should convert prop with camelCase', function () {
        var flexDirection = transformer_1.default.convertProp('flex-direction');
        var boxOrientWebkit = transformer_1.default.convertProp('-webkit-box-orient');
        var boxOrientMoz = transformer_1.default.convertProp('-moz-box-orient');
        var boxOrientO = transformer_1.default.convertProp('-o-box-orient');
        var boxOrientUC = transformer_1.default.convertProp('-uc-box-orient');
        expect(flexDirection).toEqual('flexDirection');
        expect(boxOrientWebkit).toEqual('WebkitBoxOrient');
        expect(boxOrientMoz).toEqual('MozBoxOrient');
        expect(boxOrientO).toEqual('OBoxOrient');
        expect(boxOrientUC).toEqual('UcBoxOrient');
    });
    it('should remove px of value', function () {
        var valueWithPx = transformer_1.default.convertValue('width', '16px');
        var valueNoWithPx = transformer_1.default.convertValue('width', '16');
        expect(valueWithPx).toEqual('16px');
        expect(valueNoWithPx).toEqual(16);
    });
    it('should convert the rule object to stylesheet object', function () {
        var source = "\n      .container {\n        width: 750;\n        height: 800;\n        color: var(--main-color);\n      }\n      .header_content {\n        width: 750;\n        height: 200;\n        border: '1 solid red';\n      }\n    ";
        var data = parse(source);
        expect(data.container.width).toEqual(750);
        expect(data.container.height).toEqual(800);
        expect(data.header_content.width).toEqual(750);
        expect(data.header_content.height).toEqual(200);
    });
    it('should not compile comment', function () {
        var source = "\n      .container {\n        /* width must be 750 */\n        width: 750;\n      }\n    ";
        var data = parse(source);
        expect(data).toEqual({
            container: {
                width: 750,
            },
        });
    });
    it('should be returned the value of css variable', function () {
        var style = transformer_1.default.convert({
            type: 'rule',
            selectors: [':root'],
            declarations: [
                {
                    type: 'declaration',
                    property: '--color-name',
                    value: 'blue',
                },
            ],
        });
        expect(style.colorName).toEqual('blue');
    });
    it('shoule change call parameters to runtime parameters', function () {
        var value = transformer_1.default.convertCSSVariableValue('var(--color-name)');
        expect(value).toEqual('var(colorName)');
    });
});
function parse(code) {
    var stylesheet = css.parse(code).stylesheet;
    var data = {};
    stylesheet.rules.forEach(function (rule) {
        var style = {};
        if (rule.type === 'rule') {
            style = transformer_1.default.convert(rule);
        }
        rule.selectors.forEach(function (selector) {
            var sanitizedSelector = transformer_1.default.sanitizeSelector(selector);
            data[sanitizedSelector] = style;
        });
    });
    return data;
}
//# sourceMappingURL=transformer.js.map