Skip to content

feat(framework): prevent CSS vars from loading #12432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
+44 −9
Closed

feat(framework): prevent CSS vars from loading #12432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
daa1da6
feat(framework): prevent CSS vars from loading
nnaydenow Oct 6, 2025
36b2bbf
chore: comment
nnaydenow Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/base/src/InitialConfiguration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ type InitialConfig = {
noConflict: boolean,
formatSettings: FormatSettings,
fetchDefaultLanguage: boolean,
fetchDefaultThemingCSSVars: boolean,
defaultFontLoading: boolean,
enableDefaultTooltips: boolean,
};
Expand All @@ -39,6 +40,7 @@ let initialConfig: InitialConfig = {
noConflict: false, // no URL
formatSettings: {},
fetchDefaultLanguage: false,
fetchDefaultThemingCSSVars: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets make the default false like attributes, its easier to read and more logical when people want to set it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's left in that way in order to discuss the proper name of the configuration and then it will be renamed.

defaultFontLoading: true,
enableDefaultTooltips: true,
};
Expand Down Expand Up @@ -84,6 +86,16 @@ const getFetchDefaultLanguage = () => {
return initialConfig.fetchDefaultLanguage;
};

/**
* Returns if the default language, that is inlined at build time,
* should be fetched over the network instead.
* @returns {Boolean}
*/
const getFetchDefaultThemingCSSVars = () => {
initConfiguration();
return initialConfig.fetchDefaultThemingCSSVars;
};

const getNoConflict = () => {
initConfiguration();
return initialConfig.noConflict;
Expand Down Expand Up @@ -257,4 +269,5 @@ export {
getDefaultFontLoading,
resetConfiguration,
getEnableDefaultTooltips,
getFetchDefaultThemingCSSVars,
};
12 changes: 11 additions & 1 deletion packages/base/src/config/Theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js";
import { getTheme as getConfiguredTheme, getFetchDefaultThemingCSSVars as getConfiguredFetchDefaultThemingCSSVars } from "../InitialConfiguration.js";
import { reRenderAllUI5Elements } from "../Render.js";
import applyTheme from "../theming/applyTheme.js";
import getThemeDesignerTheme from "../theming/getThemeDesignerTheme.js";
Expand All @@ -7,6 +7,7 @@ import { boot, isBooted } from "../Boot.js";
import { attachConfigurationReset } from "./ConfigurationReset.js";

let curTheme: string | undefined;
let fetchDefaultThemingCSSVars: boolean | undefined;

attachConfigurationReset(() => {
curTheme = undefined;
Expand Down Expand Up @@ -91,11 +92,20 @@ const isLegacyThemeFamilyAsync = async () => {

const isKnownTheme = (theme: string) => SUPPORTED_THEMES.includes(theme);

const getFetchDefaultThemingCSSVars = (): boolean => {
if (fetchDefaultThemingCSSVars === undefined) {
fetchDefaultThemingCSSVars = getConfiguredFetchDefaultThemingCSSVars();
}

return fetchDefaultThemingCSSVars;
};

export {
getTheme,
setTheme,
isTheme,
isLegacyThemeFamily,
isLegacyThemeFamilyAsync,
getDefaultTheme,
getFetchDefaultThemingCSSVars,
};
6 changes: 6 additions & 0 deletions packages/base/src/theming/applyTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot
import type OpenUI5Support from "../features/OpenUI5Support.js";
import { DEFAULT_THEME } from "../generated/AssetParameters.js";
import { getCurrentRuntimeIndex } from "../Runtimes.js";
import { getFetchDefaultThemingCSSVars } from "../config/Theme.js";

// eslint-disable-next-line
export let _lib = "ui5";
Expand All @@ -21,6 +22,11 @@ const isThemeBaseRegistered = () => {
};

const loadThemeBase = async (theme: string) => {
// If getFetchDefaultThemingCSSVars is false, do not load theme CSS properties from theming package.
if (!getFetchDefaultThemingCSSVars()) {
return;
}

if (!isThemeBaseRegistered()) {
return;
}
Expand Down
22 changes: 14 additions & 8 deletions packages/tools/lib/css-processors/shared.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const writeFileIfChanged = async (fileName, content) => {
const oldContent = await readOldContent(fileName);
if (content !== oldContent) {
if (!oldContent) {
await mkdir(path.dirname(fileName), {recursive: true});
await mkdir(path.dirname(fileName), { recursive: true });
}
return writeFile(fileName, content);
}
Expand All @@ -27,20 +27,26 @@ const writeFileIfChanged = async (fileName, content) => {
const DEFAULT_THEME = assets.themes.default;

const getDefaultThemeCode = packageName => {
return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
import { getFetchDefaultThemingCSSVars } from "@ui5/webcomponents-base/dist/config/Theme.js";

import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";

registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
registerThemePropertiesLoader(${ packageName.split("").map(c => `"${c}"`).join (" + ") }, "${DEFAULT_THEME}", async () => defaultTheme);
// If getFetchDefaultThemingCSSVars is false, do not load theme CSS properties from theming package.
if (!getFetchDefaultThemingCSSVars()) {
const defaultThemeBase = (await import("@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js")).default;

registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
}

registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, "${DEFAULT_THEME}", async () => defaultTheme);
`;
};

const getFileContent = (packageName, css, includeDefaultTheme) => {
const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
return `${defaultTheme}export default ${css.trim()}`
const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
return `${defaultTheme}export default ${css.trim()}`
}


export { writeFileIfChanged, getFileContent}
export { writeFileIfChanged, getFileContent }
Loading