From 39c53689687726af8503018428e696e3ca255062 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Thu, 14 Aug 2025 15:08:49 +0300 Subject: [PATCH 1/2] fix(tools): correct strip unused theming base content --- packages/theming/css-vars-usage.json | 37 +++++++++++----- .../generate-css-vars-usage-report/index.js | 6 ++- .../css-processors/css-processor-themes.mjs | 42 ++++++++++++------- packages/tools/lib/css-processors/shared.mjs | 12 +----- 4 files changed, 60 insertions(+), 37 deletions(-) diff --git a/packages/theming/css-vars-usage.json b/packages/theming/css-vars-usage.json index b543270c5716..d61675665836 100644 --- a/packages/theming/css-vars-usage.json +++ b/packages/theming/css-vars-usage.json @@ -50,7 +50,7 @@ "--sapAvatar_10_BorderColor", "--sapAvatar_10_Hover_Background", "--sapAvatar_10_TextColor", - "--sapAvatar_Lite_Background", + "--sapAvatar_Hover_BorderColor", "--sapAvatar_Lite_BorderColor", "--sapBackgroundColor", "--sapBaseColor", @@ -103,10 +103,12 @@ "--sapButton_Emphasized_Active_TextColor", "--sapButton_Emphasized_Background", "--sapButton_Emphasized_BorderColor", + "--sapButton_Emphasized_FontFamily", "--sapButton_Emphasized_Hover_Background", "--sapButton_Emphasized_Hover_BorderColor", "--sapButton_Emphasized_Hover_TextColor", "--sapButton_Emphasized_TextColor", + "--sapButton_FontFamily", "--sapButton_Handle_Background", "--sapButton_Handle_BorderColor", "--sapButton_Handle_Hover_Background", @@ -220,7 +222,6 @@ "--sapContent_ContrastTextShadow", "--sapContent_Critical_Shadow", "--sapContent_DisabledOpacity", - "--sapContent_DisabledTextColor", "--sapContent_DragAndDropActiveColor", "--sapContent_FocusColor", "--sapContent_FocusStyle", @@ -259,15 +260,16 @@ "--sapContent_Shadow1", "--sapContent_Shadow2", "--sapContent_Shadow3", - "--sapContent_ShadowColor", "--sapContent_TextShadow", "--sapContent_UnratedColor", + "--sapContentLabelColor", "--sapCriticalColor", "--sapCriticalElementColor", "--sapCriticalTextColor", "--sapElement_BorderCornerRadius", "--sapElement_BorderWidth", "--sapElement_Compact_Height", + "--sapElement_Condensed_Height", "--sapElement_Height", "--sapElement_LineHeight", "--sapErrorBackground", @@ -334,7 +336,6 @@ "--sapFontLargeSize", "--sapFontMediumSize", "--sapFontSemiboldDuplexFamily", - "--sapFontSemiboldFamily", "--sapFontSize", "--sapFontSmallSize", "--sapGroup_BorderCornerRadius", @@ -366,8 +367,10 @@ "--sapIndicationColor_1_Hover_Background", "--sapIndicationColor_1_TextColor", "--sapIndicationColor_1b", + "--sapIndicationColor_1b_Background", "--sapIndicationColor_1b_BorderColor", "--sapIndicationColor_1b_Hover_Background", + "--sapIndicationColor_1b_TextColor", "--sapIndicationColor_2", "--sapIndicationColor_2_Active_Background", "--sapIndicationColor_2_Active_BorderColor", @@ -377,8 +380,10 @@ "--sapIndicationColor_2_Hover_Background", "--sapIndicationColor_2_TextColor", "--sapIndicationColor_2b", + "--sapIndicationColor_2b_Background", "--sapIndicationColor_2b_BorderColor", "--sapIndicationColor_2b_Hover_Background", + "--sapIndicationColor_2b_TextColor", "--sapIndicationColor_3", "--sapIndicationColor_3_Active_Background", "--sapIndicationColor_3_Active_BorderColor", @@ -388,8 +393,10 @@ "--sapIndicationColor_3_Hover_Background", "--sapIndicationColor_3_TextColor", "--sapIndicationColor_3b", + "--sapIndicationColor_3b_Background", "--sapIndicationColor_3b_BorderColor", "--sapIndicationColor_3b_Hover_Background", + "--sapIndicationColor_3b_TextColor", "--sapIndicationColor_4", "--sapIndicationColor_4_Active_Background", "--sapIndicationColor_4_Active_BorderColor", @@ -399,8 +406,10 @@ "--sapIndicationColor_4_Hover_Background", "--sapIndicationColor_4_TextColor", "--sapIndicationColor_4b", + "--sapIndicationColor_4b_Background", "--sapIndicationColor_4b_BorderColor", "--sapIndicationColor_4b_Hover_Background", + "--sapIndicationColor_4b_TextColor", "--sapIndicationColor_5", "--sapIndicationColor_5_Active_Background", "--sapIndicationColor_5_Active_BorderColor", @@ -410,8 +419,10 @@ "--sapIndicationColor_5_Hover_Background", "--sapIndicationColor_5_TextColor", "--sapIndicationColor_5b", + "--sapIndicationColor_5b_Background", "--sapIndicationColor_5b_BorderColor", "--sapIndicationColor_5b_Hover_Background", + "--sapIndicationColor_5b_TextColor", "--sapIndicationColor_6", "--sapIndicationColor_6_Active_Background", "--sapIndicationColor_6_Active_BorderColor", @@ -421,8 +432,10 @@ "--sapIndicationColor_6_Hover_Background", "--sapIndicationColor_6_TextColor", "--sapIndicationColor_6b", + "--sapIndicationColor_6b_Background", "--sapIndicationColor_6b_BorderColor", "--sapIndicationColor_6b_Hover_Background", + "--sapIndicationColor_6b_TextColor", "--sapIndicationColor_7", "--sapIndicationColor_7_Active_Background", "--sapIndicationColor_7_Active_BorderColor", @@ -432,8 +445,10 @@ "--sapIndicationColor_7_Hover_Background", "--sapIndicationColor_7_TextColor", "--sapIndicationColor_7b", + "--sapIndicationColor_7b_Background", "--sapIndicationColor_7b_BorderColor", "--sapIndicationColor_7b_Hover_Background", + "--sapIndicationColor_7b_TextColor", "--sapIndicationColor_8", "--sapIndicationColor_8_Active_Background", "--sapIndicationColor_8_Active_BorderColor", @@ -443,8 +458,10 @@ "--sapIndicationColor_8_Hover_Background", "--sapIndicationColor_8_TextColor", "--sapIndicationColor_8b", + "--sapIndicationColor_8b_Background", "--sapIndicationColor_8b_BorderColor", "--sapIndicationColor_8b_Hover_Background", + "--sapIndicationColor_8b_TextColor", "--sapIndicationColor_9", "--sapIndicationColor_9_Active_Background", "--sapIndicationColor_9_Active_BorderColor", @@ -454,8 +471,10 @@ "--sapIndicationColor_9_Hover_Background", "--sapIndicationColor_9_TextColor", "--sapIndicationColor_9b", + "--sapIndicationColor_9b_Background", "--sapIndicationColor_9b_BorderColor", "--sapIndicationColor_9b_Hover_Background", + "--sapIndicationColor_9b_TextColor", "--sapIndicationColor_10", "--sapIndicationColor_10_Active_Background", "--sapIndicationColor_10_Active_BorderColor", @@ -465,8 +484,10 @@ "--sapIndicationColor_10_Hover_Background", "--sapIndicationColor_10_TextColor", "--sapIndicationColor_10b", + "--sapIndicationColor_10b_Background", "--sapIndicationColor_10b_BorderColor", "--sapIndicationColor_10b_Hover_Background", + "--sapIndicationColor_10b_TextColor", "--sapInformationBackground", "--sapInformationBorderColor", "--sapInformativeElementColor", @@ -518,6 +539,8 @@ "--sapList_Hover_SelectionBackground", "--sapList_SelectionBackgroundColor", "--sapList_SelectionBorderColor", + "--sapList_TableGroupHeaderBackground", + "--sapList_TableGroupHeaderBorderColor", "--sapList_TableGroupHeaderTextColor", "--sapList_TextColor", "--sapMessage_BorderWidth", @@ -531,7 +554,6 @@ "--sapNegativeTextColor", "--sapNeutralBackground", "--sapNeutralBorderColor", - "--sapNeutralColor", "--sapNeutralElementColor", "--sapNeutralTextColor", "--sapObjectHeader_Background", @@ -568,10 +590,6 @@ "--sapProgress_Value_NegativeTextColor", "--sapProgress_Value_PositiveBackground", "--sapProgress_Value_PositiveTextColor", - "--sapScrollBar_Dimension", - "--sapScrollBar_FaceColor", - "--sapScrollBar_Hover_FaceColor", - "--sapScrollBar_TrackColor", "--sapSelectedColor", "--sapShell_Active_Background", "--sapShell_Active_TextColor", @@ -581,7 +599,6 @@ "--sapShell_InteractiveBackground", "--sapShell_InteractiveBorderColor", "--sapShell_InteractiveTextColor", - "--sapShell_Shadow", "--sapShell_SubBrand_TextColor", "--sapShell_TextColor", "--sapShellColor", diff --git a/packages/theming/lib/generate-css-vars-usage-report/index.js b/packages/theming/lib/generate-css-vars-usage-report/index.js index 8d51389f628b..81ee14b9ca43 100644 --- a/packages/theming/lib/generate-css-vars-usage-report/index.js +++ b/packages/theming/lib/generate-css-vars-usage-report/index.js @@ -22,10 +22,12 @@ const generate = async () => { const mainFiles = await globby(path.join(__dirname, "../../../main/src/themes/**/*.css").replace(/\\/g, "/")); const fioriFiles = await globby(path.join(__dirname, "../../../fiori/src/themes/**/*.css").replace(/\\/g, "/")); + const compatFiles = await globby(path.join(__dirname, "../../../compat/src/themes/**/*.css").replace(/\\/g, "/")); + const aiFiles = await globby(path.join(__dirname, "../../../ai/src/themes/**/*.css").replace(/\\/g, "/")); - await Promise.all([...mainFiles.map(processFile), ...fioriFiles.map(processFile)]); + await Promise.all([...mainFiles.map(processFile), ...fioriFiles.map(processFile), ...compatFiles.map(processFile), ...aiFiles.map(processFile)]); - const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'}); + const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }); const result = Array.from(vars).sort(collator.compare); // natural sort return fs.writeFile(path.join(__dirname, "../../css-vars-usage.json"), beautify(result, null, 2, 100)); diff --git a/packages/tools/lib/css-processors/css-processor-themes.mjs b/packages/tools/lib/css-processors/css-processor-themes.mjs index bb1efed9f369..3dcbe341e9e2 100644 --- a/packages/tools/lib/css-processors/css-processor-themes.mjs +++ b/packages/tools/lib/css-processors/css-processor-themes.mjs @@ -5,7 +5,7 @@ import * as path from "path"; import { writeFile, mkdir } from "fs/promises"; import postcss from "postcss"; import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js" -import { writeFileIfChanged, stripThemingBaseContent, getFileContent } from "./shared.mjs"; +import { writeFileIfChanged, getFileContent } from "./shared.mjs"; import scopeVariables from "./scope-variables.mjs"; const tsMode = process.env.UI5_TS === "true"; @@ -13,12 +13,32 @@ const extension = tsMode ? ".css.ts" : ".css.js"; const packageJSON = JSON.parse(fs.readFileSync("./package.json")) -let inputFiles = await globby("src/**/parameters-bundle.css"); +const inputFiles = await globby([ + "src/**/parameters-bundle.css", +]); const restArgs = process.argv.slice(2); -const removeDuplicateSelectors = async (text) => { - const result = await postcss(combineDuplicatedSelectors).process(text); - return result.css; +const processThemingPackageFile = async (f) => { + const selector = ':root'; + const result = await postcss(combineDuplicatedSelectors).process(f.text); + + const newRule = postcss.rule({ selector }); + + result.root.walkRules(selector, rule => { + rule.walkDecls(decl => { + if (!decl.prop.startsWith('--sapFontUrl')) { + newRule.append(decl.clone()); + } + }); + }); + + return newRule.toString(); +}; + +const processComponentPackageFile = async (f) => { + const result = await postcss(combineDuplicatedSelectors).process(f.text); + + return scopeVariables(result.css, packageJSON, f.path); } let scopingPlugin = { @@ -28,20 +48,14 @@ let scopingPlugin = { build.onEnd(result => { result.outputFiles.forEach(async f => { - // remove duplicate selectors - let newText = await removeDuplicateSelectors(f.text); - - // strip unnecessary theming-base-content - newText = stripThemingBaseContent(newText); + let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f); - // scoping - newText = scopeVariables(newText, packageJSON, f.path); - await mkdir(path.dirname(f.path), {recursive: true}); + 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}); + await mkdir(path.dirname(jsonPath), { recursive: true }); writeFileIfChanged(jsonPath, JSON.stringify(newText)); // JS/TS diff --git a/packages/tools/lib/css-processors/shared.mjs b/packages/tools/lib/css-processors/shared.mjs index 6e3d2071b593..7e23b68465cd 100644 --- a/packages/tools/lib/css-processors/shared.mjs +++ b/packages/tools/lib/css-processors/shared.mjs @@ -24,16 +24,6 @@ const writeFileIfChanged = async (fileName, content) => { } } -// strips the unnecessary theming data coming from @sap-theming/theming-base-content and leaves only the css parameters -const stripThemingBaseContent = css => { - css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root"); - css = css.replace(/\.background-image.*{.*}/, ""); - css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, ""); - css = css.replace(/--sapFontUrl.*\);?/, ""); - return css; -} - - const DEFAULT_THEME = assets.themes.default; const getDefaultThemeCode = packageName => { @@ -53,4 +43,4 @@ const getFileContent = (packageName, css, includeDefaultTheme) => { } -export { writeFileIfChanged, stripThemingBaseContent, getFileContent} \ No newline at end of file +export { writeFileIfChanged, getFileContent} \ No newline at end of file From ec80c9cf62f966e0831ad9751b08c59286cda983 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Wed, 20 Aug 2025 10:57:34 +0300 Subject: [PATCH 2/2] chore: remove duplicate selectors on theming base --- packages/tools/lib/css-processors/css-processor-themes.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tools/lib/css-processors/css-processor-themes.mjs b/packages/tools/lib/css-processors/css-processor-themes.mjs index 3dcbe341e9e2..927552c5ee65 100644 --- a/packages/tools/lib/css-processors/css-processor-themes.mjs +++ b/packages/tools/lib/css-processors/css-processor-themes.mjs @@ -20,7 +20,7 @@ const restArgs = process.argv.slice(2); const processThemingPackageFile = async (f) => { const selector = ':root'; - const result = await postcss(combineDuplicatedSelectors).process(f.text); + const result = await postcss().process(f.text); const newRule = postcss.rule({ selector });