Skip to content

fix(tools): correct strip unused theming base content #12133

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(tools): correct strip unused theming base content #12133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
37 changes: 27 additions & 10 deletions packages/theming/css-vars-usage.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -220,7 +222,6 @@
"--sapContent_ContrastTextShadow",
"--sapContent_Critical_Shadow",
"--sapContent_DisabledOpacity",
"--sapContent_DisabledTextColor",
"--sapContent_DragAndDropActiveColor",
"--sapContent_FocusColor",
"--sapContent_FocusStyle",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -334,7 +336,6 @@
"--sapFontLargeSize",
"--sapFontMediumSize",
"--sapFontSemiboldDuplexFamily",
"--sapFontSemiboldFamily",
"--sapFontSize",
"--sapFontSmallSize",
"--sapGroup_BorderCornerRadius",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -518,6 +539,8 @@
"--sapList_Hover_SelectionBackground",
"--sapList_SelectionBackgroundColor",
"--sapList_SelectionBorderColor",
"--sapList_TableGroupHeaderBackground",
"--sapList_TableGroupHeaderBorderColor",
"--sapList_TableGroupHeaderTextColor",
"--sapList_TextColor",
"--sapMessage_BorderWidth",
Expand All @@ -531,7 +554,6 @@
"--sapNegativeTextColor",
"--sapNeutralBackground",
"--sapNeutralBorderColor",
"--sapNeutralColor",
"--sapNeutralElementColor",
"--sapNeutralTextColor",
"--sapObjectHeader_Background",
Expand Down Expand Up @@ -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",
Expand All @@ -581,7 +599,6 @@
"--sapShell_InteractiveBackground",
"--sapShell_InteractiveBorderColor",
"--sapShell_InteractiveTextColor",
"--sapShell_Shadow",
"--sapShell_SubBrand_TextColor",
"--sapShell_TextColor",
"--sapShellColor",
Expand Down
6 changes: 4 additions & 2 deletions packages/theming/lib/generate-css-vars-usage-report/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down
42 changes: 28 additions & 14 deletions packages/tools/lib/css-processors/css-processor-themes.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,40 @@ 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";
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 = {
Expand All @@ -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
Expand Down
12 changes: 1 addition & 11 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 @@ -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 => {
Expand All @@ -53,4 +43,4 @@ const getFileContent = (packageName, css, includeDefaultTheme) => {
}


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