diff --git a/lib/index.js b/lib/index.js index c0020d09..f833f8c5 100644 --- a/lib/index.js +++ b/lib/index.js @@ -191,7 +191,10 @@ Builder.prototype.build = function(options) { // inject the library name as prefix (e.g. "sap.m" as "_sap_m") if (options.library && typeof options.library.name === "string") { const libName = config.libName = options.library.name; + config.libPath = libName.replace(/\./g, "/"); config.prefix = "_" + libName.replace(/\./g, "_") + "_"; + } else { + config.prefix = ""; // no library, no prefix } // Keep filename for later usage (see ImportCollectorPlugin) as less modifies the parserOptions.filename @@ -287,10 +290,12 @@ Builder.prototype.build = function(options) { // generate the skeleton-css and the less-variables const CSSVariablesCollectorPlugin = require("./plugin/css-variables-collector"); const oCSSVariablesCollector = new CSSVariablesCollectorPlugin(config); + const oVariableCollector = new VariableCollectorPlugin(options.compiler); result.cssSkeleton = tree.toCSS(Object.assign({}, options.compiler, { - plugins: [oCSSVariablesCollector] + plugins: [oCSSVariablesCollector, oVariableCollector] })); - result.cssVariablesSource = oCSSVariablesCollector.toLessVariables(); + const varsOverride = oVariableCollector.getAllVariables(); + result.cssVariablesSource = oCSSVariablesCollector.toLessVariables(varsOverride); if (oRTL) { const oCSSVariablesCollectorRTL = new CSSVariablesCollectorPlugin(config); result.cssSkeletonRtl = tree.toCSS(Object.assign({}, options.compiler, { diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index 53a373e5..6b9fdc35 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -11,12 +11,13 @@ const CSSVariablesCollectorPlugin = module.exports = function(config) { this.ruleStack = []; this.mixinStack = []; this.parenStack = []; - this.importStack = []; }; CSSVariablesCollectorPlugin.prototype = { + // needed to keep the less variable references intact to use this info for the CSS variables references isPreEvalVisitor: true, + isReplacing: true, _isInMixinOrParen() { @@ -27,27 +28,44 @@ CSSVariablesCollectorPlugin.prototype = { return this.ruleStack.length > 0 && !this.ruleStack[this.ruleStack.length - 1].variable; }, - _isInGlobalOrBaseImport() { - return this.config.libName !== "sap.ui.core" && this.importStack.filter((importNode) => { - return /\/(?:global|base)\.less$/.test(importNode.importedFilename); - }).length > 0; + _isVarInLibrary({filename} = {}) { + // for libraries we check that the file is within the libraries theme path + // in all other cases with no filename (indicates calculated variables) + // or in case of variables in standalone less files we just include them! + const regex = new RegExp(`(^|/)${this.config.libPath}/themes/`); + const include = !filename || + (this.config.libPath ? regex.test(filename) : true); + return include; }, _isRelevant() { return !this._isInMixinOrParen() && this._isVarInRule(); }, - toLessVariables() { + toLessVariables(varsOverride) { + const vars = {}; + Object.keys(this.vars).forEach((key) => { + const override = this.vars[key].updateAfterEval && varsOverride[key] !== undefined; + /* + if (override) { + console.log(`Override variable "${key}" from "${this.vars[key].css}" to "${varsOverride[key]}"`); + } + */ + vars[key] = { + css: override ? varsOverride[key] : this.vars[key].css, + export: this.vars[key].export + }; + }); let lessVariables = ""; - Object.keys(this.vars).forEach((value, index) => { - lessVariables += "@" + value + ": " + this.vars[value].css + ";\n"; + Object.keys(vars).forEach((value, index) => { + lessVariables += "@" + value + ": " + vars[value].css + ";\n"; }); Object.keys(this.calcVars).forEach((value, index) => { lessVariables += "@" + value + ": " + this.calcVars[value].css + ";\n"; }); lessVariables += "\n:root {\n"; - Object.keys(this.vars).forEach((value, index) => { - if (this.vars[value].export) { + Object.keys(vars).forEach((value, index) => { + if (vars[value].export) { lessVariables += "--" + value + ": @" + value + ";\n"; } }); @@ -89,15 +107,17 @@ CSSVariablesCollectorPlugin.prototype = { visitOperation(node, visitArgs) { if (this._isRelevant()) { + // console.log("visitOperation", this.ruleStack[this.ruleStack.length - 1], this._getCSS(node)); return new less.tree.Call("calc", [new less.tree.Expression([node.operands[0], new less.tree.Anonymous(node.op), node.operands[1]])]); } return node; }, visitCall(node, visitArgs) { - // if variables are used inside rules, generate a new dynamic variable for it! + // if variables are used inside rules, generate a new calculated variable for it! const isRelevantFunction = typeof less.tree.functions[node.name] === "function" && ["rgba"].indexOf(node.name) === -1; if (this._isRelevant() && isRelevantFunction) { + // console.log("visitCall", this.ruleStack[this.ruleStack.length - 1], this._getCSS(node)); const css = this._getCSS(node); let newName = this.config.prefix + "function_" + node.name + Object.keys(this.vars).length; // check for duplicate value in vars already @@ -109,7 +129,7 @@ CSSVariablesCollectorPlugin.prototype = { } this.calcVars[newName] = { css: css, - export: !this._isInGlobalOrBaseImport() + export: this._isVarInLibrary() }; return new less.tree.Call("var", [new less.tree.Anonymous("--" + newName, node.index, node.currentFileInfo, node.mapLines)]); } @@ -119,6 +139,7 @@ CSSVariablesCollectorPlugin.prototype = { visitNegative(node, visitArgs) { // convert negative into calc function if (this._isRelevant()) { + // console.log("visitNegative", this.ruleStack[this.ruleStack.length - 1], this._getCSS(node)); return new less.tree.Call("calc", [new less.tree.Expression([new less.tree.Anonymous("-1"), new less.tree.Anonymous("*"), node.value])]); } return node; @@ -133,6 +154,19 @@ CSSVariablesCollectorPlugin.prototype = { }, visitRule(node, visitArgs) { + // check rule for being a variable declaration + const isVarDeclaration = typeof node.name === "string" && node.name.startsWith("@"); + if (!this._isInMixinOrParen() && isVarDeclaration) { + // add the variable declaration to the list of vars + const varName = node.name.substr(1); + const isVarInLib = this._isVarInLibrary({ + filename: node.currentFileInfo.filename + }); + this.vars[varName] = { + css: this._getCSS(node.value), + export: isVarInLib + }; + } // store the rule context for the call variable extraction this.ruleStack.push(node); return node; @@ -168,29 +202,13 @@ CSSVariablesCollectorPlugin.prototype = { return node; }, - visitImport(node, visitArgs) { - // store the import context - this.importStack.push(node); - return node; - }, - - visitImportOut(node) { - // remove import context - this.importStack.pop(); - return node; - }, - - visitRuleset(node, visitArgs) { - node.rules.forEach((value) => { - const isVarDeclaration = value instanceof less.tree.Rule && typeof value.name === "string" && value.name.startsWith("@"); - if (!this._isInMixinOrParen() && isVarDeclaration) { - // add the variable declaration to the list of vars - this.vars[value.name.substr(1)] = { - css: this._getCSS(value.value), - export: !this._isInGlobalOrBaseImport() - }; - } - }); + visitUrl(node, visitArgs) { + // we mark the less variables which should be updated after eval + // => strangewise less variables with "none" values are also urls + // after the less variables have been evaluated + if (this.ruleStack.length > 0 && this.ruleStack[0].variable) { + this.vars[this.ruleStack[0].name.substr(1)].updateAfterEval = true; + } return node; } diff --git a/test/expected/complex/test-cssvars-skeleton.css b/test/expected/complex/test-cssvars-skeleton.css index 2f2005e0..20308ea4 100644 --- a/test/expected/complex/test-cssvars-skeleton.css +++ b/test/expected/complex/test-cssvars-skeleton.css @@ -9,6 +9,34 @@ a:hover { color: #fff; background: var(--link-color); } +.background { + background-image: var(--backgroundImage); +} .lazy-eval { width: var(--var); } +.nested .calc-vars { + height: var(--c); + width: var(--d); + color: var(--function_lighten14); + top: calc(-1 * var(--top)); + line-height: calc(var(--lineHeight) / 2); + background: #428bca; + border-color: #92bce0; + background: #5697d0; +} +.nested .calc-vars-duplicate { + color: var(--function_lighten14); + padding-left: calc(20px + 0.5rem); + border-color: #ffffff; + background: #ffffff; +} +.nested .calc-vars-duplicate somePrefix.somePadding { + padding: 1rem; + box-sizing: border-box; +} +@media (max-width: 599px) { + .nested .calc-vars-duplicate somePrefix.somePadding { + padding: 0; + } +} diff --git a/test/expected/complex/test-cssvars-variables.css b/test/expected/complex/test-cssvars-variables.css index 731af96c..e684ba3a 100644 --- a/test/expected/complex/test-cssvars-variables.css +++ b/test/expected/complex/test-cssvars-variables.css @@ -3,6 +3,15 @@ --link-color-hover: #3071a9; --other-var: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15), inset 0 -0.0625rem 0 0 #428bca; --link-color-active: var(--link-color); + --backgroundVariant: 1; + --backgroundImage: url(img.png); + --a: 100%; --var: var(--a); - --a: 9%; + --b: #245682; + --padLeft: 20px; + --top: 5rem; + --lineHeight: 2rem; + --c: calc(20%); + --d: -100%; + --function_lighten14: #3071a9; } diff --git a/test/expected/complex/test-cssvars-variables.source.less b/test/expected/complex/test-cssvars-variables.source.less new file mode 100644 index 00000000..88cdd999 --- /dev/null +++ b/test/expected/complex/test-cssvars-variables.source.less @@ -0,0 +1,33 @@ +@link-color: #428bca; +@link-color-hover: darken(@link-color, 10%); +@other-var: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15), inset 0 -0.0625rem 0 0 @link-color; +@link-color-active: @link-color; +@backgroundVariant: 1; +@backgroundImage: url(img.png); +@a: 100%; +@var: @a; +@b: darken(@link-color-active, 20%); +@padLeft: 20px; +@top: 5rem; +@lineHeight: 2rem; +@c: calc(100% - 80px); +@d: -@a; +@function_lighten14: lighten(@b, 10%); + +:root { +--link-color: @link-color; +--link-color-hover: @link-color-hover; +--other-var: @other-var; +--link-color-active: @link-color-active; +--backgroundVariant: @backgroundVariant; +--backgroundImage: @backgroundImage; +--a: @a; +--var: @var; +--b: @b; +--padLeft: @padLeft; +--top: @top; +--lineHeight: @lineHeight; +--c: @c; +--d: @d; +--function_lighten14: @function_lighten14; +} diff --git a/test/expected/complex/test.css b/test/expected/complex/test.css index 653be53a..351dc9f5 100644 --- a/test/expected/complex/test.css +++ b/test/expected/complex/test.css @@ -9,6 +9,34 @@ a:hover { color: #fff; background: #428bca; } +.background { + background-image: url(img.png); +} .lazy-eval { width: 9%; } +.nested .calc-vars { + height: calc(20%); + width: -100%; + color: #3071a9; + top: -5rem; + line-height: 1rem; + background: #428bca; + border-color: #92bce0; + background: #5697d0; +} +.nested .calc-vars-duplicate { + color: #3071a9; + padding-left: calc(20px + 0.5rem); + border-color: #ffffff; + background: #ffffff; +} +.nested .calc-vars-duplicate somePrefix.somePadding { + padding: 1rem; + box-sizing: border-box; +} +@media (max-width: 599px) { + .nested .calc-vars-duplicate somePrefix.somePadding { + padding: 0; + } +} diff --git a/test/expected/libraries/lib1/my/ui/lib/themes/base/library-RTL.css b/test/expected/libraries/lib1/my/ui/lib/themes/base/library-RTL.css index b4fa40b4..6b4864d3 100644 --- a/test/expected/libraries/lib1/my/ui/lib/themes/base/library-RTL.css +++ b/test/expected/libraries/lib1/my/ui/lib/themes/base/library-RTL.css @@ -6,4 +6,4 @@ } /* Inline theming parameters */ -#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22color1%22%3A%22%23fefefe%22%7D')} +#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22color1%22%3A%22%23fefefe%22%2C%22url1%22%3A%22url(%27111%27)%22%7D')} diff --git a/test/expected/libraries/lib1/my/ui/lib/themes/base/library.css b/test/expected/libraries/lib1/my/ui/lib/themes/base/library.css index ab288cc3..97e09c5c 100644 --- a/test/expected/libraries/lib1/my/ui/lib/themes/base/library.css +++ b/test/expected/libraries/lib1/my/ui/lib/themes/base/library.css @@ -6,4 +6,4 @@ } /* Inline theming parameters */ -#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22color1%22%3A%22%23fefefe%22%7D')} +#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22color1%22%3A%22%23fefefe%22%2C%22url1%22%3A%22url(%27111%27)%22%7D')} diff --git a/test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.css b/test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.css new file mode 100644 index 00000000..73cdbe0f --- /dev/null +++ b/test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.css @@ -0,0 +1,10 @@ +:root { + --color1: #ffffff; + --url1: url('../base/111'); +} +.fooContrast { + --color1: #000000; +} + +/* Inline theming parameters */ +#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22color1%22%3A%22%23ffffff%22%2C%22url1%22%3A%22url(%27..%2Fbase%2F111%27)%22%7D%2C%22scopes%22%3A%7B%22fooContrast%22%3A%7B%22color1%22%3A%22%23000000%22%7D%7D%7D')} diff --git a/test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.source.less b/test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.source.less new file mode 100644 index 00000000..af3758ba --- /dev/null +++ b/test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.source.less @@ -0,0 +1,7 @@ +@color1: #ffffff; +@url1: url('../base/111'); + +:root { +--color1: @color1; +--url1: @url1; +} diff --git a/test/expected/libraries/lib1/my/ui/lib/themes/foo/library-RTL.css b/test/expected/libraries/lib1/my/ui/lib/themes/foo/library-RTL.css index 98be25eb..6e9b2fc1 100644 --- a/test/expected/libraries/lib1/my/ui/lib/themes/foo/library-RTL.css +++ b/test/expected/libraries/lib1/my/ui/lib/themes/foo/library-RTL.css @@ -10,4 +10,4 @@ } /* Inline theming parameters */ -#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22color1%22%3A%22%23ffffff%22%7D%2C%22scopes%22%3A%7B%22fooContrast%22%3A%7B%22color1%22%3A%22%23000000%22%7D%7D%7D')} +#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22color1%22%3A%22%23ffffff%22%2C%22url1%22%3A%22url(%27..%2Fbase%2F111%27)%22%7D%2C%22scopes%22%3A%7B%22fooContrast%22%3A%7B%22color1%22%3A%22%23000000%22%7D%7D%7D')} diff --git a/test/expected/libraries/lib1/my/ui/lib/themes/foo/library.css b/test/expected/libraries/lib1/my/ui/lib/themes/foo/library.css index d6ef449d..4a457b5d 100644 --- a/test/expected/libraries/lib1/my/ui/lib/themes/foo/library.css +++ b/test/expected/libraries/lib1/my/ui/lib/themes/foo/library.css @@ -10,4 +10,4 @@ } /* Inline theming parameters */ -#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22color1%22%3A%22%23ffffff%22%7D%2C%22scopes%22%3A%7B%22fooContrast%22%3A%7B%22color1%22%3A%22%23000000%22%7D%7D%7D')} +#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22color1%22%3A%22%23ffffff%22%2C%22url1%22%3A%22url(%27..%2Fbase%2F111%27)%22%7D%2C%22scopes%22%3A%7B%22fooContrast%22%3A%7B%22color1%22%3A%22%23000000%22%7D%7D%7D')} diff --git a/test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton-RTL.css b/test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton-RTL.css new file mode 100644 index 00000000..dad773c3 --- /dev/null +++ b/test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton-RTL.css @@ -0,0 +1,10 @@ +.myUiLibRule1 { + color: var(--color1); +} +.myUiLibRule2 { + padding: 1px 4px 3px 2px; +} +.fooContrast.myUiLibRule1, +.fooContrast .myUiLibRule1 { + color: var(--color1); +} diff --git a/test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton.css b/test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton.css new file mode 100644 index 00000000..b37079b9 --- /dev/null +++ b/test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton.css @@ -0,0 +1,10 @@ +.myUiLibRule1 { + color: var(--color1); +} +.myUiLibRule2 { + padding: 1px 2px 3px 4px; +} +.fooContrast.myUiLibRule1, +.fooContrast .myUiLibRule1 { + color: var(--color1); +} diff --git a/test/expected/libraries/lib2/my/ui/lib/themes/bar/library-RTL.css b/test/expected/libraries/lib2/my/ui/lib/themes/bar/library-RTL.css index bed836dc..7216c401 100644 --- a/test/expected/libraries/lib2/my/ui/lib/themes/bar/library-RTL.css +++ b/test/expected/libraries/lib2/my/ui/lib/themes/bar/library-RTL.css @@ -10,4 +10,4 @@ } /* Inline theming parameters */ -#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22color1%22%3A%22%23ffffff%22%7D%2C%22scopes%22%3A%7B%22barContrast%22%3A%7B%22color1%22%3A%22%23000000%22%7D%7D%7D')} +#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22color1%22%3A%22%23ffffff%22%2C%22url1%22%3A%22url(%27..%2Fbase%2F111%27)%22%7D%2C%22scopes%22%3A%7B%22barContrast%22%3A%7B%22color1%22%3A%22%23000000%22%7D%7D%7D')} diff --git a/test/expected/libraries/lib2/my/ui/lib/themes/bar/library.css b/test/expected/libraries/lib2/my/ui/lib/themes/bar/library.css index 35069100..5dfa9df9 100644 --- a/test/expected/libraries/lib2/my/ui/lib/themes/bar/library.css +++ b/test/expected/libraries/lib2/my/ui/lib/themes/bar/library.css @@ -10,4 +10,4 @@ } /* Inline theming parameters */ -#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22color1%22%3A%22%23ffffff%22%7D%2C%22scopes%22%3A%7B%22barContrast%22%3A%7B%22color1%22%3A%22%23000000%22%7D%7D%7D')} +#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22color1%22%3A%22%23ffffff%22%2C%22url1%22%3A%22url(%27..%2Fbase%2F111%27)%22%7D%2C%22scopes%22%3A%7B%22barContrast%22%3A%7B%22color1%22%3A%22%23000000%22%7D%7D%7D')} diff --git a/test/expected/simple/test-cssvars-variables.source.less b/test/expected/simple/test-cssvars-variables.source.less new file mode 100644 index 00000000..b2d3a9ab --- /dev/null +++ b/test/expected/simple/test-cssvars-variables.source.less @@ -0,0 +1,5 @@ +@myColor: #ff0000; + +:root { +--myColor: @myColor; +} diff --git a/test/fixtures/complex/test.less b/test/fixtures/complex/test.less index 748218b6..ddf767e4 100644 --- a/test/fixtures/complex/test.less +++ b/test/fixtures/complex/test.less @@ -3,6 +3,9 @@ @link-color-hover: darken(@link-color, 10%); @other-var: 0 0 0.25rem 0 rgba(0, 0, 0, 0.15), inset 0 -0.0625rem 0 0 @link-color; @link-color-active: @link-color; +@backgroundVariant: 2; +@backgroundImage: extract(url(./img.png) none, @backgroundVariant); +@backgroundVariant: 1; // Usage a, @@ -16,6 +19,9 @@ a:hover { color: #fff; background: @link-color; } +.background { + background-image: @backgroundImage; +} // Lazy Evaluation .lazy-eval { @@ -25,3 +31,53 @@ a:hover { @var: @a; @a: 100%; + +.nested { + + @b: darken(@link-color-active, 20%); + @padLeft: 20px; + @top: 5rem; + @lineHeight: 2rem; + + .my-mixin(@bgColor: #fff) { + background: @bgColor; + border-color: lighten(@bgColor, 20%); + & when not (@bgColor = #000) { + background: lighten(@bgColor, 5%); + } + } + + +.other-mixin(@rootClass) { + @{rootClass}.somePadding { + padding: 1rem; + box-sizing: border-box; + } + + @media (max-width:599px) { + @{rootClass}.somePadding { + padding: 0; + } + } +} + + .calc-vars { + @c: calc(100% - 80px); + @d: -@a; + height: @c; + width: @d; + color: lighten(@b, 10%); + top: -@top; + line-height: @lineHeight / 2; + .my-mixin(@link-color) + } + + .calc-vars-duplicate { + color: lighten(@b, 10%); + padding-left: ~"calc(@{padLeft} + 0.5rem)"; + .my-mixin(#fff); + .other-mixin(somePrefix); + } + +} + diff --git a/test/fixtures/libraries/lib1/my/ui/lib/themes/base/global.less b/test/fixtures/libraries/lib1/my/ui/lib/themes/base/global.less index 3c410918..d304155d 100644 --- a/test/fixtures/libraries/lib1/my/ui/lib/themes/base/global.less +++ b/test/fixtures/libraries/lib1/my/ui/lib/themes/base/global.less @@ -1 +1,2 @@ @color1: #fefefe; +@url1: url('111'); diff --git a/test/test-css-vars.js b/test/test-css-vars.js index 0b87e7c6..b0e70d0a 100644 --- a/test/test-css-vars.js +++ b/test/test-css-vars.js @@ -15,9 +15,11 @@ describe("css vars", function() { }).then(function(result) { assert.equal(result.css, readFile("test/expected/simple/test.css"), "css should be correctly generated."); assert.equal(result.cssSkeleton, readFile("test/expected/simple/test-cssvars-skeleton.css"), - "css should be correctly generated."); + "skeleton css should be correctly generated."); assert.equal(result.cssVariables, readFile("test/expected/simple/test-cssvars-variables.css"), "css variables should be correctly generated."); + assert.equal(result.cssVariablesSource, readFile("test/expected/simple/test-cssvars-variables.source.less"), + "css variables source should be correctly generated."); }); }); @@ -28,9 +30,54 @@ describe("css vars", function() { }).then(function(result) { assert.equal(result.css, readFile("test/expected/complex/test.css"), "css should be correctly generated."); assert.equal(result.cssSkeleton, readFile("test/expected/complex/test-cssvars-skeleton.css"), - "css should be correctly generated."); + "skeleton css should be correctly generated."); assert.equal(result.cssVariables, readFile("test/expected/complex/test-cssvars-variables.css"), "css variables should be correctly generated."); + assert.equal(result.cssVariablesSource, + readFile("test/expected/complex/test-cssvars-variables.source.less"), + "css variables source should be correctly generated."); }); }); }); + +it("should generate the correct css variables for foo theme", function() { + return new Builder().build({ + lessInputPath: "my/ui/lib/themes/foo/library.source.less", + rootPaths: [ + "test/fixtures/libraries/lib1", + "test/fixtures/libraries/lib2" + ], + library: { + name: "my.ui.lib" + }, + cssVariables: true + }).then(function(result) { + const oVariablesExpected = { + "default": { + "color1": "#ffffff", + "url1": "url('../base/111')", + + }, + "scopes": { + "fooContrast": { + "color1": "#000000" + } + } + }; + + assert.equal(result.css, readFile("test/expected/libraries/lib1/my/ui/lib/themes/foo/library.css"), + "css should be correctly generated."); + assert.equal(result.cssRtl, readFile("test/expected/libraries/lib1/my/ui/lib/themes/foo/library-RTL.css"), + "rtl css should be correctly generated."); + assert.deepEqual(result.variables, oVariablesExpected, "variables should be correctly collected."); + assert.deepEqual(result.allVariables, oVariablesExpected, "allVariables should be correctly collected."); + assert.equal(result.cssSkeleton, readFile("test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton.css"), + "library_skeleton.css should be correctly generated."); + assert.equal(result.cssSkeletonRtl, readFile("test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton-RTL.css"), + "library_skeleton-RTL.css should be correctly generated."); + assert.equal(result.cssVariables, readFile("test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.css"), + "css variables should be correctly generated."); + assert.equal(result.cssVariablesSource, readFile("test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.source.less"), + "css variables source should be correctly generated."); + }); +}); diff --git a/test/test-perf-workaround.js b/test/test-perf-workaround.js index b6ed4156..e930f30e 100644 --- a/test/test-perf-workaround.js +++ b/test/test-perf-workaround.js @@ -34,7 +34,7 @@ describe("performance workaround", function() { const oVariablesExpected = { "default": { "color1": "#ffffff", - + "url1": "url('../base/111')", }, "scopes": { "fooContrast": { diff --git a/test/test.js b/test/test.js index b0a1fc96..00d59975 100644 --- a/test/test.js +++ b/test/test.js @@ -118,8 +118,18 @@ describe("libraries (my/ui/lib)", function() { }).then(function(result) { assert.equal(result.css, readFile("test/expected/libraries/lib1/my/ui/lib/themes/base/library.css"), "css should be correctly generated."); assert.equal(result.cssRtl, readFile("test/expected/libraries/lib1/my/ui/lib/themes/base/library-RTL.css"), "rtl css should be correctly generated."); - assert.deepEqual(result.variables, {color1: "#fefefe"}, "variables should be correctly collected."); - assert.deepEqual(result.allVariables, {color1: "#fefefe"}, "allVariables should be correctly collected."); + assert.deepEqual(result.variables, + { + color1: "#fefefe", + url1: "url('111')", + }, + "variables should be correctly collected."); + assert.deepEqual(result.allVariables, + { + color1: "#fefefe", + url1: "url('111')", + }, + "allVariables should be correctly collected."); assert.deepEqual(result.imports, [ path.join("test", "fixtures", "libraries", "lib1", "my", "ui", "lib", "themes", "base", "library.source.less"), path.join("test", "fixtures", "libraries", "lib1", "my", "ui", "lib", "themes", "base", "global.less") @@ -141,7 +151,7 @@ describe("libraries (my/ui/lib)", function() { const oVariablesExpected = { "default": { "color1": "#ffffff", - + "url1": "url('../base/111')", }, "scopes": { "fooContrast": { @@ -180,6 +190,7 @@ describe("libraries (my/ui/lib)", function() { const oVariablesExpected = { "default": { "color1": "#ffffff", + "url1": "url('../base/111')", }, "scopes": { "barContrast": { @@ -248,7 +259,8 @@ describe("libraries (my/other/ui/lib)", function() { assert.deepEqual(result.allVariables, { "_my_other_ui_lib_MyControl_color1": "#fefefe", "_my_other_ui_lib_MyOtherControl_color1": "#fefefe", - "color1": "#fefefe" + "color1": "#fefefe", + "url1": "url('../../../../../../my/ui/lib/themes/base/111')", }, "allVariables should be correctly collected."); assert.deepEqual(result.imports, [ path.join("test", "fixtures", "libraries", "lib3", "my", "other", "ui", "lib", "themes", "base", "library.source.less"), @@ -289,7 +301,8 @@ describe("libraries (my/other/ui/lib)", function() { "_my_other_ui_lib_MyControl_color1": "#ffffff", "_my_other_ui_lib_MyControl_color2": "#008000", "_my_other_ui_lib_MyOtherControl_color1": "#ffffff", - "color1": "#ffffff" + "color1": "#ffffff", + "url1": "url('../../../../../../my/ui/lib/themes/base/111')", }, "scopes": { "fooContrast": { @@ -349,7 +362,8 @@ describe("libraries (my/other/ui/lib)", function() { "_my_other_ui_lib_MyControl_color1": "#ffffff", "_my_other_ui_lib_MyControl_color2": "#008000", "_my_other_ui_lib_MyOtherControl_color1": "#ffffff", - "color1": "#ffffff" + "color1": "#ffffff", + "url1": "url('../../../../../../my/ui/lib/themes/base/111')", }, "scopes": { "barContrast": {