less-openui5 0.11.1 → 0.11.3

package/lib/index.js

@@ -1,19 +1,17 @@
 "use strict";
 
 const path = require("path");
-const clone = require("clone");
-const css = require("css");
+const css = require("@adobe/css-tools");
+
 
-const createParser = require("./less/parser");
 const diff = require("./diff");
 const scope = require("./scope");
 
 const fileUtilsFactory = require("./fileUtils");
 
-// Plugins
-const ImportCollectorPlugin = require("./plugin/import-collector");
-const VariableCollectorPlugin = require("./plugin/variable-collector");
-const UrlCollector = require("./plugin/url-collector");
+const Compiler = require("./Compiler");
+
+const themingParametersDataUri = require("./themingParameters/dataUri");
 
 // Workaround for a performance issue in the "css" parser module when used in combination
 // with the "colors" module that enhances the String prototype.
@@ -104,7 +102,7 @@ Builder.prototype.cacheTheme = function(result) {
 };
 
 /**
- * Creates a themebuild
+ * Runs a theme build
  * @param {object} options
  * @param {object} options.compiler compiler object as passed to less
  * @param {boolean} options.cssVariables whether or not to enable css variables output
@@ -115,10 +113,6 @@ Builder.prototype.cacheTheme = function(result) {
 Builder.prototype.build = function(options) {
 	const that = this;
 
-	// Stores mapping between "virtual" paths (used within LESS) and real filesystem paths.
-	// Only relevant when using the "rootPaths" option.
-	const mFileMappings = {};
-
 	// Assign default options
 	options = Object.assign({
 		lessInput: null,
@@ -143,211 +137,14 @@ Builder.prototype.build = function(options) {
 		options.parser.relativeUrls = true;
 	}
 
-	function fileHandler(file, currentFileInfo, handleDataAndCallCallback, callback) {
-		let pathname;
-
-		// support absolute paths such as "/resources/my/base.less"
-		if (path.posix.isAbsolute(file)) {
-			pathname = path.posix.normalize(file);
-		} else {
-			pathname = path.posix.join(currentFileInfo.currentDirectory, file);
-		}
-
-		that.fileUtils.readFile(pathname, options.rootPaths).then(function(result) {
-			if (!result) {
-				// eslint-disable-next-line no-console
-				console.log("File not found: " + pathname);
-				callback({type: "File", message: "Could not find file at path '" + pathname + "'"});
-			} else {
-				try {
-					// Save import mapping to calculate full import paths later on
-					mFileMappings[currentFileInfo.rootFilename] = mFileMappings[currentFileInfo.rootFilename] || {};
-					mFileMappings[currentFileInfo.rootFilename][pathname] = result.path;
-
-					handleDataAndCallCallback(pathname, result.content);
-				} catch (e) {
-					// eslint-disable-next-line no-console
-					console.log(e);
-					callback(e);
-				}
-			}
-		}, function(err) {
-			// eslint-disable-next-line no-console
-			console.log(err);
-			callback(err);
-		});
-	}
-
-	function compile(config) {
-		const parserOptions = clone(options.parser);
-		let rootpath;
-
-		if (config.path) {
-			// Keep rootpath for later usage in the ImportCollectorPlugin
-			rootpath = config.path;
-			parserOptions.filename = config.localPath;
-		}
-
-		// 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.prefix = "_" + libName.replace(/\./g, "_") + "_";
-		}
-
-		// Keep filename for later usage (see ImportCollectorPlugin) as less modifies the parserOptions.filename
-		const filename = parserOptions.filename;
-
-		// Only use custom file handler when "rootPaths" or custom "fs" are used
-		let fnFileHandler;
-		if ((options.rootPaths && options.rootPaths.length > 0) || that.customFs) {
-			fnFileHandler = fileHandler;
-		}
-
-		const parser = createParser(parserOptions, fnFileHandler);
-
-		return new Promise(function(resolve, reject) {
-			parser.parse(config.content, function(err, tree) {
-				if (err) {
-					reject(err);
-				} else {
-					resolve(tree);
-				}
-			});
-		}).then(async function(tree) {
-			const result = {};
-
-			result.tree = tree;
-
-			// plugins to collect imported files and variable values
-			const oImportCollector = new ImportCollectorPlugin({
-				importMappings: mFileMappings[filename]
-			});
-			const oVariableCollector = new VariableCollectorPlugin(options.compiler);
-			const oUrlCollector = new UrlCollector();
-
-			// render to css
-			result.css = tree.toCSS(Object.assign({}, options.compiler, {
-				plugins: [oImportCollector, oVariableCollector, oUrlCollector]
-			}));
-
-			// retrieve imported files
-			result.imports = oImportCollector.getImports();
-
-			// retrieve reduced set of variables
-			result.variables = oVariableCollector.getVariables(Object.keys(mFileMappings[filename] || {}));
-
-			// retrieve all variables
-			result.allVariables = oVariableCollector.getAllVariables();
-
-			// also compile rtl-version if requested
-			let oRTL;
-			if (options.rtl) {
-				const RTLPlugin = require("./plugin/rtl");
-				oRTL = new RTLPlugin();
-
-				const urls = oUrlCollector.getUrls();
-
-				const existingImgRtlUrls = (await Promise.all(
-					urls.map(async ({currentDirectory, relativeUrl}) => {
-						const relativeImgRtlUrl = RTLPlugin.getRtlImgUrl(relativeUrl);
-						if (relativeImgRtlUrl) {
-							const resolvedImgRtlUrl = path.posix.join(currentDirectory, relativeImgRtlUrl);
-							if (await that.fileUtils.findFile(resolvedImgRtlUrl, options.rootPaths)) {
-								return resolvedImgRtlUrl;
-							}
-						}
-					})
-				)).filter(Boolean);
-
-				oRTL.setExistingImgRtlPaths(existingImgRtlUrls);
-			}
-
-			if (oRTL) {
-				result.cssRtl = tree.toCSS(Object.assign({}, options.compiler, {
-					plugins: [oRTL]
-				}));
-			}
-
-			if (rootpath) {
-				result.imports.unshift(rootpath);
-			}
-
-			// also compile css-variables version if requested
-			if (options.cssVariables) {
-				return new Promise(function(resolve, reject) {
-					// parse the content again to have a clean tree
-					parser.parse(config.content, function(err, tree) {
-						if (err) {
-							reject(err);
-						} else {
-							resolve(tree);
-						}
-					});
-				}).then(function(tree) {
-					// generate the skeleton-css and the less-variables
-					const CSSVariablesCollectorPlugin = require("./plugin/css-variables-collector");
-					const oCSSVariablesCollector = new CSSVariablesCollectorPlugin(config);
-					result.cssSkeleton = tree.toCSS(Object.assign({}, options.compiler, {
-						plugins: [oCSSVariablesCollector]
-					}));
-					result.cssVariablesSource = oCSSVariablesCollector.toLessVariables();
-					if (oRTL) {
-						const oCSSVariablesCollectorRTL = new CSSVariablesCollectorPlugin(config);
-						result.cssSkeletonRtl = tree.toCSS(Object.assign({}, options.compiler, {
-							plugins: [oCSSVariablesCollectorRTL, oRTL]
-						}));
-					}
-					return tree;
-				}).then(function(tree) {
-					// generate the css-variables content out of the less-variables
-					return new Promise(function(resolve, reject) {
-						parser.parse(result.cssVariablesSource, function(err, tree) {
-							if (err) {
-								reject(err);
-							} else {
-								const CSSVariablesPointerPlugin = require("./plugin/css-variables-pointer");
-								result.cssVariables = tree.toCSS(Object.assign({}, options.compiler, {
-									plugins: [new CSSVariablesPointerPlugin()]
-								}));
-								resolve(result);
-							}
-						});
-					});
-				});
-			}
-
-			return result;
-		});
-	}
+	const compiler = new Compiler({
+		options,
+		fileUtils: this.fileUtils,
+		customFs: this.customFs
+	});
 
 	function addInlineParameters(result) {
-		return new Promise(function(resolve, reject) {
-			if (typeof options.library === "object" && typeof options.library.name === "string") {
-				const parameters = JSON.stringify(result.variables);
-
-				// properly escape the parameters to be part of a data-uri
-				// + escaping single quote (') as it is used to surround the data-uri: url('...')
-				const escapedParameters = encodeURIComponent(parameters).replace(/'/g, function(char) {
-					return escape(char);
-				});
-
-				// embed parameter variables as plain-text string into css
-				const parameterStyleRule = "\n/* Inline theming parameters */\n#sap-ui-theme-" +
-					options.library.name.replace(/\./g, "\\.") +
-					"{background-image:url('data:text/plain;utf-8," + escapedParameters + "')}\n";
-
-				// embed parameter variables as plain-text string into css
-				result.css += parameterStyleRule;
-				if (options.rtl) {
-					result.cssRtl += parameterStyleRule;
-				}
-				if (options.cssVariables) {
-					// for the css variables build we just add it to the variables
-					result.cssVariables += parameterStyleRule;
-				}
-			}
-			resolve(result);
-		});
+		return themingParametersDataUri.addInlineParameters({result, options});
 	}
 
 	function getScopeVariables(options) {
@@ -380,13 +177,13 @@ Builder.prototype.build = function(options) {
 				if (!config) {
 					throw new Error("Could not find embeddedCompareFile at path '" + scopeOptions.embeddedCompareFilePath + "'");
 				}
-				return compile(config);
+				return compiler.compile(config);
 			}),
 			that.fileUtils.readFile(scopeOptions.embeddedFilePath, options.rootPaths).then(function(config) {
 				if (!config) {
 					throw new Error("Could not find embeddedFile at path '" + scopeOptions.embeddedFilePath + "'");
 				}
-				return compile(config);
+				return compiler.compile(config);
 			})
 		]).then(function(results) {
 			return {
@@ -528,7 +325,9 @@ Builder.prototype.build = function(options) {
 			}
 
 			// No css diffing and scoping
-			return that.fileUtils.readFile(options.lessInputPath, options.rootPaths).then(compile);
+			return that.fileUtils.readFile(options.lessInputPath, options.rootPaths).then((config) => {
+				return compiler.compile(config);
+			});
 		});
 	}
 
