Include fonts in themes (standalone build for `theme-library`)

abs-lme commented 1 year ago

Hi!

First of all, I am not sure if this is a bug or a feature request.

Is your feature request related to a problem? Please describe.

I found that when creating a custom theme (using type theme-library) it builds all the CSS files but the theme is not really usable as the font files are not contained in the build result.

CheckBox tick marks and Select arrows are not properly displayed in the theme:

The reason is that the fonts (especially the SAP-icons) are not loaded.

Further analysis

I made a MWE. It just contains a theme-library project with framework SAPUI5 1.104.2 and 5 dependent libraries (sap.m, sap.ui.core, sap.ui.layout, sap.ui.unified, themelib_sap_horizon).

When running the app with parameter sap-ui-theme=custom_horizon@/theme:

it properly loads CSS files from /theme/UI5/sap/ui/core/themes/custom_horizon/library.css?version=1.104.0&sap-ui-dist-version=1.104.2 and similar URLs
it tries to load the fonts from /theme/UI5/sap/ui/core/themes/sap_horizon/fonts/72-Bold.woff2, /theme/UI5/sap/ui/core/themes/sap_horizon/fonts/SAP-icons.woff2 and others, but fails with error 404

I checked the dist folder and found that it only contains css, but no font files. For testing I copied the requested font files to the corresponding folders and re-built and re-deployed the theme. It worked without any 404s.

Describe the solution you'd like

It would be nice to have the possibility to create a self-contained theme, like the self-contained mode works for apps.

Additional information

The theme is deployed to a CF HTML5 repository (but it would be the same when deploying to another custom server).

Thanks a lot!

Lennart

RandomByte commented 1 year ago

Hey Lennart, could you possibly share your MWE with us? This would help us responding with a precise solution for you. Thanks!

abs-lme commented 1 year ago

Hi @RandomByte, sorry for the delay. I did not find the original MWE but created another one. https://github.com/abs-lme/mwe-ui5tooling-standalone-theme

You just have to npm i (it will build the theme automatically) and serve the app. The built theme is consumed by the app so you can see that the theme does not really work on http://localhost:8080.

I added some details to the readme file.

Thanks a lot,

Lennart

matz3 commented 1 year ago

@abs-lme thanks for the example.

Currently, there is no dedicated self-contained build for type theme-library. The command works, but it doesn't do anything different from a normal build. Every theme is still on its own and references to resources such as fonts that are part of other themes (like "base" or "sap_fiori_3") remain as they are defined in their sources.

Therefore you need to enable the --all option to include all dependencies into the build output. This is documented as a recommendation when using self-contained build).

We're aware that this increases the build output and includes all other non-theme related resources of the libraries. However, this is something we'd like to target in the future. See https://github.com/SAP/ui5-tooling/issues/731 for a similar existing discussion.

In the meantime we suggest to manually remove files that are not needed from the build results. For themes a simple pattern like **/themes/** should be sufficient to identify files which should be kept. This needs to be done in a separate step and can't be done via a custom task, as only files of the current project can be filtered out, not files from dependencies.

I'll keep this issue open until we've defined the aforementioned improvement, along with all other existing feature requests regarding reduction of the build output, in a dedicated issue.

abs-lme commented 1 year ago

Hi @matz3 thanks for your reply. I did it the other way around and copied the missing font files to my theme.

SAP / ui5-tooling