Enhance url resolving / update expected build output

Author: matz3

lib/plugin/css-variables-collector.js

@@ -14,6 +14,20 @@ const CSSVariablesCollectorPlugin = module.exports = function(config) {
 	this.importStack = [];
 };
 
+CSSVariablesCollectorPlugin.getResolvedUrl = function({rawUrl, filename}) {
+	if (filename.startsWith("/resources/")) {
+		if (rawUrl.startsWith("/")) {
+			return rawUrl;
+		}
+		const baseUrl = "ui5://" + filename.substr("/resources/".length);
+		const url = new URL(rawUrl, baseUrl);
+		return url.href;
+	} else {
+		// TODO: Check whether and when this can happen (except within test cases)
+		return null;
+	}
+},
+
 CSSVariablesCollectorPlugin.prototype = {
 
 	isPreEvalVisitor: true,
@@ -37,18 +51,6 @@ 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) => {
@@ -214,12 +216,18 @@ CSSVariablesCollectorPlugin.prototype = {
 					// 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;
+						const resolvedUrl = CSSVariablesCollectorPlugin.getResolvedUrl({
+							rawUrl: urlMatch[1],
+							filename: value.currentFileInfo.filename
+						});
+						if (resolvedUrl) {
+							const resolvedUrlVariableName = `${variableName}__asResolvedUrl`;
+							const resolvedUrlVariableEntry = {
+								css: `"${resolvedUrl}"`,
+								export: true
+							};
+							this.vars[resolvedUrlVariableName] = resolvedUrlVariableEntry;
+						}
 					}
 				}
 			}

test/expected/inlineCssVariables/lib3/my/other/ui/lib/themes/base/library-RTL.css

@@ -1,3 +1,8 @@
+
+:root {
+  --sapUiTheme-my-other-ui-lib: true;
+  --sapThemeMetaData-UI5-my-other-ui-lib: {"Path":"UI5.my/other/ui/lib.<theme-name>.library","PathPattern":"/%frameworkId%/%libId%/themes/%themeId%/%fileId%.css","Extends":["base"],"Scopes":[],"Engine":{"Version":"0.11.1","Name":"less-openui5"},"Version":{"Build":"<TODO>","Source":"<TODO>"}};
+}
 :root {
   --_my_other_ui_lib_MyControl_color1: var(--color1);
   --_my_other_ui_lib_MyOtherControl_color1: var(--color1);

test/expected/inlineCssVariables/lib3/my/other/ui/lib/themes/base/library.css

@@ -1,3 +1,8 @@
+
+:root {
+  --sapUiTheme-my-other-ui-lib: true;
+  --sapThemeMetaData-UI5-my-other-ui-lib: {"Path":"UI5.my/other/ui/lib.<theme-name>.library","PathPattern":"/%frameworkId%/%libId%/themes/%themeId%/%fileId%.css","Extends":["base"],"Scopes":[],"Engine":{"Version":"0.11.1","Name":"less-openui5"},"Version":{"Build":"<TODO>","Source":"<TODO>"}};
+}
 :root {
   --_my_other_ui_lib_MyControl_color1: var(--color1);
   --_my_other_ui_lib_MyOtherControl_color1: var(--color1);

test/test-css-variables-collector-plugin.js

@@ -0,0 +1,37 @@
+/* eslint-env mocha */
+"use strict";
+
+const assert = require("assert");
+
+// tested module
+const CSSVariablesCollectorPlugin = require("../lib/plugin/css-variables-collector");
+
+describe("CSSVariablesCollectorPlugin.getResolvedUrl", function() {
+	it("should resolve relative url to ui5:// url", function() {
+		assert.strictEqual(
+			CSSVariablesCollectorPlugin.getResolvedUrl({
+				rawUrl: "img/foo.png",
+				filename: "/resources/sap/ui/foo/themes/base/Foo.less"
+			}),
+			"ui5://sap/ui/foo/themes/base/img/foo.png"
+		);
+	});
+	it("should return server-absolute url as-is", function() {
+		assert.strictEqual(
+			CSSVariablesCollectorPlugin.getResolvedUrl({
+				rawUrl: "/assets/img/foo.png",
+				filename: "/resources/sap/ui/foo/themes/base/Foo.less"
+			}),
+			"/assets/img/foo.png"
+		);
+	});
+	it("should return absolute http url as-is", function() {
+		assert.strictEqual(
+			CSSVariablesCollectorPlugin.getResolvedUrl({
+				rawUrl: "http://example.com/assets/img/foo.png",
+				filename: "/resources/sap/ui/foo/themes/base/Foo.less"
+			}),
+			"http://example.com/assets/img/foo.png"
+		);
+	});
+});