data-ui5-theme-properties are loaded with a delay

[ndeshev]

Hello,

Recently we observed strange behavior when we were trying to get css variable values in a component, like this:

const padding = getComputedStyle(document.querySelector(":root")).getPropertyValue("--_ui5_textarea_padding");

This line will not return the computed style value in the onBeforeRendering method, unless the currently used theme is the default 'Fiori 3' one.

If we try to get it on a later stage of the component lifecycle or after everything is loaded it is ok. Even if we put a breakpoint in onBeforeRendering it is getting loaded. However, otherwise its not, so it seems there is a delay for some reason.

Seems like the second style block that is responsible for the component specific parameters is the one not loaded on time: document.querySelectorAll(style[data-ui5-theme-properties])[1]

The first one with the global variables such as --sapFontSize is fine.

We also tried using the ThemeLoaded event, the result was the same. At the time when the handler is executed there are only the global vars loaded.

attachThemeLoaded((theme) => {
   console.log(getComputedStyle(document.querySelector(":root")).getPropertyValue("--_ui5_textarea_padding"));
   console.log(document.querySelectorAll(`style[data-ui5-theme-properties]`));

   console.log(theme);
});

It seems like no matter what theme is set, the library first loads all fiori_3 params and only after that the ones that are related to the currently used theme.

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High