@@ -541,7 +340,7 @@ Builder.prototype.build = function(options) {
 	}
 
 	if (options.lessInput) {
-		return compile({
+		return compiler.compile({
 			content: options.lessInput
 		}).then(addInlineParameters).then(that.cacheTheme.bind(that));
 	} else {

package/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,33 +28,47 @@ 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((variableName) => {
+			const override = this.vars[variableName].updateAfterEval && varsOverride[variableName] !== undefined;
+			vars[variableName] = {
+				css: override ? varsOverride[variableName] : this.vars[variableName].css,
+				export: this.vars[variableName].export
+			};
+		});
 		let lessVariables = "";
-		Object.keys(this.vars).forEach((value, index) => {
-			lessVariables += "@" + value + ": " + this.vars[value].css + ";\n";
+		Object.keys(vars).forEach((variableName) => {
+			const variableValue = vars[variableName].css;
+			lessVariables += `@${variableName}: ${variableValue};\n`;
 		});
-		Object.keys(this.calcVars).forEach((value, index) => {
-			lessVariables += "@" + value + ": " + this.calcVars[value].css + ";\n";
+		Object.keys(this.calcVars).forEach((variableName) => {
+			const variableValue = this.calcVars[variableName].css;
+			lessVariables += `@${variableName}: ${variableValue};\n`;
 		});
 		lessVariables += "\n:root {\n";
-		Object.keys(this.vars).forEach((value, index) => {
-			if (this.vars[value].export) {
-				lessVariables += "--" + value + ": @" + value + ";\n";
+		Object.keys(vars).forEach((variableName) => {
+			if (vars[variableName].export) {
+				lessVariables += `--${variableName}: @${variableName};\n`;
 			}
 		});
-		Object.keys(this.calcVars).forEach((value, index) => {
-			if (this.calcVars[value].export) {
-				lessVariables += "--" + value + ": @" + value + ";\n";
+		Object.keys(this.calcVars).forEach((variableName) => {
+			if (this.calcVars[variableName].export) {
+				lessVariables += `--${variableName}: @${variableName};\n`;
 			}
 		});
 		lessVariables += "}\n";
@@ -89,15 +104,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 +126,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 +136,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 +151,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 +199,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;
 	}
 

package/lib/themingParameters/dataUri.js

@@ -0,0 +1,33 @@
+module.exports = {
+	addInlineParameters: function({result, options}) {
+		// Inline parameters can only be added when the library name is known
+		if (typeof options.library !== "object" || typeof options.library.name !== "string") {
+			return result;
+		}
+
+		const parameters = JSON.stringify(result.variables);
+
+		// properly escape the parameters to be part of a data-uri
+		// + escaping single quote (') as it is used to surround the data-uri: url('...')
+		const escapedParameters = encodeURIComponent(parameters).replace(/'/g, function(char) {
+			return escape(char);
+		});
+
+		// embed parameter variables as plain-text string into css
+		const parameterStyleRule = "\n/* Inline theming parameters */\n#sap-ui-theme-" +
+			options.library.name.replace(/\./g, "\\.") +
+			"{background-image:url('data:text/plain;utf-8," + escapedParameters + "')}\n";
+
+		// embed parameter variables as plain-text string into css
+		result.css += parameterStyleRule;
+		if (options.rtl) {
+			result.cssRtl += parameterStyleRule;
+		}
+		if (options.cssVariables) {
+			// for the css variables build we just add it to the variables
+			result.cssVariables += parameterStyleRule;
+		}
+
+		return result;
+	}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "less-openui5",
-	"version": "0.11.1",
+	"version": "0.11.3",
 	"description": "Build OpenUI5 themes with Less.js",
 	"author": {
 		"name": "SAP SE",
@@ -23,8 +23,8 @@
 	},
 	"scripts": {
 		"lint": "eslint ./",
-		"unit": "mocha test/*.js",
-		"unit-debug": "mocha --inspect --inspect-brk test/*.js",
+		"unit": "mocha test/*.js test/lib/**",
+		"unit-debug": "mocha --inspect --inspect-brk test/*.js test/lib/**",
 		"coverage": "nyc npm run unit",
 		"test": "npm run lint && npm run coverage && npm run depcheck",
 		"preversion": "npm test",
@@ -52,10 +52,10 @@
 			"lib/thirdparty/**"
 		],
 		"check-coverage": true,
-		"statements": 90,
+		"statements": 95,
 		"branches": 85,
-		"functions": 90,
-		"lines": 90,
+		"functions": 100,
+		"lines": 95,
 		"watermarks": {
 			"statements": [
 				70,
@@ -82,17 +82,17 @@
 		"url": "git@github.com:SAP/less-openui5.git"
 	},
 	"dependencies": {
-		"clone": "^2.1.0",
-		"css": "^3.0.0",
+		"@adobe/css-tools": "^4.0.1",
+		"clone": "^2.1.2",
 		"mime": "^1.6.0"
 	},
 	"devDependencies": {
-		"depcheck": "^1.4.0",
-		"eslint": "^7.22.0",
+		"depcheck": "^1.4.3",
+		"eslint": "^7.32.0",
 		"eslint-config-google": "^0.14.0",
-		"graceful-fs": "^4.2.6",
-		"mocha": "^8.3.2",
+		"graceful-fs": "^4.2.10",
+		"mocha": "^8.4.0",
 		"nyc": "^15.1.0",
-		"sinon": "^9.2.4"
+		"sinon": "^11.1.2"
 	}
 }