From ffaf2351a7040c81671475eea6faf606312ffee4 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Thu, 20 Nov 2025 13:07:13 +0200 Subject: [PATCH 1/4] feat(framework): prevent theming base content from loading --- packages/main/src/bundle.common.bootstrap.ts | 2 + packages/main/test/pages/Button.html | 2 +- packages/theming/package-scripts.cjs | 6 +- packages/theming/src/Assets-original-fetch.ts | 4 + packages/theming/src/Assets-original-node.ts | 15 ++++ packages/theming/src/Assets-original.ts | 4 + packages/theming/src/OriginalCSSVars.ts | 25 +++++++ .../css-processors/css-processor-themes.mjs | 75 ++++++++++++++----- .../tools/lib/generate-json-imports/themes.js | 15 ++-- 9 files changed, 119 insertions(+), 29 deletions(-) create mode 100644 packages/theming/src/Assets-original-fetch.ts create mode 100644 packages/theming/src/Assets-original-node.ts create mode 100644 packages/theming/src/Assets-original.ts create mode 100644 packages/theming/src/OriginalCSSVars.ts diff --git a/packages/main/src/bundle.common.bootstrap.ts b/packages/main/src/bundle.common.bootstrap.ts index bfe51ae57a00..9fb1005ebc90 100644 --- a/packages/main/src/bundle.common.bootstrap.ts +++ b/packages/main/src/bundle.common.bootstrap.ts @@ -4,6 +4,8 @@ import { setRuntimeAlias } from "@ui5/webcomponents-base/dist/Runtimes.js"; // OpenUI5 integration import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js"; +import "@ui5/webcomponents-theming/dist/Assets-original.js"; + // Assets import "./Assets.js"; diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html index 77fda879404d..68c5f049ab42 100644 --- a/packages/main/test/pages/Button.html +++ b/packages/main/test/pages/Button.html @@ -18,7 +18,7 @@ - + Reject Add diff --git a/packages/theming/package-scripts.cjs b/packages/theming/package-scripts.cjs index 41afd71c7137..03f97ce2f6c3 100644 --- a/packages/theming/package-scripts.cjs +++ b/packages/theming/package-scripts.cjs @@ -24,7 +24,11 @@ module.exports = { src: `ui5nps-script "${TOOLS_LIB}copy-and-watch/index.js" "src/**/*.{json}" dist/`, typescript: "tsc", postcss: `ui5nps-script "${TOOLS_LIB}/css-processors/css-processor-themes.mjs"`, - jsonImports: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports`, + jsonImports: { + default: "ui5nps build.jsonImports.scoped build.jsonImports.original", + scoped: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports`, + original: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports -original`, + } }, generateReport: `ui5nps-script "${generateReportScript}"`, }, diff --git a/packages/theming/src/Assets-original-fetch.ts b/packages/theming/src/Assets-original-fetch.ts new file mode 100644 index 000000000000..47b44431db8d --- /dev/null +++ b/packages/theming/src/Assets-original-fetch.ts @@ -0,0 +1,4 @@ +// The theming package provides theming assets only +import "./generated/json-imports/Themes-original-fetch.js"; + +import "./OriginalCSSVars.js"; \ No newline at end of file diff --git a/packages/theming/src/Assets-original-node.ts b/packages/theming/src/Assets-original-node.ts new file mode 100644 index 000000000000..260f79c502e4 --- /dev/null +++ b/packages/theming/src/Assets-original-node.ts @@ -0,0 +1,15 @@ +/** + * The `Assets-node` entry point is used to import theming assets. + * + * It serves as an alternative to the `Assets` and `Assets-fetch` modules and supports the + * `with: { type: 'json' }` import attribute for loading JSON files. + * + * This import attribute is required in some environments, such as Node.js with server-side rendering (SSR). + * + * Example usage: + * await import("../assets/themes/sap_horizon/parameters-bundle.css.json", { with: { type: 'json' } }) + */ + +import "./generated/json-imports/Themes-original-node.js"; + +import "./OriginalCSSVars.js"; \ No newline at end of file diff --git a/packages/theming/src/Assets-original.ts b/packages/theming/src/Assets-original.ts new file mode 100644 index 000000000000..1aa92e139e11 --- /dev/null +++ b/packages/theming/src/Assets-original.ts @@ -0,0 +1,4 @@ +// The theming package provides theming assets only +import "./generated/json-imports/Themes-original.js"; + +import "./OriginalCSSVars.js"; \ No newline at end of file diff --git a/packages/theming/src/OriginalCSSVars.ts b/packages/theming/src/OriginalCSSVars.ts new file mode 100644 index 000000000000..04b6359d0ad3 --- /dev/null +++ b/packages/theming/src/OriginalCSSVars.ts @@ -0,0 +1,25 @@ +import { getRegisteredPackages, getThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js"; +import { createOrUpdateStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js"; +import { attachThemeLoaded } from "@ui5/webcomponents-base/dist/Theming.js"; + +const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming-original"; + +const isThemeBaseRegistered = () => { + const registeredPackages = getRegisteredPackages(); + return registeredPackages.has(BASE_THEME_PACKAGE); +}; + +const loadThemeBase = async (theme: string) => { + if (!isThemeBaseRegistered()) { + return; + } + + const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme); + if (cssData) { + createOrUpdateStyle(cssData, "data-ui5-theme-properties-original", BASE_THEME_PACKAGE, theme); + } +}; + +attachThemeLoaded(theme => { + loadThemeBase(theme); +}); diff --git a/packages/tools/lib/css-processors/css-processor-themes.mjs b/packages/tools/lib/css-processors/css-processor-themes.mjs index 656402979911..50c5ad7618b4 100644 --- a/packages/tools/lib/css-processors/css-processor-themes.mjs +++ b/packages/tools/lib/css-processors/css-processor-themes.mjs @@ -9,24 +9,28 @@ import { writeFileIfChanged, getFileContent } from "./shared.mjs"; import { scopeUi5Variables, scopeThemingVariables } from "./scope-variables.mjs"; import { pathToFileURL } from "url"; -async function processThemingPackageFile(f) { +async function processThemingPackageFile(f, scope = true) { const selector = ':root'; const newRule = postcss.rule({ selector }); const result = await postcss().process(f.text); result.root.walkRules(selector, rule => { for (const decl of rule.nodes) { - if (decl.type !== 'decl' ) { + if (decl.type !== 'decl') { continue; } else if (decl.prop.startsWith('--sapFontUrl')) { continue; } else if (!decl.prop.startsWith('--sap')) { newRule.append(decl.clone()); } else { - const originalProp = decl.prop; - const originalValue = decl.value; - - newRule.append(decl.clone({ prop: originalProp.replace("--sap", "--ui5-sap"), value: `var(${originalProp}, ${originalValue})` })); + if (scope) { + const originalProp = decl.prop; + const originalValue = decl.value; + + newRule.append(decl.clone({ prop: originalProp.replace("--sap", "--ui5-sap"), value: `var(${originalProp}, ${originalValue})` })); + } else { + newRule.append(decl.clone()); + } } } }); @@ -62,20 +66,51 @@ async function generate(argv) { build.onEnd(result => { result.outputFiles.forEach(async f => { - let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f, packageJSON); - - await mkdir(path.dirname(f.path), { recursive: true }); - writeFile(f.path, newText); - - // JSON - const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json"); - await mkdir(path.dirname(jsonPath), { recursive: true }); - writeFileIfChanged(jsonPath, JSON.stringify(newText)); - - // JS/TS - const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension); - const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`"); - writeFileIfChanged(jsPath, jsContent); + if (f.path.includes("packages/theming")) { + const scopedText = await processThemingPackageFile(f); + const originalText = await processThemingPackageFile(f, false); + + const originalPath = f.path.replace(/parameters-bundle.css$/, "parameters-bundle-original.css"); + + await mkdir(path.dirname(f.path), { recursive: true }); + writeFile(f.path, scopedText); + + await mkdir(path.dirname(originalPath), { recursive: true }); + writeFile(originalPath, originalText); + + // JSON + const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json"); + writeFileIfChanged(jsonPath, JSON.stringify(scopedText)); + + const originalJsonPath = originalPath.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json"); + await mkdir(path.dirname(originalJsonPath), { recursive: true }); + writeFileIfChanged(originalJsonPath, JSON.stringify(originalText)); + + // JS/TS + const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension); + const jsContent = getFileContent(packageJSON.name, "\`" + scopedText + "\`"); + writeFileIfChanged(jsPath, jsContent); + + // JS/TS + const originalJsPath = originalPath.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension); + const originalJsContent = getFileContent(packageJSON.name, "\`" + originalText + "\`"); + writeFileIfChanged(originalJsPath, originalJsContent); + } else { + const newText = await processComponentPackageFile(f, packageJSON); + + await mkdir(path.dirname(f.path), { recursive: true }); + writeFile(f.path, newText); + + // JSON + const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json"); + await mkdir(path.dirname(jsonPath), { recursive: true }); + writeFileIfChanged(jsonPath, JSON.stringify(newText)); + + // JS/TS + const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension); + const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`"); + writeFileIfChanged(jsPath, jsContent); + } }); }) }, diff --git a/packages/tools/lib/generate-json-imports/themes.js b/packages/tools/lib/generate-json-imports/themes.js index b61d28a7226a..87f3e0e0369e 100644 --- a/packages/tools/lib/generate-json-imports/themes.js +++ b/packages/tools/lib/generate-json-imports/themes.js @@ -7,9 +7,10 @@ const ext = isTypeScript ? 'ts' : 'js'; const generate = async (argv) => { const inputFolder = path.normalize(argv[2]); - const outputFileDynamic = path.normalize(`${argv[3]}/Themes.${ext}`); - const outputFileDynamicImportJSONAttr = path.normalize(`${argv[3]}/Themes-node.${ext}`); - const outputFileFetchMetaResolve = path.normalize(`${argv[3]}/Themes-fetch.${ext}`); + const outputSuffix = argv[4] || ""; + const outputFileDynamic = path.normalize(`${argv[3]}/Themes${outputSuffix}.${ext}`); + const outputFileDynamicImportJSONAttr = path.normalize(`${argv[3]}/Themes${outputSuffix}-node.${ext}`); + const outputFileFetchMetaResolve = path.normalize(`${argv[3]}/Themes${outputSuffix}-fetch.${ext}`); // All supported optional themes const allThemes = assets.themes.all; @@ -24,9 +25,9 @@ const generate = async (argv) => { const packageName = JSON.parse(await fs.readFile("package.json")).name; const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`; - const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n"); - const dynamicImportJSONAttrLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json", {with: { type: 'json'}})).default;`).join("\n"); - const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle.css.json", import.meta.url))).json();`).join("\n"); + const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle${outputSuffix}.css.json")).default;`).join("\n"); + const dynamicImportJSONAttrLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle${outputSuffix}.css.json", {with: { type: 'json'}})).default;`).join("\n"); + const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle${outputSuffix}.css.json", import.meta.url))).json();`).join("\n"); // dynamic imports file content const contentDynamic = function (lines) { @@ -49,7 +50,7 @@ const loadAndCheck = async (themeName) => { }; ${availableThemesArray} - .forEach(themeName => registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck)); + .forEach(themeName => registerThemePropertiesLoader(${`${packageName + outputSuffix}`.split("").map(c => `"${c}"`).join(" + ")}, themeName, loadAndCheck)); `; } From 8ae75343a5f5e02c3bc8fdc17ecaa67bc66c8ce7 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 24 Nov 2025 10:44:56 +0200 Subject: [PATCH 2/4] chore: rename and add config --- packages/base/src/InitialConfiguration.ts | 8 +++++++ packages/base/src/asset-registries/Themes.ts | 5 +++++ packages/base/src/config/Theme.ts | 17 ++++++++++++++- packages/compat/cypress/specs/Table.cy.tsx | 1 - packages/main/src/bundle.common.bootstrap.ts | 12 +++++++++-- packages/main/test/pages/theming/Themes7.html | 21 +++++++++++++++++++ packages/main/test/pages/theming/Themes8.html | 21 +++++++++++++++++++ packages/theming/package-scripts.cjs | 4 ++-- ...-original-fetch.ts => Assets-raw-fetch.ts} | 2 +- ...ts-original-node.ts => Assets-raw-node.ts} | 2 +- .../src/{Assets-original.ts => Assets-raw.ts} | 2 +- packages/theming/src/OriginalCSSVars.ts | 9 ++++++-- .../css-processors/css-processor-themes.mjs | 2 +- 13 files changed, 94 insertions(+), 12 deletions(-) create mode 100644 packages/main/test/pages/theming/Themes7.html create mode 100644 packages/main/test/pages/theming/Themes8.html rename packages/theming/src/{Assets-original-fetch.ts => Assets-raw-fetch.ts} (58%) rename packages/theming/src/{Assets-original-node.ts => Assets-raw-node.ts} (89%) rename packages/theming/src/{Assets-original.ts => Assets-raw.ts} (60%) diff --git a/packages/base/src/InitialConfiguration.ts b/packages/base/src/InitialConfiguration.ts index 93eac751df77..b97a52b2cb26 100644 --- a/packages/base/src/InitialConfiguration.ts +++ b/packages/base/src/InitialConfiguration.ts @@ -24,6 +24,7 @@ type InitialConfig = { formatSettings: FormatSettings, fetchDefaultLanguage: boolean, defaultFontLoading: boolean, + defaultCSSVariablesLoading: boolean, enableDefaultTooltips: boolean, }; @@ -40,6 +41,7 @@ let initialConfig: InitialConfig = { formatSettings: {}, fetchDefaultLanguage: false, defaultFontLoading: true, + defaultCSSVariablesLoading: true, enableDefaultTooltips: true, }; @@ -94,6 +96,11 @@ const getDefaultFontLoading = () => { return initialConfig.defaultFontLoading; }; +const getDefaultCSSVariablesLoading = () => { + initConfiguration(); + return initialConfig.defaultCSSVariablesLoading; +}; + const getEnableDefaultTooltips = () => { initConfiguration(); return initialConfig.enableDefaultTooltips; @@ -255,6 +262,7 @@ export { getTimezone, getFormatSettings, getDefaultFontLoading, + getDefaultCSSVariablesLoading, resetConfiguration, getEnableDefaultTooltips, }; diff --git a/packages/base/src/asset-registries/Themes.ts b/packages/base/src/asset-registries/Themes.ts index 152778a6e1df..5eb425944827 100644 --- a/packages/base/src/asset-registries/Themes.ts +++ b/packages/base/src/asset-registries/Themes.ts @@ -1,3 +1,4 @@ +import { getDefaultCSSVariablesLoading } from "../config/Theme.js"; import { DEFAULT_THEME } from "../generated/AssetParameters.js"; import { mergeStyles } from "../ManagedStyles.js"; import { fireThemeRegistered } from "../theming/ThemeRegistered.js"; @@ -23,6 +24,10 @@ const registerCustomThemePropertiesLoader = (packageName: string, themeName: str }; const getThemeProperties = async (packageName: string, themeName: string, externalThemeName?: string) => { + if (getDefaultCSSVariablesLoading() !== true && packageName === "@ui5/webcomponents-theming-raw") { + return; + } + const cacheKey = `${packageName}_${themeName}_${externalThemeName || ""}`; const cachedStyleData = themeStyles.get(cacheKey); if (cachedStyleData !== undefined) { // it's valid for style to be an empty string diff --git a/packages/base/src/config/Theme.ts b/packages/base/src/config/Theme.ts index 4f5791796a05..64f069fd2670 100644 --- a/packages/base/src/config/Theme.ts +++ b/packages/base/src/config/Theme.ts @@ -1,4 +1,4 @@ -import { getTheme as getConfiguredTheme } from "../InitialConfiguration.js"; +import { getTheme as getConfiguredTheme, getDefaultCSSVariablesLoading as getConfiguredDefaultCSSVariablesLoading } from "../InitialConfiguration.js"; import { reRenderAllUI5Elements } from "../Render.js"; import applyTheme from "../theming/applyTheme.js"; import getThemeDesignerTheme from "../theming/getThemeDesignerTheme.js"; @@ -7,6 +7,7 @@ import { boot, isBooted } from "../Boot.js"; import { attachConfigurationReset } from "./ConfigurationReset.js"; let curTheme: string | undefined; +let defaultCSSVariablesLoading: boolean | undefined; attachConfigurationReset(() => { curTheme = undefined; @@ -57,6 +58,18 @@ const getDefaultTheme = (): string => { return DEFAULT_THEME; }; +const getDefaultCSSVariablesLoading = () => { + if (defaultCSSVariablesLoading === undefined) { + defaultCSSVariablesLoading = getConfiguredDefaultCSSVariablesLoading(); + } + + return defaultCSSVariablesLoading; +}; + +const setDefaultCSSVariablesLoading = (value: boolean) => { + defaultCSSVariablesLoading = value; +}; + /** * Returns if the given theme name is the one currently applied. * @private @@ -98,4 +111,6 @@ export { isLegacyThemeFamily, isLegacyThemeFamilyAsync, getDefaultTheme, + getDefaultCSSVariablesLoading, + setDefaultCSSVariablesLoading, }; diff --git a/packages/compat/cypress/specs/Table.cy.tsx b/packages/compat/cypress/specs/Table.cy.tsx index 516307524dc4..31b4c1bc4a91 100644 --- a/packages/compat/cypress/specs/Table.cy.tsx +++ b/packages/compat/cypress/specs/Table.cy.tsx @@ -509,7 +509,6 @@ describe("Table general interaction", () => { cy.get("@popinChange") .should(stub => { expect(stub).to.have.been.calledTwice; - debugger // @ts-ignore expect(stub.args.slice(-1)[0][0].detail.poppedColumns.length).to.equal(2); }) diff --git a/packages/main/src/bundle.common.bootstrap.ts b/packages/main/src/bundle.common.bootstrap.ts index 9fb1005ebc90..41597972f8d1 100644 --- a/packages/main/src/bundle.common.bootstrap.ts +++ b/packages/main/src/bundle.common.bootstrap.ts @@ -4,7 +4,7 @@ import { setRuntimeAlias } from "@ui5/webcomponents-base/dist/Runtimes.js"; // OpenUI5 integration import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js"; -import "@ui5/webcomponents-theming/dist/Assets-original.js"; +import "@ui5/webcomponents-theming/dist/Assets-raw.js"; // Assets import "./Assets.js"; @@ -62,7 +62,13 @@ import { resetConfiguration } from "@ui5/webcomponents-base/dist/InitialConfigur import { sanitizeHTML, URLListValidator } from "@ui5/webcomponents-base/dist/util/HTMLSanitizer.js"; import { getAnimationMode, setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; -import { getTheme, setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js"; +import { + getTheme, + setTheme, + isLegacyThemeFamily, + getDefaultCSSVariablesLoading, + setDefaultCSSVariablesLoading, +} from "@ui5/webcomponents-base/dist/config/Theme.js"; import { getThemeRoot, setThemeRoot } from "@ui5/webcomponents-base/dist/config/ThemeRoot.js"; import { getTimezone, setTimezone } from "@ui5/webcomponents-base/dist/config/Timezone.js"; import { getLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js"; @@ -106,6 +112,8 @@ const testAssets = { getFirstDayOfWeek, getTimezone, setTimezone, + getDefaultCSSVariablesLoading, + setDefaultCSSVariablesLoading, }, invisibleMessage: { announce, diff --git a/packages/main/test/pages/theming/Themes7.html b/packages/main/test/pages/theming/Themes7.html new file mode 100644 index 000000000000..2f24eb2166eb --- /dev/null +++ b/packages/main/test/pages/theming/Themes7.html @@ -0,0 +1,21 @@ + + + + + + Theming + + + + + + + + Some content + + + \ No newline at end of file diff --git a/packages/main/test/pages/theming/Themes8.html b/packages/main/test/pages/theming/Themes8.html new file mode 100644 index 000000000000..3fa4734990b0 --- /dev/null +++ b/packages/main/test/pages/theming/Themes8.html @@ -0,0 +1,21 @@ + + + + + + Theming + + + + + + + + Some content + + + \ No newline at end of file diff --git a/packages/theming/package-scripts.cjs b/packages/theming/package-scripts.cjs index 03f97ce2f6c3..a3a68d748144 100644 --- a/packages/theming/package-scripts.cjs +++ b/packages/theming/package-scripts.cjs @@ -25,9 +25,9 @@ module.exports = { typescript: "tsc", postcss: `ui5nps-script "${TOOLS_LIB}/css-processors/css-processor-themes.mjs"`, jsonImports: { - default: "ui5nps build.jsonImports.scoped build.jsonImports.original", + default: "ui5nps build.jsonImports.scoped build.jsonImports.raw", scoped: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports`, - original: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports -original`, + raw: `ui5nps-script "${jsonImportsScript}" src/themes src/generated/json-imports -raw`, } }, generateReport: `ui5nps-script "${generateReportScript}"`, diff --git a/packages/theming/src/Assets-original-fetch.ts b/packages/theming/src/Assets-raw-fetch.ts similarity index 58% rename from packages/theming/src/Assets-original-fetch.ts rename to packages/theming/src/Assets-raw-fetch.ts index 47b44431db8d..7cec6a0608f7 100644 --- a/packages/theming/src/Assets-original-fetch.ts +++ b/packages/theming/src/Assets-raw-fetch.ts @@ -1,4 +1,4 @@ // The theming package provides theming assets only -import "./generated/json-imports/Themes-original-fetch.js"; +import "./generated/json-imports/Themes-raw-fetch.js"; import "./OriginalCSSVars.js"; \ No newline at end of file diff --git a/packages/theming/src/Assets-original-node.ts b/packages/theming/src/Assets-raw-node.ts similarity index 89% rename from packages/theming/src/Assets-original-node.ts rename to packages/theming/src/Assets-raw-node.ts index 260f79c502e4..30d387ed2c8f 100644 --- a/packages/theming/src/Assets-original-node.ts +++ b/packages/theming/src/Assets-raw-node.ts @@ -10,6 +10,6 @@ * await import("../assets/themes/sap_horizon/parameters-bundle.css.json", { with: { type: 'json' } }) */ -import "./generated/json-imports/Themes-original-node.js"; +import "./generated/json-imports/Themes-raw-node.js"; import "./OriginalCSSVars.js"; \ No newline at end of file diff --git a/packages/theming/src/Assets-original.ts b/packages/theming/src/Assets-raw.ts similarity index 60% rename from packages/theming/src/Assets-original.ts rename to packages/theming/src/Assets-raw.ts index 1aa92e139e11..a942fdc2a655 100644 --- a/packages/theming/src/Assets-original.ts +++ b/packages/theming/src/Assets-raw.ts @@ -1,4 +1,4 @@ // The theming package provides theming assets only -import "./generated/json-imports/Themes-original.js"; +import "./generated/json-imports/Themes-raw.js"; import "./OriginalCSSVars.js"; \ No newline at end of file diff --git a/packages/theming/src/OriginalCSSVars.ts b/packages/theming/src/OriginalCSSVars.ts index 04b6359d0ad3..18d00e2b1372 100644 --- a/packages/theming/src/OriginalCSSVars.ts +++ b/packages/theming/src/OriginalCSSVars.ts @@ -1,8 +1,9 @@ import { getRegisteredPackages, getThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js"; +import { getDefaultCSSVariablesLoading } from "@ui5/webcomponents-base/dist/config/Theme.js"; import { createOrUpdateStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js"; import { attachThemeLoaded } from "@ui5/webcomponents-base/dist/Theming.js"; -const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming-original"; +const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming-raw"; const isThemeBaseRegistered = () => { const registeredPackages = getRegisteredPackages(); @@ -10,13 +11,17 @@ const isThemeBaseRegistered = () => { }; const loadThemeBase = async (theme: string) => { + if (getDefaultCSSVariablesLoading() !== true) { + return; + } + if (!isThemeBaseRegistered()) { return; } const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme); if (cssData) { - createOrUpdateStyle(cssData, "data-ui5-theme-properties-original", BASE_THEME_PACKAGE, theme); + createOrUpdateStyle(cssData, "data-ui5-theme-properties-raw", BASE_THEME_PACKAGE, theme); } }; diff --git a/packages/tools/lib/css-processors/css-processor-themes.mjs b/packages/tools/lib/css-processors/css-processor-themes.mjs index 50c5ad7618b4..28693abe0e20 100644 --- a/packages/tools/lib/css-processors/css-processor-themes.mjs +++ b/packages/tools/lib/css-processors/css-processor-themes.mjs @@ -70,7 +70,7 @@ async function generate(argv) { const scopedText = await processThemingPackageFile(f); const originalText = await processThemingPackageFile(f, false); - const originalPath = f.path.replace(/parameters-bundle.css$/, "parameters-bundle-original.css"); + const originalPath = f.path.replace(/parameters-bundle.css$/, "parameters-bundle-raw.css"); await mkdir(path.dirname(f.path), { recursive: true }); writeFile(f.path, scopedText); From 7429e2d2bc8a9d9a53e04bbeee4aa337660da067 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 24 Nov 2025 17:02:29 +0200 Subject: [PATCH 3/4] chore: rename and restructure --- packages/base/src/InitialConfiguration.ts | 10 +++---- packages/base/src/asset-registries/Themes.ts | 5 ---- packages/base/src/config/Theme.ts | 20 ++++++------- packages/base/src/theming/applyTheme.ts | 5 ++++ packages/main/src/bundle.common.bootstrap.ts | 10 +++---- packages/main/test/pages/theming/Themes7.html | 2 +- packages/main/test/pages/theming/Themes8.html | 2 +- packages/theming/src/Assets-fetch.ts | 1 + packages/theming/src/Assets-node.ts | 3 +- packages/theming/src/Assets-raw-fetch.ts | 4 --- packages/theming/src/Assets-raw-node.ts | 15 ---------- packages/theming/src/Assets-raw.ts | 4 --- packages/theming/src/Assets.ts | 1 + packages/theming/src/OriginalCSSVars.ts | 30 ------------------- 14 files changed, 30 insertions(+), 82 deletions(-) delete mode 100644 packages/theming/src/Assets-raw-fetch.ts delete mode 100644 packages/theming/src/Assets-raw-node.ts delete mode 100644 packages/theming/src/Assets-raw.ts delete mode 100644 packages/theming/src/OriginalCSSVars.ts diff --git a/packages/base/src/InitialConfiguration.ts b/packages/base/src/InitialConfiguration.ts index b97a52b2cb26..d1f223dc2ddf 100644 --- a/packages/base/src/InitialConfiguration.ts +++ b/packages/base/src/InitialConfiguration.ts @@ -24,7 +24,7 @@ type InitialConfig = { formatSettings: FormatSettings, fetchDefaultLanguage: boolean, defaultFontLoading: boolean, - defaultCSSVariablesLoading: boolean, + loadBaseThemingCSSVariables: boolean, enableDefaultTooltips: boolean, }; @@ -41,7 +41,7 @@ let initialConfig: InitialConfig = { formatSettings: {}, fetchDefaultLanguage: false, defaultFontLoading: true, - defaultCSSVariablesLoading: true, + loadBaseThemingCSSVariables: true, enableDefaultTooltips: true, }; @@ -96,9 +96,9 @@ const getDefaultFontLoading = () => { return initialConfig.defaultFontLoading; }; -const getDefaultCSSVariablesLoading = () => { +const getLoadBaseThemingCSSVariables = () => { initConfiguration(); - return initialConfig.defaultCSSVariablesLoading; + return initialConfig.loadBaseThemingCSSVariables; }; const getEnableDefaultTooltips = () => { @@ -262,7 +262,7 @@ export { getTimezone, getFormatSettings, getDefaultFontLoading, - getDefaultCSSVariablesLoading, + getLoadBaseThemingCSSVariables, resetConfiguration, getEnableDefaultTooltips, }; diff --git a/packages/base/src/asset-registries/Themes.ts b/packages/base/src/asset-registries/Themes.ts index 5eb425944827..152778a6e1df 100644 --- a/packages/base/src/asset-registries/Themes.ts +++ b/packages/base/src/asset-registries/Themes.ts @@ -1,4 +1,3 @@ -import { getDefaultCSSVariablesLoading } from "../config/Theme.js"; import { DEFAULT_THEME } from "../generated/AssetParameters.js"; import { mergeStyles } from "../ManagedStyles.js"; import { fireThemeRegistered } from "../theming/ThemeRegistered.js"; @@ -24,10 +23,6 @@ const registerCustomThemePropertiesLoader = (packageName: string, themeName: str }; const getThemeProperties = async (packageName: string, themeName: string, externalThemeName?: string) => { - if (getDefaultCSSVariablesLoading() !== true && packageName === "@ui5/webcomponents-theming-raw") { - return; - } - const cacheKey = `${packageName}_${themeName}_${externalThemeName || ""}`; const cachedStyleData = themeStyles.get(cacheKey); if (cachedStyleData !== undefined) { // it's valid for style to be an empty string diff --git a/packages/base/src/config/Theme.ts b/packages/base/src/config/Theme.ts index 64f069fd2670..d8e98abd1130 100644 --- a/packages/base/src/config/Theme.ts +++ b/packages/base/src/config/Theme.ts @@ -1,4 +1,4 @@ -import { getTheme as getConfiguredTheme, getDefaultCSSVariablesLoading as getConfiguredDefaultCSSVariablesLoading } from "../InitialConfiguration.js"; +import { getTheme as getConfiguredTheme, getLoadBaseThemingCSSVariables as getConfiguredLoadBaseThemingCSSVariables } from "../InitialConfiguration.js"; import { reRenderAllUI5Elements } from "../Render.js"; import applyTheme from "../theming/applyTheme.js"; import getThemeDesignerTheme from "../theming/getThemeDesignerTheme.js"; @@ -7,7 +7,7 @@ import { boot, isBooted } from "../Boot.js"; import { attachConfigurationReset } from "./ConfigurationReset.js"; let curTheme: string | undefined; -let defaultCSSVariablesLoading: boolean | undefined; +let loadBaseThemingCSSVariables: boolean | undefined; attachConfigurationReset(() => { curTheme = undefined; @@ -58,16 +58,16 @@ const getDefaultTheme = (): string => { return DEFAULT_THEME; }; -const getDefaultCSSVariablesLoading = () => { - if (defaultCSSVariablesLoading === undefined) { - defaultCSSVariablesLoading = getConfiguredDefaultCSSVariablesLoading(); +const getLoadBaseThemingCSSVariables = () => { + if (loadBaseThemingCSSVariables === undefined) { + loadBaseThemingCSSVariables = getConfiguredLoadBaseThemingCSSVariables(); } - return defaultCSSVariablesLoading; + return loadBaseThemingCSSVariables; }; -const setDefaultCSSVariablesLoading = (value: boolean) => { - defaultCSSVariablesLoading = value; +const setLoadBaseThemingCSSVariables = (value: boolean) => { + loadBaseThemingCSSVariables = value; }; /** @@ -111,6 +111,6 @@ export { isLegacyThemeFamily, isLegacyThemeFamilyAsync, getDefaultTheme, - getDefaultCSSVariablesLoading, - setDefaultCSSVariablesLoading, + getLoadBaseThemingCSSVariables, + setLoadBaseThemingCSSVariables, }; diff --git a/packages/base/src/theming/applyTheme.ts b/packages/base/src/theming/applyTheme.ts index dfc0e799c4c2..fc435e0ea439 100644 --- a/packages/base/src/theming/applyTheme.ts +++ b/packages/base/src/theming/applyTheme.ts @@ -5,6 +5,7 @@ import { fireThemeLoaded } from "./ThemeLoaded.js"; import { attachCustomThemeStylesToHead, getThemeRoot } from "../config/ThemeRoot.js"; import { DEFAULT_THEME } from "../generated/AssetParameters.js"; import { getCurrentRuntimeIndex } from "../Runtimes.js"; +import { getLoadBaseThemingCSSVariables } from "../config/Theme.js"; // eslint-disable-next-line export let _lib = "ui5"; @@ -33,6 +34,10 @@ const loadComponentPackages = async (theme: string, externalThemeName?: string) const registeredPackages = getRegisteredPackages(); const packagesStylesPromises = [...registeredPackages].map(async packageName => { + if (getLoadBaseThemingCSSVariables() !== true && packageName === `${BASE_THEME_PACKAGE}-raw`) { + return; + } + if (packageName === BASE_THEME_PACKAGE) { return; } diff --git a/packages/main/src/bundle.common.bootstrap.ts b/packages/main/src/bundle.common.bootstrap.ts index 41597972f8d1..fd2484976fd4 100644 --- a/packages/main/src/bundle.common.bootstrap.ts +++ b/packages/main/src/bundle.common.bootstrap.ts @@ -4,8 +4,6 @@ import { setRuntimeAlias } from "@ui5/webcomponents-base/dist/Runtimes.js"; // OpenUI5 integration import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js"; -import "@ui5/webcomponents-theming/dist/Assets-raw.js"; - // Assets import "./Assets.js"; @@ -66,8 +64,8 @@ import { getTheme, setTheme, isLegacyThemeFamily, - getDefaultCSSVariablesLoading, - setDefaultCSSVariablesLoading, + getLoadBaseThemingCSSVariables, + setLoadBaseThemingCSSVariables, } from "@ui5/webcomponents-base/dist/config/Theme.js"; import { getThemeRoot, setThemeRoot } from "@ui5/webcomponents-base/dist/config/ThemeRoot.js"; import { getTimezone, setTimezone } from "@ui5/webcomponents-base/dist/config/Timezone.js"; @@ -112,8 +110,8 @@ const testAssets = { getFirstDayOfWeek, getTimezone, setTimezone, - getDefaultCSSVariablesLoading, - setDefaultCSSVariablesLoading, + getLoadBaseThemingCSSVariables, + setLoadBaseThemingCSSVariables, }, invisibleMessage: { announce, diff --git a/packages/main/test/pages/theming/Themes7.html b/packages/main/test/pages/theming/Themes7.html index 2f24eb2166eb..d6932380a927 100644 --- a/packages/main/test/pages/theming/Themes7.html +++ b/packages/main/test/pages/theming/Themes7.html @@ -8,7 +8,7 @@ diff --git a/packages/main/test/pages/theming/Themes8.html b/packages/main/test/pages/theming/Themes8.html index 3fa4734990b0..b724131f8cb4 100644 --- a/packages/main/test/pages/theming/Themes8.html +++ b/packages/main/test/pages/theming/Themes8.html @@ -8,7 +8,7 @@ diff --git a/packages/theming/src/Assets-fetch.ts b/packages/theming/src/Assets-fetch.ts index ac3ffb58ab23..337bba7e811c 100644 --- a/packages/theming/src/Assets-fetch.ts +++ b/packages/theming/src/Assets-fetch.ts @@ -1,2 +1,3 @@ // The theming package provides theming assets only import "./generated/json-imports/Themes-fetch.js"; +import "./generated/json-imports/Themes-raw-fetch.js"; diff --git a/packages/theming/src/Assets-node.ts b/packages/theming/src/Assets-node.ts index ed2fcb45449c..7ec779239341 100644 --- a/packages/theming/src/Assets-node.ts +++ b/packages/theming/src/Assets-node.ts @@ -3,7 +3,7 @@ * * It serves as an alternative to the `Assets` and `Assets-fetch` modules and supports the * `with: { type: 'json' }` import attribute for loading JSON files. - * + * * This import attribute is required in some environments, such as Node.js with server-side rendering (SSR). * * Example usage: @@ -11,3 +11,4 @@ */ import "./generated/json-imports/Themes-node.js"; +import "./generated/json-imports/Themes-raw-node.js"; diff --git a/packages/theming/src/Assets-raw-fetch.ts b/packages/theming/src/Assets-raw-fetch.ts deleted file mode 100644 index 7cec6a0608f7..000000000000 --- a/packages/theming/src/Assets-raw-fetch.ts +++ /dev/null @@ -1,4 +0,0 @@ -// The theming package provides theming assets only -import "./generated/json-imports/Themes-raw-fetch.js"; - -import "./OriginalCSSVars.js"; \ No newline at end of file diff --git a/packages/theming/src/Assets-raw-node.ts b/packages/theming/src/Assets-raw-node.ts deleted file mode 100644 index 30d387ed2c8f..000000000000 --- a/packages/theming/src/Assets-raw-node.ts +++ /dev/null @@ -1,15 +0,0 @@ -/** - * The `Assets-node` entry point is used to import theming assets. - * - * It serves as an alternative to the `Assets` and `Assets-fetch` modules and supports the - * `with: { type: 'json' }` import attribute for loading JSON files. - * - * This import attribute is required in some environments, such as Node.js with server-side rendering (SSR). - * - * Example usage: - * await import("../assets/themes/sap_horizon/parameters-bundle.css.json", { with: { type: 'json' } }) - */ - -import "./generated/json-imports/Themes-raw-node.js"; - -import "./OriginalCSSVars.js"; \ No newline at end of file diff --git a/packages/theming/src/Assets-raw.ts b/packages/theming/src/Assets-raw.ts deleted file mode 100644 index a942fdc2a655..000000000000 --- a/packages/theming/src/Assets-raw.ts +++ /dev/null @@ -1,4 +0,0 @@ -// The theming package provides theming assets only -import "./generated/json-imports/Themes-raw.js"; - -import "./OriginalCSSVars.js"; \ No newline at end of file diff --git a/packages/theming/src/Assets.ts b/packages/theming/src/Assets.ts index a8e06e58281f..87107237a47b 100644 --- a/packages/theming/src/Assets.ts +++ b/packages/theming/src/Assets.ts @@ -1,2 +1,3 @@ // The theming package provides theming assets only import "./generated/json-imports/Themes.js"; +import "./generated/json-imports/Themes-raw.js"; diff --git a/packages/theming/src/OriginalCSSVars.ts b/packages/theming/src/OriginalCSSVars.ts deleted file mode 100644 index 18d00e2b1372..000000000000 --- a/packages/theming/src/OriginalCSSVars.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { getRegisteredPackages, getThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js"; -import { getDefaultCSSVariablesLoading } from "@ui5/webcomponents-base/dist/config/Theme.js"; -import { createOrUpdateStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js"; -import { attachThemeLoaded } from "@ui5/webcomponents-base/dist/Theming.js"; - -const BASE_THEME_PACKAGE = "@ui5/webcomponents-theming-raw"; - -const isThemeBaseRegistered = () => { - const registeredPackages = getRegisteredPackages(); - return registeredPackages.has(BASE_THEME_PACKAGE); -}; - -const loadThemeBase = async (theme: string) => { - if (getDefaultCSSVariablesLoading() !== true) { - return; - } - - if (!isThemeBaseRegistered()) { - return; - } - - const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme); - if (cssData) { - createOrUpdateStyle(cssData, "data-ui5-theme-properties-raw", BASE_THEME_PACKAGE, theme); - } -}; - -attachThemeLoaded(theme => { - loadThemeBase(theme); -}); From a06336e9b3a260a4be09ca92e92df5d2d15086f5 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Mon, 24 Nov 2025 17:33:41 +0200 Subject: [PATCH 4/4] chore: add docs --- docs/2-advanced/01-configuration.md | 18 +++++ packages/base/src/config/Theme.ts | 18 +++++ .../css-processors/css-processor-themes.mjs | 65 ++++++++----------- 3 files changed, 62 insertions(+), 39 deletions(-) diff --git a/docs/2-advanced/01-configuration.md b/docs/2-advanced/01-configuration.md index dd2bd817181a..9d754679a3a3 100644 --- a/docs/2-advanced/01-configuration.md +++ b/docs/2-advanced/01-configuration.md @@ -15,6 +15,7 @@ There are several configuration settings that affect all UI5 Web Components glob | [secondaryCalendarType](#calendarType) | `Gregorian`, `Islamic`, `Buddhist`, `Japanese`, `Persian` | `undefined` | Default secondary calendar type to be used for date-related components | Date/time components (`ui5-date-picker`, etc.) | | [noConflict](#noConflict) | `true`, `false` | `false` | When set to true, all events will be fired with a `ui5-` prefix only | Components that fire events (most do) | | [formatSettings](#formatSettings) | See the [Format settings](#formatSettings) section below | `{}` | Allows to override locale-specific configuration | Date/time components (`ui5-date-picker`, etc.) | +| [loadBaseThemingCSSVariables](#loadBaseThemingCSSVariables) | `true`, `false` | `true` | Whether to load CSS variables from `@sap-theming/theming-base-content` package | Framework | | [fetchDefaultLanguage](#fetchDefaultLanguage) | `true`, `false` | `false` | Whether to fetch assets even for the default language | Framework | | [defaultFontLoading](#defaultFontLoading) | `true`, `false` | `true` | Whether to fetch default font faces | Framework | | [enableDefaultTooltips](#enableDefaultTooltips) | `true`, `false` | `true` | Whether to display default tooltips | Components (Icon, Button, RatingIndicator, etc.) | @@ -219,6 +220,23 @@ Example: } ``` + +### loadBaseThemingCSSVariables + + +This configuration option controls whether the framework should load the CSS variables from `@sap-theming/theming-base-content` package. + +Typically, you would not need to modify this setting. However, if your application provides its **own** instance or version of `@sap-theming/theming-base-content` and you prefer the framework **not** to load the built-in base theming CSS variables, you can set `loadBaseThemingCSSVariables` to `false`. + +Example: +```html + +``` + ### defaultFontLoading diff --git a/packages/base/src/config/Theme.ts b/packages/base/src/config/Theme.ts index d8e98abd1130..4e14d3e32783 100644 --- a/packages/base/src/config/Theme.ts +++ b/packages/base/src/config/Theme.ts @@ -58,6 +58,13 @@ const getDefaultTheme = (): string => { return DEFAULT_THEME; }; +/** + * Returns the current configuration for loading base theming CSS variables. + * + * @public + * @since 2.17.0 + * @returns {boolean} + */ const getLoadBaseThemingCSSVariables = () => { if (loadBaseThemingCSSVariables === undefined) { loadBaseThemingCSSVariables = getConfiguredLoadBaseThemingCSSVariables(); @@ -66,6 +73,17 @@ const getLoadBaseThemingCSSVariables = () => { return loadBaseThemingCSSVariables; }; +/** + * Configures whether to load base theming CSS variables. + * + * - When set to `true` (default), base theming CSS variables are loaded. + * - When set to `false`, base theming CSS variables are not loaded. + * + * **Note:** This method should be called before the boot process. + * + * @public + * @since 2.17.0 + */ const setLoadBaseThemingCSSVariables = (value: boolean) => { loadBaseThemingCSSVariables = value; }; diff --git a/packages/tools/lib/css-processors/css-processor-themes.mjs b/packages/tools/lib/css-processors/css-processor-themes.mjs index 28693abe0e20..3369f86bf946 100644 --- a/packages/tools/lib/css-processors/css-processor-themes.mjs +++ b/packages/tools/lib/css-processors/css-processor-themes.mjs @@ -47,6 +47,24 @@ async function processComponentPackageFile(f, packageJSON) { return result; } +async function writeProcessedContent(basePath, content, packageJSON, extension) { + const cssPath = basePath; + const jsonPath = basePath.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json"); + const jsPath = basePath.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension); + + // Write CSS file + await mkdir(path.dirname(cssPath), { recursive: true }); + await writeFile(cssPath, content); + + // Write JSON file + await mkdir(path.dirname(jsonPath), { recursive: true }); + await writeFileIfChanged(jsonPath, JSON.stringify(content)); + + // Write JS/TS file + const jsContent = getFileContent(packageJSON.name, `\`${content}\``); + await mkdir(path.dirname(jsPath), { recursive: true }); + await writeFileIfChanged(jsPath, jsContent); +} async function generate(argv) { const tsMode = process.env.UI5_TS === "true"; @@ -59,7 +77,7 @@ async function generate(argv) { ]); const restArgs = argv.slice(2); - let scopingPlugin = { + const scopingPlugin = { name: 'scoping', setup(build) { build.initialOptions.write = false; @@ -70,46 +88,15 @@ async function generate(argv) { const scopedText = await processThemingPackageFile(f); const originalText = await processThemingPackageFile(f, false); - const originalPath = f.path.replace(/parameters-bundle.css$/, "parameters-bundle-raw.css"); - - await mkdir(path.dirname(f.path), { recursive: true }); - writeFile(f.path, scopedText); - - await mkdir(path.dirname(originalPath), { recursive: true }); - writeFile(originalPath, originalText); - - // JSON - const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json"); - writeFileIfChanged(jsonPath, JSON.stringify(scopedText)); - - const originalJsonPath = originalPath.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json"); - await mkdir(path.dirname(originalJsonPath), { recursive: true }); - writeFileIfChanged(originalJsonPath, JSON.stringify(originalText)); + // Write scoped version + await writeProcessedContent(f.path, scopedText, packageJSON, extension); - // JS/TS - const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension); - const jsContent = getFileContent(packageJSON.name, "\`" + scopedText + "\`"); - writeFileIfChanged(jsPath, jsContent); - - // JS/TS - const originalJsPath = originalPath.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension); - const originalJsContent = getFileContent(packageJSON.name, "\`" + originalText + "\`"); - writeFileIfChanged(originalJsPath, originalJsContent); + // Write raw version + const originalPath = f.path.replace(/parameters-bundle.css$/, "parameters-bundle-raw.css"); + await writeProcessedContent(originalPath, originalText, packageJSON, extension); } else { - const newText = await processComponentPackageFile(f, packageJSON); - - await mkdir(path.dirname(f.path), { recursive: true }); - writeFile(f.path, newText); - - // JSON - const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json"); - await mkdir(path.dirname(jsonPath), { recursive: true }); - writeFileIfChanged(jsonPath, JSON.stringify(newText)); - - // JS/TS - const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension); - const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`"); - writeFileIfChanged(jsPath, jsContent); + const processedText = await processComponentPackageFile(f, packageJSON); + await writeProcessedContent(f.path, processedText, packageJSON, extension); } }); })