@sencha/cmd-linux-64/dist/js/node_modules/fashion/test/specs/css_variables.js

Productivity and performance optimization tool for building applications with Sencha Ext JS

var assert = require('assert');
var helpers = require('../helpers.js');

describe('css variables', function(){
    helpers.test('should support detecting exports', [
        '$foo: dynamic(red);',
        'a {--foo: export; prop: bar baz $foo;}'
    ], [
        'a {',
        '    --foo: red;',
        '    prop: bar baz red;',
        '    prop: bar baz var(--foo);',
        '}'
    ]);

    helpers.test('should support detecting passthrough variables', [
        '$foo: dynamic(red);',
        '$foo2: $foo;',
        'a {--foo: export; prop: $foo2;}'
    ], [
        'a {',
        '    --foo: red;',
        '    prop: red;',
        '    prop: var(--foo);',
        '}'
    ]);

    helpers.test('should support detecting passthrough dynamic variables', [
        '$foo: dynamic(red);',
        '$foo2: dynamic($foo);',
        'a {--foo: export; prop: $foo2;}'
    ], [
        'a {',
        '    --foo: red;',
        '    prop: red;',
        '    prop: var(--foo);',
        '}'
    ]);

    helpers.test('should not export non-dynamic variables', [
        '$foo: red;',
        'a {--foo: export; prop: $foo;}'
    ], [
        'a {',
        '    --foo: export;',
        '    prop: red;',
        '}'
    ]);

    helpers.test('should support multiple css variable references', [
        '$foo: dynamic(red);',
        '$foo2: dynamic(blue);',
        'a {--foo: export; --foo2: export; prop: $foo $foo2;}'
    ], [
        'a {',
        '    --foo: red;',
        '    --foo2: blue;',
        '    prop: red blue;',
        '    prop: var(--foo) var(--foo2);',
        '}'
    ]);

    helpers.test('should support multiple css variable references with nested references', [
        '$foo: dynamic(red);',
        '$foo2: dynamic(blue $foo);',
        'a {--foo: export; --foo2: export; prop: $foo $foo2;}'
    ], [
        'a {',
        '    --foo: red;',
        '    --foo2: blue red;',
        '    prop: red blue red;',
        '    prop: var(--foo) var(--foo2);',
        '}'
    ]);

    helpers.test('should pass through calculated variables', [
        '$foo: dynamic(red);',
        '$foo2: green;',
        '$foo3: mix($foo, $foo2, 10%);',
        'a {--foo: export; prop: $foo3;}'
    ], [
        'a {',
        '    --foo: red;',
        '    prop: #197300;',
        '}'
    ]);

    helpers.test('should not export calculated values that are not dynamic', [
        '$foo: dynamic(red);',
        '$foo2: dynamic(green);',
        '$foo3: mix($foo, $foo2, 10%);',
        'a {--foo: export; --foo2: export; prop: $foo3;}'
    ], [
        'a {',
        '    --foo: red;',
        '    --foo2: green;',
        '    prop: #197300;',
        '}'
    ]);

    helpers.xtest('should export calculated values that are dynamic and based on exported variables', [
        '$foo: dynamic(red);',
        '$foo2: dynamic(green);',
        '$foo3: dynamic(mix($foo, $foo2, 10%));',
        'a {--foo: export; --foo2: export; prop: $foo3;}'
    ], [
        'a {',
        '    --foo: red;',
        '    --foo3: #197300;',
        '    --foo2: green;',
        '    prop: #197300;',
        '    prop: var(--foo3);',
        '}'
    ]);

    helpers.test('should allow creating auto-exported variables', [
        '$bar: dynamic(red);',
        '$foo: create_css_variable("new-name", mix($bar, green, 10), $bar);',
        'a {--bar: export;}',
        'b {prop: $foo;}'
    ], [
        'a {',
        '    --bar: red;',
        '    --new-name: #197300;',
        '}',
        'b {',
        '    prop: #197300;',
        '    prop: var(--new-name);',
        '}'
    ]);

    helpers.test('should allow creating auto-exported dynamic variables', [
        '$bar: dynamic(red);',
        '$foo: dynamic(create_css_variable("new-name", mix($bar, green, 10), $bar));',
        'a {--bar: export;}',
        'b {prop: $foo;}'
    ], [
        'a {',
        '    --bar: red;',
        '    --new-name: #197300;',
        '}',
        'b {',
        '    prop: #197300;',
        '    prop: var(--new-name);',
        '}'
    ]);

    helpers.test('should automatically export referenced dynamic variables', [
        '$bar: dynamic(red);',
        '$foo: dynamic(mix($bar, green, 10));',
        'a {--foo: export;}',
        'b {prop: $foo;}'
    ], [
        'a {',
        '    --foo: #197300;',
        '}',
        'b {',
        '    prop: #197300;',
        '    prop: var(--foo);',
        '}'
    ]);


    helpers.test("should properly parse supported syntax for css variables", [
        "$variable: 'some-value'",
        ".a {",
        "  --foo: red;",
        "  --foo: {",
        "        some-prop: green;",
        "    };",
        "  --bar: var bleep = \"blarp\" + ",
        "      \"baz\";",
        "  --code: function foo(){ console.log(foo); };",
        "  --code2: function #{$variable}(){ console.log(foo); };",
        "}",
        "",
        ".b {",
        "    foo: var(--foo);",
        "}"
    ], [
        ".a {",
        "    --foo: red;",
        "    --foo: {",
        "        some-prop: green;",
        "    };",
        "    --bar: var bleep = \"blarp\" + ",
        "      \"baz\";",
        "    --code: function foo(){ console.log(foo); };",
        "    --code2: function some-value(){ console.log(foo); };",
        "}",
        ".b {",
        "    foo: var(--foo);",
        "}"
    ]);
    
    helpers.test("should properly detect uses of css variables in color stops", [
        '$theme-name: "theme-material";',
        '$dark-mode: false;',
        '$background-color: blue;',
        '',
        '',
        '$content-panel-grid-line: dynamic(if($theme-name == "theme-material", if($dark-mode, #3a3a3a, #f5f5f5), #f5f5f5));',
        '$content-panel-grid-background: dynamic(darken($content-panel-grid-line, 5%));',
        '',
        'html {',
        '    --content-panel-grid-line: export;',
        '    --content-panel-grid-background: export;',
        '}',
        '',
        '.main-nav-body-el {',
        '    // The 1.1px is needed for Edge to render correctly',
        '    background-image:',
        '    linear-gradient(00deg, $content-panel-grid-line 1.1px, transparent 0),',
        '    linear-gradient(90deg, $content-panel-grid-line 1.1px, transparent 0);',
        '    background-size: 20px 20px;',
        '    background-color: $content-panel-grid-background;',
        '.demo-solid-background {',
        '        background-color: $background-color;',
        '    }',
        '}',
        '',
        '.ux-code .x-body-el {',
        '    background-color: white;',
        '}'
    ], [
        'html {',
        '    --content-panel-grid-line: #f5f5f5;',
        '    --content-panel-grid-background: #e8e8e8;',
        '}',
        '.main-nav-body-el {',
        '    background-image: linear-gradient(0deg, #f5f5f5 1.1px, transparent 0), linear-gradient(90deg, #f5f5f5 1.1px, transparent 0);',
        '    background-image: linear-gradient(0deg, var(--content-panel-grid-line) 1.1px, transparent 0), linear-gradient(90deg, var(--content-panel-grid-line) 1.1px, transparent 0);',
        '    background-size: 20px 20px;',
        '    background-color: #e8e8e8;',
        '    background-color: var(--content-panel-grid-background);',
        '}',
        '.main-nav-body-el .demo-solid-background {',
        '    background-color: blue;',
        '}',
        '.ux-code .x-body-el {',
        '    background-color: white;',
        '}'
    ]);
});