From c8f3595d5316f273db28e79ade7b4f68181e4447 Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Wed, 23 Jun 2021 19:54:00 +0200 Subject: [PATCH 01/13] [FIX] Variables: improved detection of library variables --- lib/index.js | 1 + lib/plugin/css-variables-collector.js | 13 +++++++------ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/lib/index.js b/lib/index.js index c0020d09..b8658223 100644 --- a/lib/index.js +++ b/lib/index.js @@ -191,6 +191,7 @@ 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, "_") + "_"; } diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index 53a373e5..6912bfd9 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -27,10 +27,11 @@ 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() { + // the last less file defines the location of the css variable and this must + // be in the path of the current library, otherwise it is an external variable + const regexp = new RegExp(`^/resources/${this.config.libPath}/themes/`); + return this.importStack.length > 0 ? regexp.test(this.importStack[this.importStack.length - 1].importedFilename) : true; }, _isRelevant() { @@ -109,7 +110,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)]); } @@ -187,7 +188,7 @@ CSSVariablesCollectorPlugin.prototype = { // add the variable declaration to the list of vars this.vars[value.name.substr(1)] = { css: this._getCSS(value.value), - export: !this._isInGlobalOrBaseImport() + export: this._isVarInLibrary() }; } }); From 77ca02ce9992a068ac89a7162b4d48c635781e2b Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Fri, 25 Jun 2021 13:59:44 +0200 Subject: [PATCH 02/13] [FIX] Variables: resolve url values in variables --- lib/index.js | 7 ++- lib/plugin/css-variables-collector.js | 72 +++++++++++++++---------- lib/plugin/css-variables-urlresolver.js | 48 +++++++++++++++++ 3 files changed, 98 insertions(+), 29 deletions(-) create mode 100644 lib/plugin/css-variables-urlresolver.js diff --git a/lib/index.js b/lib/index.js index b8658223..2c9a2890 100644 --- a/lib/index.js +++ b/lib/index.js @@ -288,10 +288,13 @@ 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 CSSVariablesUrlResolverPlugin = require("./plugin/css-variables-urlresolver"); + const oCSSVariablesUrlResolverPlugin = new CSSVariablesUrlResolverPlugin(config); result.cssSkeleton = tree.toCSS(Object.assign({}, options.compiler, { - plugins: [oCSSVariablesCollector] + plugins: [oCSSVariablesCollector, oCSSVariablesUrlResolverPlugin] })); - result.cssVariablesSource = oCSSVariablesCollector.toLessVariables(); + const varsOverride = oCSSVariablesUrlResolverPlugin.getVariables(); + 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 6912bfd9..76a18a90 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,28 +28,41 @@ CSSVariablesCollectorPlugin.prototype = { return this.ruleStack.length > 0 && !this.ruleStack[this.ruleStack.length - 1].variable; }, - _isVarInLibrary() { - // the last less file defines the location of the css variable and this must - // be in the path of the current library, otherwise it is an external variable - const regexp = new RegExp(`^/resources/${this.config.libPath}/themes/`); - return this.importStack.length > 0 ? regexp.test(this.importStack[this.importStack.length - 1].importedFilename) : true; + _isVarInLibrary({varName, 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 include = !filename || + (this.config.libPath ? filename.startsWith(`/resources/${this.config.libPath}/themes/`) : 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].css}"`); + } + vars[key] = { + css: override ? varsOverride[key].css : 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"; } }); @@ -96,7 +110,7 @@ CSSVariablesCollectorPlugin.prototype = { }, 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) { const css = this._getCSS(node); @@ -110,7 +124,9 @@ CSSVariablesCollectorPlugin.prototype = { } this.calcVars[newName] = { css: css, - export: this._isVarInLibrary() + export: this._isVarInLibrary({ + varName: newName + }) }; return new less.tree.Call("var", [new less.tree.Anonymous("--" + newName, node.index, node.currentFileInfo, node.mapLines)]); } @@ -169,30 +185,32 @@ 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)] = { + const varName = value.name.substr(1); + this.vars[varName] = { css: this._getCSS(value.value), - export: this._isVarInLibrary() + export: this._isVarInLibrary({ + varName, + filename: value.currentFileInfo.filename + }) }; } }); return node; + }, + + 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/lib/plugin/css-variables-urlresolver.js b/lib/plugin/css-variables-urlresolver.js new file mode 100644 index 00000000..04efdbed --- /dev/null +++ b/lib/plugin/css-variables-urlresolver.js @@ -0,0 +1,48 @@ +"use strict"; + +const less = require("../thirdparty/less"); + +const CSSVariablesUrlResolverPlugin = module.exports = function(config) { + this.config = config; + // eslint-disable-next-line new-cap + this.native = new less.tree.visitor(this); + this.vars = {}; + this.ruleStack = []; +}; + +CSSVariablesUrlResolverPlugin.prototype = { + + isPreVisitor: true, + + run(root) { + return this.native.visit(root); + }, + + getVariables() { + return this.vars; + }, + + visitRule(node, visitArgs) { + // store the rule context for the call variable extraction + this.ruleStack.push(node); + return node; + }, + + visitRuleOut(node) { + // remove rule context + this.ruleStack.pop(); + return node; + }, + + visitUrl(node, visitArgs) { + // for top-level variables we need the resolved urls + if (this.ruleStack.length > 0 && this.ruleStack[0].variable) { + const varName = this.ruleStack[0].name.substr(1); + this.vars[varName] = { + css: node.toCSS() + }; + } + return node; + } + +}; From 6217f5a39bb4f255791d14bb9d78cfea8ad50a24 Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Fri, 25 Jun 2021 16:26:44 +0200 Subject: [PATCH 03/13] [INTERNAL] Variables: report override only with env var --- lib/plugin/css-variables-collector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index 76a18a90..1f3b10ac 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -45,7 +45,7 @@ CSSVariablesCollectorPlugin.prototype = { const vars = {}; Object.keys(this.vars).forEach((key) => { const override = this.vars[key].updateAfterEval && varsOverride[key] !== undefined; - if (override) { + if (override && process && process.env && process.env.LESS_OPENUI5_CSSVARS_REPORT_OVERRIDE) { console.log(`Override variable "${key}" from "${this.vars[key].css}" to "${varsOverride[key].css}"`); } vars[key] = { From 1fbb1a6fa8b744520e0d18d9719e1e2f4eb9e912 Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Fri, 25 Jun 2021 17:16:55 +0200 Subject: [PATCH 04/13] [FIX] Variables: handle variables in the proper order --- lib/plugin/css-variables-collector.js | 32 ++++++++++++--------------- 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index 1f3b10ac..b013bc30 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -150,6 +150,20 @@ 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({ + varName, + 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; @@ -185,24 +199,6 @@ CSSVariablesCollectorPlugin.prototype = { 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 - const varName = value.name.substr(1); - this.vars[varName] = { - css: this._getCSS(value.value), - export: this._isVarInLibrary({ - varName, - filename: value.currentFileInfo.filename - }) - }; - } - }); - return node; - }, - visitUrl(node, visitArgs) { // we mark the less variables which should be updated after eval // => strangewise less variables with "none" values are also urls From b2ec78d41a1a9f449ffbc661e091ad1813ed947f Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Sun, 27 Jun 2021 10:41:44 +0200 Subject: [PATCH 05/13] [FIX] Variables: adopted the test to new behavior (last var wins) --- test/expected/complex/test-cssvars-variables.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/expected/complex/test-cssvars-variables.css b/test/expected/complex/test-cssvars-variables.css index 731af96c..bfe4fe52 100644 --- a/test/expected/complex/test-cssvars-variables.css +++ b/test/expected/complex/test-cssvars-variables.css @@ -3,6 +3,6 @@ --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); + --a: 100%; --var: var(--a); - --a: 9%; } From 64c00e90eb91749a739fddc89ea5cdeaae6b395a Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Mon, 28 Jun 2021 10:10:00 +0200 Subject: [PATCH 06/13] [INTERNAL] Variables: use regex for library-local var detection --- lib/plugin/css-variables-collector.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index b013bc30..02924478 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -32,8 +32,9 @@ CSSVariablesCollectorPlugin.prototype = { // 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 ? filename.startsWith(`/resources/${this.config.libPath}/themes/`) : true); + (this.config.libPath ? regex.test(filename) : true); return include; }, @@ -45,9 +46,11 @@ CSSVariablesCollectorPlugin.prototype = { const vars = {}; Object.keys(this.vars).forEach((key) => { const override = this.vars[key].updateAfterEval && varsOverride[key] !== undefined; - if (override && process && process.env && process.env.LESS_OPENUI5_CSSVARS_REPORT_OVERRIDE) { + /* + if (override) { console.log(`Override variable "${key}" from "${this.vars[key].css}" to "${varsOverride[key].css}"`); } + */ vars[key] = { css: override ? varsOverride[key].css : this.vars[key].css, export: this.vars[key].export From c99433f079f4f8e6311990dcc13449ccbeb8e3e1 Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Mon, 28 Jun 2021 11:29:45 +0200 Subject: [PATCH 07/13] [FIX] Variables: reuse of variables-collector --- lib/index.js | 8 ++--- lib/plugin/css-variables-collector.js | 2 +- lib/plugin/css-variables-urlresolver.js | 48 ------------------------- 3 files changed, 5 insertions(+), 53 deletions(-) delete mode 100644 lib/plugin/css-variables-urlresolver.js diff --git a/lib/index.js b/lib/index.js index 2c9a2890..b4c946d4 100644 --- a/lib/index.js +++ b/lib/index.js @@ -288,12 +288,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 CSSVariablesUrlResolverPlugin = require("./plugin/css-variables-urlresolver"); - const oCSSVariablesUrlResolverPlugin = new CSSVariablesUrlResolverPlugin(config); + const VariableCollector = require("./plugin/variable-collector"); + const oVariableCollector = new VariableCollector(config); result.cssSkeleton = tree.toCSS(Object.assign({}, options.compiler, { - plugins: [oCSSVariablesCollector, oCSSVariablesUrlResolverPlugin] + plugins: [oCSSVariablesCollector, oVariableCollector] })); - const varsOverride = oCSSVariablesUrlResolverPlugin.getVariables(); + const varsOverride = oVariableCollector.getAllVariables(); result.cssVariablesSource = oCSSVariablesCollector.toLessVariables(varsOverride); if (oRTL) { const oCSSVariablesCollectorRTL = new CSSVariablesCollectorPlugin(config); diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index 02924478..f191d6f3 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -48,7 +48,7 @@ CSSVariablesCollectorPlugin.prototype = { const override = this.vars[key].updateAfterEval && varsOverride[key] !== undefined; /* if (override) { - console.log(`Override variable "${key}" from "${this.vars[key].css}" to "${varsOverride[key].css}"`); + console.log(`Override variable "${key}" from "${this.vars[key].css}" to "${varsOverride[key]}"`); } */ vars[key] = { diff --git a/lib/plugin/css-variables-urlresolver.js b/lib/plugin/css-variables-urlresolver.js deleted file mode 100644 index 04efdbed..00000000 --- a/lib/plugin/css-variables-urlresolver.js +++ /dev/null @@ -1,48 +0,0 @@ -"use strict"; - -const less = require("../thirdparty/less"); - -const CSSVariablesUrlResolverPlugin = module.exports = function(config) { - this.config = config; - // eslint-disable-next-line new-cap - this.native = new less.tree.visitor(this); - this.vars = {}; - this.ruleStack = []; -}; - -CSSVariablesUrlResolverPlugin.prototype = { - - isPreVisitor: true, - - run(root) { - return this.native.visit(root); - }, - - getVariables() { - return this.vars; - }, - - visitRule(node, visitArgs) { - // store the rule context for the call variable extraction - this.ruleStack.push(node); - return node; - }, - - visitRuleOut(node) { - // remove rule context - this.ruleStack.pop(); - return node; - }, - - visitUrl(node, visitArgs) { - // for top-level variables we need the resolved urls - if (this.ruleStack.length > 0 && this.ruleStack[0].variable) { - const varName = this.ruleStack[0].name.substr(1); - this.vars[varName] = { - css: node.toCSS() - }; - } - return node; - } - -}; From 1f41cc16d9cb7e2ac771c53c440cd96487395581 Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Mon, 28 Jun 2021 11:37:11 +0200 Subject: [PATCH 08/13] [INTERNAL] Variables: using the variable value for override --- lib/plugin/css-variables-collector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index f191d6f3..e4749d98 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -52,7 +52,7 @@ CSSVariablesCollectorPlugin.prototype = { } */ vars[key] = { - css: override ? varsOverride[key].css : this.vars[key].css, + css: override ? varsOverride[key] : this.vars[key].css, export: this.vars[key].export }; }); From 9e52bc9055d4cd466290066fa14940cc8726e5c2 Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Mon, 28 Jun 2021 13:06:18 +0200 Subject: [PATCH 09/13] [INTERNAL] Variables: improved tests and coverage to be 100% --- lib/index.js | 2 + lib/plugin/css-variables-collector.js | 3 ++ .../complex/test-cssvars-skeleton.css | 25 ++++++++++ .../complex/test-cssvars-variables.css | 7 +++ test/expected/complex/test.css | 25 ++++++++++ test/fixtures/complex/test.less | 50 +++++++++++++++++++ 6 files changed, 112 insertions(+) diff --git a/lib/index.js b/lib/index.js index b4c946d4..cfc13ff1 100644 --- a/lib/index.js +++ b/lib/index.js @@ -193,6 +193,8 @@ Builder.prototype.build = function(options) { 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 diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index e4749d98..47d40ec5 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -107,6 +107,7 @@ 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; @@ -116,6 +117,7 @@ CSSVariablesCollectorPlugin.prototype = { // 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 @@ -139,6 +141,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; diff --git a/test/expected/complex/test-cssvars-skeleton.css b/test/expected/complex/test-cssvars-skeleton.css index 2f2005e0..a6a18626 100644 --- a/test/expected/complex/test-cssvars-skeleton.css +++ b/test/expected/complex/test-cssvars-skeleton.css @@ -12,3 +12,28 @@ a:hover { .lazy-eval { width: var(--var); } +.nested .calc-vars { + height: var(--c); + width: var(--d); + color: var(--function_lighten12); + 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_lighten12); + 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 bfe4fe52..31bf53b3 100644 --- a/test/expected/complex/test-cssvars-variables.css +++ b/test/expected/complex/test-cssvars-variables.css @@ -5,4 +5,11 @@ --link-color-active: var(--link-color); --a: 100%; --var: var(--a); + --b: #245682; + --padLeft: 20px; + --top: 5rem; + --lineHeight: 2rem; + --c: calc(20%); + --d: -100%; + --function_lighten12: #3071a9; } diff --git a/test/expected/complex/test.css b/test/expected/complex/test.css index 653be53a..583b2d47 100644 --- a/test/expected/complex/test.css +++ b/test/expected/complex/test.css @@ -12,3 +12,28 @@ a:hover { .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/fixtures/complex/test.less b/test/fixtures/complex/test.less index 748218b6..79f1fe92 100644 --- a/test/fixtures/complex/test.less +++ b/test/fixtures/complex/test.less @@ -25,3 +25,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); + } + +} + From 6169b399abc6f441b77ad39c3a6e0dca557cc153 Mon Sep 17 00:00:00 2001 From: Peter Muessig Date: Mon, 28 Jun 2021 13:16:37 +0200 Subject: [PATCH 10/13] [INTERNAL] Variables: fixed the indentation --- test/fixtures/complex/test.less | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/test/fixtures/complex/test.less b/test/fixtures/complex/test.less index 79f1fe92..b91b15b5 100644 --- a/test/fixtures/complex/test.less +++ b/test/fixtures/complex/test.less @@ -36,23 +36,23 @@ a:hover { .my-mixin(@bgColor: #fff) { background: @bgColor; border-color: lighten(@bgColor, 20%); - & when not (@bgColor = #000) { - background: lighten(@bgColor, 5%); - } + & when not (@bgColor = #000) { + background: lighten(@bgColor, 5%); + } } .other-mixin(@rootClass) { - @{rootClass}.somePadding { - padding: 1rem; - box-sizing: border-box; - } + @{rootClass}.somePadding { + padding: 1rem; + box-sizing: border-box; + } - @media (max-width:599px) { - @{rootClass}.somePadding { - padding: 0; - } - } + @media (max-width:599px) { + @{rootClass}.somePadding { + padding: 0; + } + } } .calc-vars { @@ -61,16 +61,16 @@ a:hover { height: @c; width: @d; color: lighten(@b, 10%); - top: -@top; - line-height: @lineHeight / 2; + top: -@top; + line-height: @lineHeight / 2; .my-mixin(@link-color) } .calc-vars-duplicate { color: lighten(@b, 10%); - padding-left: ~"calc(@{padLeft} + 0.5rem)"; + padding-left: ~"calc(@{padLeft} + 0.5rem)"; .my-mixin(#fff); - .other-mixin(somePrefix); + .other-mixin(somePrefix); } } From 76edeed06491b807de739e67f8b4ab8e6367a14f Mon Sep 17 00:00:00 2001 From: Matthias Osswald Date: Mon, 28 Jun 2021 18:41:11 +0200 Subject: [PATCH 11/13] [INTERNAL] Enhance tests --- .../complex/test-cssvars-skeleton.css | 7 ++- .../complex/test-cssvars-variables.css | 4 +- .../test-cssvars-variables.source.less | 33 ++++++++++++ test/expected/complex/test.css | 3 ++ .../my/ui/lib/themes/base/library-RTL.css | 2 +- .../lib1/my/ui/lib/themes/base/library.css | 2 +- .../my/ui/lib/themes/foo/css_variables.css | 10 ++++ .../lib/themes/foo/css_variables.source.less | 7 +++ .../lib1/my/ui/lib/themes/foo/library-RTL.css | 2 +- .../lib1/my/ui/lib/themes/foo/library.css | 2 +- .../lib/themes/foo/library_skeleton-RTL.css | 10 ++++ .../my/ui/lib/themes/foo/library_skeleton.css | 10 ++++ .../lib2/my/ui/lib/themes/bar/library-RTL.css | 2 +- .../lib2/my/ui/lib/themes/bar/library.css | 2 +- .../simple/test-cssvars-variables.source.less | 5 ++ test/fixtures/complex/test.less | 6 +++ .../lib1/my/ui/lib/themes/base/global.less | 1 + test/test-css-vars.js | 51 ++++++++++++++++++- test/test-perf-workaround.js | 2 +- test/test.js | 26 +++++++--- 20 files changed, 169 insertions(+), 18 deletions(-) create mode 100644 test/expected/complex/test-cssvars-variables.source.less create mode 100644 test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.css create mode 100644 test/expected/libraries/lib1/my/ui/lib/themes/foo/css_variables.source.less create mode 100644 test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton-RTL.css create mode 100644 test/expected/libraries/lib1/my/ui/lib/themes/foo/library_skeleton.css create mode 100644 test/expected/simple/test-cssvars-variables.source.less diff --git a/test/expected/complex/test-cssvars-skeleton.css b/test/expected/complex/test-cssvars-skeleton.css index a6a18626..20308ea4 100644 --- a/test/expected/complex/test-cssvars-skeleton.css +++ b/test/expected/complex/test-cssvars-skeleton.css @@ -9,13 +9,16 @@ 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_lighten12); + color: var(--function_lighten14); top: calc(-1 * var(--top)); line-height: calc(var(--lineHeight) / 2); background: #428bca; @@ -23,7 +26,7 @@ a:hover { background: #5697d0; } .nested .calc-vars-duplicate { - color: var(--function_lighten12); + color: var(--function_lighten14); padding-left: calc(20px + 0.5rem); border-color: #ffffff; background: #ffffff; diff --git a/test/expected/complex/test-cssvars-variables.css b/test/expected/complex/test-cssvars-variables.css index 31bf53b3..e684ba3a 100644 --- a/test/expected/complex/test-cssvars-variables.css +++ b/test/expected/complex/test-cssvars-variables.css @@ -3,6 +3,8 @@ --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); --b: #245682; @@ -11,5 +13,5 @@ --lineHeight: 2rem; --c: calc(20%); --d: -100%; - --function_lighten12: #3071a9; + --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 583b2d47..351dc9f5 100644 --- a/test/expected/complex/test.css +++ b/test/expected/complex/test.css @@ -9,6 +9,9 @@ a:hover { color: #fff; background: #428bca; } +.background { + background-image: url(img.png); +} .lazy-eval { width: 9%; } 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 b91b15b5..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 { 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": { From 15c6fb892bb78f95640d23a6df8ebefb98365aff Mon Sep 17 00:00:00 2001 From: Matthias Osswald Date: Mon, 28 Jun 2021 19:33:34 +0200 Subject: [PATCH 12/13] [INTERNAL] Fix RegExp for relative paths used in tests --- lib/plugin/css-variables-collector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index 47d40ec5..f094d889 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -32,7 +32,7 @@ CSSVariablesCollectorPlugin.prototype = { // 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 regex = new RegExp(`(^|/)${this.config.libPath}/themes/`); const include = !filename || (this.config.libPath ? regex.test(filename) : true); return include; From a24aa11b4d68b9336dea222e03657f6f14f21621 Mon Sep 17 00:00:00 2001 From: Matthias Osswald Date: Mon, 28 Jun 2021 20:01:41 +0200 Subject: [PATCH 13/13] [INTERNAL] Cleanup --- lib/index.js | 3 +-- lib/plugin/css-variables-collector.js | 7 ++----- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/lib/index.js b/lib/index.js index cfc13ff1..f833f8c5 100644 --- a/lib/index.js +++ b/lib/index.js @@ -290,8 +290,7 @@ 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 VariableCollector = require("./plugin/variable-collector"); - const oVariableCollector = new VariableCollector(config); + const oVariableCollector = new VariableCollectorPlugin(options.compiler); result.cssSkeleton = tree.toCSS(Object.assign({}, options.compiler, { plugins: [oCSSVariablesCollector, oVariableCollector] })); diff --git a/lib/plugin/css-variables-collector.js b/lib/plugin/css-variables-collector.js index f094d889..6b9fdc35 100644 --- a/lib/plugin/css-variables-collector.js +++ b/lib/plugin/css-variables-collector.js @@ -28,7 +28,7 @@ CSSVariablesCollectorPlugin.prototype = { return this.ruleStack.length > 0 && !this.ruleStack[this.ruleStack.length - 1].variable; }, - _isVarInLibrary({varName, filename}) { + _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! @@ -129,9 +129,7 @@ CSSVariablesCollectorPlugin.prototype = { } this.calcVars[newName] = { css: css, - export: this._isVarInLibrary({ - varName: newName - }) + export: this._isVarInLibrary() }; return new less.tree.Call("var", [new less.tree.Anonymous("--" + newName, node.index, node.currentFileInfo, node.mapLines)]); } @@ -162,7 +160,6 @@ CSSVariablesCollectorPlugin.prototype = { // add the variable declaration to the list of vars const varName = node.name.substr(1); const isVarInLib = this._isVarInLibrary({ - varName, filename: node.currentFileInfo.filename }); this.vars[varName] = {