From 33484c4fe8a47eabbeaae5ad840cf3689c54375d Mon Sep 17 00:00:00 2001 From: Matthias Osswald Date: Mon, 10 Sep 2018 09:12:14 +0200 Subject: [PATCH] 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 --- lib/index.js | 18 ++++++++---------- .../lib1/my/ui/lib/themes/base/library-RTL.css | 2 +- .../lib1/my/ui/lib/themes/base/library.css | 2 +- .../lib1/my/ui/lib/themes/foo/library-RTL.css | 2 +- .../lib1/my/ui/lib/themes/foo/library.css | 2 +- .../lib2/my/ui/lib/themes/bar/library-RTL.css | 2 +- .../lib2/my/ui/lib/themes/bar/library.css | 2 +- .../my/other/ui/lib/themes/bar/library-RTL.css | 2 +- .../my/other/ui/lib/themes/bar/library.css | 2 +- .../other/ui/lib/themes/base/library-RTL.css | 2 +- .../my/other/ui/lib/themes/base/library.css | 2 +- .../my/other/ui/lib/themes/foo/library-RTL.css | 2 +- .../my/other/ui/lib/themes/foo/library.css | 2 +- .../expected/simple/test-inline-parameters.css | 2 +- 14 files changed, 21 insertions(+), 23 deletions(-) diff --git a/lib/index.js b/lib/index.js index 1d24ed59..82e0a64c 100644 --- 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 index 5b61f9d9..b4fa40b4 100644 --- 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'); } \ No newline at end of file +#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 index 7c2d07e3..ab288cc3 100644 --- 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'); } \ No newline at end of file +#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 index bf4c799f..98be25eb 100644 --- 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 index 85b1e124..d6ef449d 100644 --- 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 index 393920b4..bed836dc 100644 --- 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 index 57a7cb27..35069100 100644 --- 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 index 624cec0b..73b0a39b 100644 --- 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 index 0afba175..3a779c39 100644 --- 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 index 116a7072..8c2b7e1c 100644 --- 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 index a3fa0e65..28388459 100644 --- 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 index 3cd0bb6f..cee37fbf 100644 --- 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 index cf3aaa08..bcf00c10 100644 --- 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 index 489f5371..8c0e3f8b 100644 --- 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')}