Update and fix getResolvedUrl

Author: matz3

lib/plugin/css-variables-collector.js

@@ -14,18 +14,24 @@ 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)
+CSSVariablesCollectorPlugin.getResolvedUrl = function({rawUrl, filename, libraryName}) {
+	if (!libraryName) {
+		return null;
+	}
+	const libraryNamespace = libraryName.replace(/\./g, "/");
+	const namespaceIndex = filename.indexOf(libraryNamespace);
+	if (namespaceIndex === -1) {
+		// TODO: log warning/error?
 		return null;
 	}
+	if (rawUrl.startsWith("/")) {
+		return rawUrl;
+	}
+	const baseUi5Url = "ui5://" + filename.substr(namespaceIndex);
+	// rawUrl will be resolved against ui5:// path if it is not absolute
+	// An absolute rawUrl will be returned as-is
+	const url = new URL(rawUrl, baseUi5Url);
+	return url.href;
 },
 
 CSSVariablesCollectorPlugin.prototype = {
@@ -218,7 +224,8 @@ CSSVariablesCollectorPlugin.prototype = {
 					if (urlMatch) {
 						const resolvedUrl = CSSVariablesCollectorPlugin.getResolvedUrl({
 							rawUrl: urlMatch[1],
-							filename: value.currentFileInfo.filename
+							filename: value.currentFileInfo.filename,
+							libraryName: this.config.libName
 						});
 						if (resolvedUrl) {
 							const resolvedUrlVariableName = `${variableName}__asResolvedUrl`;

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

@@ -7,11 +7,32 @@ const assert = require("assert");
 const CSSVariablesCollectorPlugin = require("../lib/plugin/css-variables-collector");
 
 describe("CSSVariablesCollectorPlugin.getResolvedUrl", function() {
-	it("should resolve relative url to ui5:// url", function() {
+	it("should resolve relative url to ui5:// url (filename with /resources/ - UI5 Tooling)", function() {
 		assert.strictEqual(
 			CSSVariablesCollectorPlugin.getResolvedUrl({
 				rawUrl: "img/foo.png",
-				filename: "/resources/sap/ui/foo/themes/base/Foo.less"
+				filename: "/resources/sap/ui/foo/themes/base/Foo.less",
+				libraryName: "sap.ui.foo"
+			}),
+			"ui5://sap/ui/foo/themes/base/img/foo.png"
+		);
+	});
+	it("should resolve relative url to ui5:// url (filename with / - grunt-openui5/connect-openui5)", function() {
+		assert.strictEqual(
+			CSSVariablesCollectorPlugin.getResolvedUrl({
+				rawUrl: "img/foo.png",
+				filename: "/sap/ui/foo/themes/base/Foo.less",
+				libraryName: "sap.ui.foo"
+			}),
+			"ui5://sap/ui/foo/themes/base/img/foo.png"
+		);
+	});
+	it("should resolve relative url to ui5:// url (filename absolute fs path - custom usage)", function() {
+		assert.strictEqual(
+			CSSVariablesCollectorPlugin.getResolvedUrl({
+				rawUrl: "img/foo.png",
+				filename: "/Users/root/sap/ui/foo/themes/base/Foo.less",
+				libraryName: "sap.ui.foo"
 			}),
 			"ui5://sap/ui/foo/themes/base/img/foo.png"
 		);
@@ -20,7 +41,8 @@ describe("CSSVariablesCollectorPlugin.getResolvedUrl", function() {
 		assert.strictEqual(
 			CSSVariablesCollectorPlugin.getResolvedUrl({
 				rawUrl: "/assets/img/foo.png",
-				filename: "/resources/sap/ui/foo/themes/base/Foo.less"
+				filename: "/resources/sap/ui/foo/themes/base/Foo.less",
+				libraryName: "sap.ui.foo"
 			}),
 			"/assets/img/foo.png"
 		);
@@ -29,9 +51,20 @@ describe("CSSVariablesCollectorPlugin.getResolvedUrl", function() {
 		assert.strictEqual(
 			CSSVariablesCollectorPlugin.getResolvedUrl({
 				rawUrl: "http://example.com/assets/img/foo.png",
-				filename: "/resources/sap/ui/foo/themes/base/Foo.less"
+				filename: "/resources/sap/ui/foo/themes/base/Foo.less",
+				libraryName: "sap.ui.foo"
 			}),
 			"http://example.com/assets/img/foo.png"
 		);
 	});
+	it("Error: should return null when library namespace is not part of filename", function() {
+		assert.strictEqual(
+			CSSVariablesCollectorPlugin.getResolvedUrl({
+				rawUrl: "img/foo.png",
+				filename: "/resources/sap/ui/foo/themes/base/Foo.less",
+				libraryName: "sap.ui.bar"
+			}),
+			null
+		);
+	});
 });