Again, fix inline theme parameters encoding for '#'

Proper encoding fix. See #23, #26. A '#' character marks the start of the URI fragment component and needs to be escaped to be part of the body. Currently, this still works without encoding, but browsers might change this in future. See: https://www.chromestatus.com/features/5656049583390720
SAP · Sep 10, 2018 · 33484c4 · 33484c4
1 parent 90b0cb7
commit 33484c4
Show file tree

Hide file tree

Showing 14 changed files with 21 additions and 23 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -244,18 +244,16 @@ Builder.prototype.build = function(options) {
 			if (typeof options.library === "object" && typeof options.library.name === "string") {
 				let parameters = JSON.stringify(result.variables);
 
-				// escape all chars that could cause problems with css parsers using URI-Encoding (% + HEX-Code)
-				let escapedChars = "%{}()'\"\\";
-				for (let i = 0; i < escapedChars.length; i++) {
-					let char = escapedChars.charAt(i);
-					let hex = char.charCodeAt(0).toString(16).toUpperCase();
-					parameters = parameters.replace(new RegExp("\\" + char, "g"), "%" + hex);
-				}
+				// 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);
+				});
 
-				let parameterStyleRule =
-					"\n/* Inline theming parameters */\n#sap-ui-theme-" +
+				// 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," + parameters + "'); }\n";
+					"{background-image:url('data:text/plain;utf-8," + escapedParameters + "')}\n";
 
 				// embed parameter variables as plain-text string into css
 				result.css += parameterStyleRule;

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
@@ -6,4 +6,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22color1%22:%22#fefefe%22%7D'); }
+#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22color1%22%3A%22%23fefefe%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
@@ -6,4 +6,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22color1%22:%22#fefefe%22%7D'); }
+#sap-ui-theme-my\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22color1%22%3A%22%23fefefe%22%7D')}
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
@@ -10,4 +10,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22default%22:%7B%22color1%22:%22#ffffff%22%7D,%22scopes%22:%7B%22fooContrast%22:%7B%22color1%22:%22#000000%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%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
@@ -10,4 +10,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22default%22:%7B%22color1%22:%22#ffffff%22%7D,%22scopes%22:%7B%22fooContrast%22:%7B%22color1%22:%22#000000%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%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/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:%7B%22color1%22:%22#ffffff%22%7D,%22scopes%22:%7B%22barContrast%22:%7B%22color1%22:%22#000000%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%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
@@ -10,4 +10,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22default%22:%7B%22color1%22:%22#ffffff%22%7D,%22scopes%22:%7B%22barContrast%22:%7B%22color1%22:%22#000000%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%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/lib3/my/other/ui/lib/themes/bar/library-RTL.css b/test/expected/libraries/lib3/my/other/ui/lib/themes/bar/library-RTL.css
@@ -10,4 +10,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.other\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22default%22:%7B%22_my_other_ui_lib_MyControl_color1%22:%22#ffffff%22,%22_my_other_ui_lib_MyControl_color2%22:%22#008000%22%7D,%22scopes%22:%7B%22barContrast%22:%7B%22_my_other_ui_lib_MyControl_color1%22:%22#000000%22%7D%7D%7D'); }
+#sap-ui-theme-my\.other\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23ffffff%22%2C%22_my_other_ui_lib_MyControl_color2%22%3A%22%23008000%22%7D%2C%22scopes%22%3A%7B%22barContrast%22%3A%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23000000%22%7D%7D%7D')}
diff --git a/test/expected/libraries/lib3/my/other/ui/lib/themes/bar/library.css b/test/expected/libraries/lib3/my/other/ui/lib/themes/bar/library.css
@@ -10,4 +10,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.other\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22default%22:%7B%22_my_other_ui_lib_MyControl_color1%22:%22#ffffff%22,%22_my_other_ui_lib_MyControl_color2%22:%22#008000%22%7D,%22scopes%22:%7B%22barContrast%22:%7B%22_my_other_ui_lib_MyControl_color1%22:%22#000000%22%7D%7D%7D'); }
+#sap-ui-theme-my\.other\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23ffffff%22%2C%22_my_other_ui_lib_MyControl_color2%22%3A%22%23008000%22%7D%2C%22scopes%22%3A%7B%22barContrast%22%3A%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23000000%22%7D%7D%7D')}
diff --git a/test/expected/libraries/lib3/my/other/ui/lib/themes/base/library-RTL.css b/test/expected/libraries/lib3/my/other/ui/lib/themes/base/library-RTL.css
@@ -6,4 +6,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.other\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22_my_other_ui_lib_MyControl_color1%22:%22#fefefe%22%7D'); }
+#sap-ui-theme-my\.other\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23fefefe%22%7D')}
diff --git a/test/expected/libraries/lib3/my/other/ui/lib/themes/base/library.css b/test/expected/libraries/lib3/my/other/ui/lib/themes/base/library.css
@@ -6,4 +6,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.other\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22_my_other_ui_lib_MyControl_color1%22:%22#fefefe%22%7D'); }
+#sap-ui-theme-my\.other\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23fefefe%22%7D')}
diff --git a/test/expected/libraries/lib3/my/other/ui/lib/themes/foo/library-RTL.css b/test/expected/libraries/lib3/my/other/ui/lib/themes/foo/library-RTL.css
@@ -10,4 +10,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.other\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22default%22:%7B%22_my_other_ui_lib_MyControl_color1%22:%22#ffffff%22,%22_my_other_ui_lib_MyControl_color2%22:%22#008000%22%7D,%22scopes%22:%7B%22fooContrast%22:%7B%22_my_other_ui_lib_MyControl_color1%22:%22#000000%22%7D%7D%7D'); }
+#sap-ui-theme-my\.other\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23ffffff%22%2C%22_my_other_ui_lib_MyControl_color2%22%3A%22%23008000%22%7D%2C%22scopes%22%3A%7B%22fooContrast%22%3A%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23000000%22%7D%7D%7D')}
diff --git a/test/expected/libraries/lib3/my/other/ui/lib/themes/foo/library.css b/test/expected/libraries/lib3/my/other/ui/lib/themes/foo/library.css
@@ -10,4 +10,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-my\.other\.ui\.lib { background-image: url('data:text/plain;utf-8,%7B%22default%22:%7B%22_my_other_ui_lib_MyControl_color1%22:%22#ffffff%22,%22_my_other_ui_lib_MyControl_color2%22:%22#008000%22%7D,%22scopes%22:%7B%22fooContrast%22:%7B%22_my_other_ui_lib_MyControl_color1%22:%22#000000%22%7D%7D%7D'); }
+#sap-ui-theme-my\.other\.ui\.lib{background-image:url('data:text/plain;utf-8,%7B%22default%22%3A%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23ffffff%22%2C%22_my_other_ui_lib_MyControl_color2%22%3A%22%23008000%22%7D%2C%22scopes%22%3A%7B%22fooContrast%22%3A%7B%22_my_other_ui_lib_MyControl_color1%22%3A%22%23000000%22%7D%7D%7D')}
diff --git a/test/expected/simple/test-inline-parameters.css b/test/expected/simple/test-inline-parameters.css
@@ -4,4 +4,4 @@
 }
 
 /* Inline theming parameters */
-#sap-ui-theme-foo\.bar { background-image: url('data:text/plain;utf-8,%7B%22myColor%22:%22#ff0000%22%7D'); }
+#sap-ui-theme-foo\.bar{background-image:url('data:text/plain;utf-8,%7B%22myColor%22%3A%22%23ff0000%22%7D')}