WIP: Generate __asResolvedUrl variables

Author: matz3

lib/plugin/css-variables-collector.js

@@ -37,23 +37,39 @@ CSSVariablesCollectorPlugin.prototype = {
 		return !this._isInMixinOrParen() && this._isVarInRule();
 	},
 
+	_getResolvedUrl(rawUrl) {
+		const parsedUrl = require("url").parse(rawUrl);
+		if (parsedUrl.protocol || rawUrl.startsWith("/")) {
+			return rawUrl;
+		}
+		let relativePath = parsedUrl.path;
+		if (relativePath.startsWith("./")) {
+			relativePath = relativePath.substr(2);
+		}
+		return `ui5://TODO-namespace/themes/TODO-themeName/${relativePath}`;
+	},
+
 	toLessVariables() {
 		let lessVariables = "";
 		Object.keys(this.vars).forEach((value, index) => {
-			lessVariables += "@" + value + ": " + this.vars[value].css + ";\n";
+			const variableName = value;
+			const variableValue = this.vars[value].css;
+			lessVariables += `@${variableName}: ${variableValue};\n`;
 		});
 		Object.keys(this.calcVars).forEach((value, index) => {
-			lessVariables += "@" + value + ": " + this.calcVars[value].css + ";\n";
+			const variableName = value;
+			const variableValue = this.calcVars[value].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";
+				lessVariables += `--${value}: @${value};\n`;
 			}
 		});
 		Object.keys(this.calcVars).forEach((value, index) => {
 			if (this.calcVars[value].export) {
-				lessVariables += "--" + value + ": @" + value + ";\n";
+				lessVariables += `--${value}: @${value};\n`;
 			}
 		});
 		lessVariables += "}\n";
@@ -185,10 +201,27 @@ CSSVariablesCollectorPlugin.prototype = {
 			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 variableName = value.name.substr(1);
+				const variableEntry = {
 					css: this._getCSS(value.value),
 					export: !this._isInGlobalOrBaseImport()
 				};
+
+				this.vars[variableName] = variableEntry;
+
+				if (variableEntry.export) {
+					// Create additional _asResolvedUrl variable for runtime resolution of relative urls
+					const urlMatch = /url[\s]*\('?"?([^'")]*)'?"?\)/.exec(variableEntry.css);
+					if (urlMatch) {
+						const resolvedUrlVariableName = `${variableName}__asResolvedUrl`;
+						const resolvedUrlVariableEntry = {
+							css: `"${this._getResolvedUrl(urlMatch[1])}"`,
+							export: true
+						};
+						this.vars[resolvedUrlVariableName] = resolvedUrlVariableEntry;
+					}
+				}
 			}
 		});
 		return node;