Missing CSS variables

[ee92]

Describe the bug
After upgrading from version 0.29.x to 0.31.x, the page has an issue with missing css variables when one of the following themes is used:
["sap_belize", "sap_belize_hcb", "sap_belize_hcw", "sap_fiori_3_dark", "sap_fiori_3_hcb", "sap_fiori_3_hcw"]

It seems to stem from a change to @ui5/webcomponents-theme-base/dist/generated/json-imports/Themes.js where these themes cause an error to be thrown.

To reproduce
Steps to reproduce the behavior:
Will provide an instance and steps in the #sap-tech-ui5-wc-sfsf slack channel

Context

• UI5 Web Components version: 0.31.6

Log output / Any errors in the console

ui5/webcomponents [themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the "Assets" documentation for more information.

Organization:
SuccessFactors

Priority:
Very High

Business impact:
Affects entire page, which relies heavily on css variables from ui5-webcomponents for styling.

[vladitasev]

Hello colleagues,

This is not a bug per se, but rather an adaptation to your build scripts is needed in order to accommodate for a BREAKING CHANGE with release 0.31

#2740
and
#2829

In essence, what you need to do is:

1. If you want to start using the new dynamic imports:
   A. If you're using rollup, stop using the url plugin, and start using the json plugin instead:

Something like this:

plugins.push(json({
			include: [
				/.*assets\/.*\.json/,
			],
			namedExports: false,
		}));

B. If you're using webpack - you only need to stop using the url plugin (webpack natively supports json imports now).

2. If you want to keep using the Static imports (keep same behavior as before) - for example you might want that in case you're using an ES5-only build to support both modern browsers and IE11, then you must only change a couple of imports

import "@ui5/webcomponents/dist/Assets.js"
should become:
import "@ui5/webcomponents/dist/Assets-static.js"

and the same for all other libraries.

If you import dist/Assets.js from any library, start importing dist/Assets-static.js instead.

Let me know if you still have any issues after this change.

Regards,
Vladi

[ee92]

Thanks Vladi! For now we will just import Assets-static.js and start looking into how to switch to using the dynamic imports.