Skip to content

Commit a97901d

Browse files
nnaydenownnaydenow
authored
fix(tools): correct strip unused theming base content (#12133)
Previously, the regex approach did not correctly handle CSS variables related to fonts, causing it to match everything following the `--sapFont` variables. This resulted in some CSS variables being missed. Now, PostCSS is used to remove unused theming base content. This is achieved by leveraging the PostCSS AST to traverse all rules within `parameters-bundle.css` files and process their declarations.
1 parent 5fe95ab commit a97901d

File tree

4 files changed

+58
-45
lines changed

4 files changed

+58
-45
lines changed

‎packages/theming/css-vars-usage.json‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"--sapAvatar_10_BorderColor",
5151
"--sapAvatar_10_Hover_Background",
5252
"--sapAvatar_10_TextColor",
53-
"--sapAvatar_Lite_Background",
53+
"--sapAvatar_Hover_BorderColor",
5454
"--sapAvatar_Lite_BorderColor",
5555
"--sapBackgroundColor",
5656
"--sapBaseColor",
@@ -103,10 +103,12 @@
103103
"--sapButton_Emphasized_Active_TextColor",
104104
"--sapButton_Emphasized_Background",
105105
"--sapButton_Emphasized_BorderColor",
106+
"--sapButton_Emphasized_FontFamily",
106107
"--sapButton_Emphasized_Hover_Background",
107108
"--sapButton_Emphasized_Hover_BorderColor",
108109
"--sapButton_Emphasized_Hover_TextColor",
109110
"--sapButton_Emphasized_TextColor",
111+
"--sapButton_FontFamily",
110112
"--sapButton_Handle_Background",
111113
"--sapButton_Handle_BorderColor",
112114
"--sapButton_Handle_Hover_Background",
@@ -220,7 +222,6 @@
220222
"--sapContent_ContrastTextShadow",
221223
"--sapContent_Critical_Shadow",
222224
"--sapContent_DisabledOpacity",
223-
"--sapContent_DisabledTextColor",
224225
"--sapContent_DragAndDropActiveColor",
225226
"--sapContent_FocusColor",
226227
"--sapContent_FocusStyle",
@@ -259,15 +260,16 @@
259260
"--sapContent_Shadow1",
260261
"--sapContent_Shadow2",
261262
"--sapContent_Shadow3",
262-
"--sapContent_ShadowColor",
263263
"--sapContent_TextShadow",
264264
"--sapContent_UnratedColor",
265+
"--sapContentLabelColor",
265266
"--sapCriticalColor",
266267
"--sapCriticalElementColor",
267268
"--sapCriticalTextColor",
268269
"--sapElement_BorderCornerRadius",
269270
"--sapElement_BorderWidth",
270271
"--sapElement_Compact_Height",
272+
"--sapElement_Condensed_Height",
271273
"--sapElement_Height",
272274
"--sapElement_LineHeight",
273275
"--sapErrorBackground",
@@ -334,7 +336,6 @@
334336
"--sapFontLargeSize",
335337
"--sapFontMediumSize",
336338
"--sapFontSemiboldDuplexFamily",
337-
"--sapFontSemiboldFamily",
338339
"--sapFontSize",
339340
"--sapFontSmallSize",
340341
"--sapGroup_BorderCornerRadius",
@@ -366,8 +367,10 @@
366367
"--sapIndicationColor_1_Hover_Background",
367368
"--sapIndicationColor_1_TextColor",
368369
"--sapIndicationColor_1b",
370+
"--sapIndicationColor_1b_Background",
369371
"--sapIndicationColor_1b_BorderColor",
370372
"--sapIndicationColor_1b_Hover_Background",
373+
"--sapIndicationColor_1b_TextColor",
371374
"--sapIndicationColor_2",
372375
"--sapIndicationColor_2_Active_Background",
373376
"--sapIndicationColor_2_Active_BorderColor",
@@ -377,8 +380,10 @@
377380
"--sapIndicationColor_2_Hover_Background",
378381
"--sapIndicationColor_2_TextColor",
379382
"--sapIndicationColor_2b",
383+
"--sapIndicationColor_2b_Background",
380384
"--sapIndicationColor_2b_BorderColor",
381385
"--sapIndicationColor_2b_Hover_Background",
386+
"--sapIndicationColor_2b_TextColor",
382387
"--sapIndicationColor_3",
383388
"--sapIndicationColor_3_Active_Background",
384389
"--sapIndicationColor_3_Active_BorderColor",
@@ -388,8 +393,10 @@
388393
"--sapIndicationColor_3_Hover_Background",
389394
"--sapIndicationColor_3_TextColor",
390395
"--sapIndicationColor_3b",
396+
"--sapIndicationColor_3b_Background",
391397
"--sapIndicationColor_3b_BorderColor",
392398
"--sapIndicationColor_3b_Hover_Background",
399+
"--sapIndicationColor_3b_TextColor",
393400
"--sapIndicationColor_4",
394401
"--sapIndicationColor_4_Active_Background",
395402
"--sapIndicationColor_4_Active_BorderColor",
@@ -399,8 +406,10 @@
399406
"--sapIndicationColor_4_Hover_Background",
400407
"--sapIndicationColor_4_TextColor",
401408
"--sapIndicationColor_4b",
409+
"--sapIndicationColor_4b_Background",
402410
"--sapIndicationColor_4b_BorderColor",
403411
"--sapIndicationColor_4b_Hover_Background",
412+
"--sapIndicationColor_4b_TextColor",
404413
"--sapIndicationColor_5",
405414
"--sapIndicationColor_5_Active_Background",
406415
"--sapIndicationColor_5_Active_BorderColor",
@@ -410,8 +419,10 @@
410419
"--sapIndicationColor_5_Hover_Background",
411420
"--sapIndicationColor_5_TextColor",
412421
"--sapIndicationColor_5b",
422+
"--sapIndicationColor_5b_Background",
413423
"--sapIndicationColor_5b_BorderColor",
414424
"--sapIndicationColor_5b_Hover_Background",
425+
"--sapIndicationColor_5b_TextColor",
415426
"--sapIndicationColor_6",
416427
"--sapIndicationColor_6_Active_Background",
417428
"--sapIndicationColor_6_Active_BorderColor",
@@ -421,8 +432,10 @@
421432
"--sapIndicationColor_6_Hover_Background",
422433
"--sapIndicationColor_6_TextColor",
423434
"--sapIndicationColor_6b",
435+
"--sapIndicationColor_6b_Background",
424436
"--sapIndicationColor_6b_BorderColor",
425437
"--sapIndicationColor_6b_Hover_Background",
438+
"--sapIndicationColor_6b_TextColor",
426439
"--sapIndicationColor_7",
427440
"--sapIndicationColor_7_Active_Background",
428441
"--sapIndicationColor_7_Active_BorderColor",
@@ -432,8 +445,10 @@
432445
"--sapIndicationColor_7_Hover_Background",
433446
"--sapIndicationColor_7_TextColor",
434447
"--sapIndicationColor_7b",
448+
"--sapIndicationColor_7b_Background",
435449
"--sapIndicationColor_7b_BorderColor",
436450
"--sapIndicationColor_7b_Hover_Background",
451+
"--sapIndicationColor_7b_TextColor",
437452
"--sapIndicationColor_8",
438453
"--sapIndicationColor_8_Active_Background",
439454
"--sapIndicationColor_8_Active_BorderColor",
@@ -443,8 +458,10 @@
443458
"--sapIndicationColor_8_Hover_Background",
444459
"--sapIndicationColor_8_TextColor",
445460
"--sapIndicationColor_8b",
461+
"--sapIndicationColor_8b_Background",
446462
"--sapIndicationColor_8b_BorderColor",
447463
"--sapIndicationColor_8b_Hover_Background",
464+
"--sapIndicationColor_8b_TextColor",
448465
"--sapIndicationColor_9",
449466
"--sapIndicationColor_9_Active_Background",
450467
"--sapIndicationColor_9_Active_BorderColor",
@@ -454,8 +471,10 @@
454471
"--sapIndicationColor_9_Hover_Background",
455472
"--sapIndicationColor_9_TextColor",
456473
"--sapIndicationColor_9b",
474+
"--sapIndicationColor_9b_Background",
457475
"--sapIndicationColor_9b_BorderColor",
458476
"--sapIndicationColor_9b_Hover_Background",
477+
"--sapIndicationColor_9b_TextColor",
459478
"--sapIndicationColor_10",
460479
"--sapIndicationColor_10_Active_Background",
461480
"--sapIndicationColor_10_Active_BorderColor",
@@ -465,8 +484,10 @@
465484
"--sapIndicationColor_10_Hover_Background",
466485
"--sapIndicationColor_10_TextColor",
467486
"--sapIndicationColor_10b",
487+
"--sapIndicationColor_10b_Background",
468488
"--sapIndicationColor_10b_BorderColor",
469489
"--sapIndicationColor_10b_Hover_Background",
490+
"--sapIndicationColor_10b_TextColor",
470491
"--sapInformationBackground",
471492
"--sapInformationBorderColor",
472493
"--sapInformativeElementColor",
@@ -518,6 +539,8 @@
518539
"--sapList_Hover_SelectionBackground",
519540
"--sapList_SelectionBackgroundColor",
520541
"--sapList_SelectionBorderColor",
542+
"--sapList_TableGroupHeaderBackground",
543+
"--sapList_TableGroupHeaderBorderColor",
521544
"--sapList_TableGroupHeaderTextColor",
522545
"--sapList_TextColor",
523546
"--sapMessage_BorderWidth",
@@ -531,7 +554,6 @@
531554
"--sapNegativeTextColor",
532555
"--sapNeutralBackground",
533556
"--sapNeutralBorderColor",
534-
"--sapNeutralColor",
535557
"--sapNeutralElementColor",
536558
"--sapNeutralTextColor",
537559
"--sapObjectHeader_Background",
@@ -568,10 +590,6 @@
568590
"--sapProgress_Value_NegativeTextColor",
569591
"--sapProgress_Value_PositiveBackground",
570592
"--sapProgress_Value_PositiveTextColor",
571-
"--sapScrollBar_Dimension",
572-
"--sapScrollBar_FaceColor",
573-
"--sapScrollBar_Hover_FaceColor",
574-
"--sapScrollBar_TrackColor",
575593
"--sapSelectedColor",
576594
"--sapShell_Active_Background",
577595
"--sapShell_Active_TextColor",
@@ -581,7 +599,6 @@
581599
"--sapShell_InteractiveBackground",
582600
"--sapShell_InteractiveBorderColor",
583601
"--sapShell_InteractiveTextColor",
584-
"--sapShell_Shadow",
585602
"--sapShell_SubBrand_TextColor",
586603
"--sapShell_TextColor",
587604
"--sapShellColor",

‎packages/theming/lib/generate-css-vars-usage-report/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@ const generate = async () => {
2222

2323
const mainFiles = await globby(path.join(__dirname, "../../../main/src/themes/**/*.css").replace(/\\/g, "/"));
2424
const fioriFiles = await globby(path.join(__dirname, "../../../fiori/src/themes/**/*.css").replace(/\\/g, "/"));
25+
const compatFiles = await globby(path.join(__dirname, "../../../compat/src/themes/**/*.css").replace(/\\/g, "/"));
26+
const aiFiles = await globby(path.join(__dirname, "../../../ai/src/themes/**/*.css").replace(/\\/g, "/"));
2527

26-
await Promise.all([...mainFiles.map(processFile), ...fioriFiles.map(processFile)]);
28+
await Promise.all([...mainFiles.map(processFile), ...fioriFiles.map(processFile), ...compatFiles.map(processFile), ...aiFiles.map(processFile)]);
2729

28-
const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
30+
const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
2931
const result = Array.from(vars).sort(collator.compare); // natural sort
3032

3133
return fs.writeFile(path.join(__dirname, "../../css-vars-usage.json"), beautify(result, null, 2, 100));

‎packages/tools/lib/css-processors/css-processor-themes.mjs‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,40 @@ import * as path from "path";
55
import { writeFile, mkdir } from "fs/promises";
66
import postcss from "postcss";
77
import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
8-
import { writeFileIfChanged, stripThemingBaseContent, getFileContent } from "./shared.mjs";
8+
import { writeFileIfChanged, getFileContent } from "./shared.mjs";
99
import scopeVariables from "./scope-variables.mjs";
1010

1111
const tsMode = process.env.UI5_TS === "true";
1212
const extension = tsMode ? ".css.ts" : ".css.js";
1313

1414
const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
1515

16-
let inputFiles = await globby("src/**/parameters-bundle.css");
16+
const inputFiles = await globby([
17+
"src/**/parameters-bundle.css",
18+
]);
1719
const restArgs = process.argv.slice(2);
1820

19-
const removeDuplicateSelectors = async (text) => {
20-
const result = await postcss(combineDuplicatedSelectors).process(text);
21-
return result.css;
22-
}
21+
const processThemingPackageFile = async (f) => {
22+
const selector = ':root';
23+
const result = await postcss().process(f.text);
24+
25+
const newRule = postcss.rule({ selector });
2326

24-
const processFontFace = (text) => {
25-
const declarationExpr = /@font-face\s*{[^}]*}/g;
27+
result.root.walkRules(selector, rule => {
28+
rule.walkDecls(decl => {
29+
if (!decl.prop.startsWith('--sapFontUrl')) {
30+
newRule.append(decl.clone());
31+
}
32+
});
33+
});
34+
35+
return newRule.toString();
36+
};
2637

27-
// remove declarations from source, they are extracted in base package
28-
return text.replaceAll(declarationExpr, '');
38+
const processComponentPackageFile = async (f) => {
39+
const result = await postcss(combineDuplicatedSelectors).process(f.text);
40+
41+
return scopeVariables(result.css, packageJSON, f.path);
2942
}
3043

3144
let scopingPlugin = {
@@ -35,23 +48,14 @@ let scopingPlugin = {
3548

3649
build.onEnd(result => {
3750
result.outputFiles.forEach(async f => {
38-
// remove font-face declarations
39-
let newText = processFontFace(f.text);
40-
41-
// remove duplicate selectors
42-
newText = await removeDuplicateSelectors(newText);
43-
44-
// strip unnecessary theming-base-content
45-
newText = stripThemingBaseContent(newText);
51+
let newText = f.path.includes("packages/theming") ? await processThemingPackageFile(f) : await processComponentPackageFile(f);
4652

47-
// scoping
48-
newText = scopeVariables(newText, packageJSON, f.path);
49-
await mkdir(path.dirname(f.path), {recursive: true});
53+
await mkdir(path.dirname(f.path), { recursive: true });
5054
writeFile(f.path, newText);
5155

5256
// JSON
5357
const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
54-
await mkdir(path.dirname(jsonPath), {recursive: true});
58+
await mkdir(path.dirname(jsonPath), { recursive: true });
5559
writeFileIfChanged(jsonPath, JSON.stringify(newText));
5660

5761
// JS/TS

‎packages/tools/lib/css-processors/shared.mjs‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,6 @@ const writeFileIfChanged = async (fileName, content) => {
2424
}
2525
}
2626

27-
// strips the unnecessary theming data coming from @sap-theming/theming-base-content and leaves only the css parameters
28-
const stripThemingBaseContent = css => {
29-
css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
30-
css = css.replace(/\.background-image.*{.*}/, "");
31-
css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
32-
css = css.replace(/--sapFontUrl.*\);?/, "");
33-
return css;
34-
}
35-
36-
3727
const DEFAULT_THEME = assets.themes.default;
3828

3929
const getDefaultThemeCode = packageName => {
@@ -53,4 +43,4 @@ const getFileContent = (packageName, css, includeDefaultTheme) => {
5343
}
5444

5545

56-
export { writeFileIfChanged, stripThemingBaseContent, getFileContent}
46+
export { writeFileIfChanged, getFileContent}

0 commit comments

Comments
 (0)