Skip to content

Commit

Permalink
feature(theme-base): Generate a report for used CSS vars upon build (#…
Browse files Browse the repository at this point in the history 
…1727)
  • Loading branch information
@vladitasev
vladitasev authored Jun 5, 2020
1 parent d78d136 commit 9b4b6c4
Show file tree
Hide file tree
Showing 4 changed files with 240 additions and 2 deletions.
207 changes: 207 additions & 0 deletions packages/theme-base/css-vars-usage.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
[
"--sapAccentColor1",
"--sapAccentColor2",
"--sapAccentColor3",
"--sapAccentColor4",
"--sapAccentColor5",
"--sapAccentColor6",
"--sapAccentColor7",
"--sapAccentColor8",
"--sapAccentColor9",
"--sapAccentColor10",
"--sapActiveColor_Lighten3",
"--sapBackgroundColor",
"--sapBlockLayer_Background",
"--sapButton_Accept_Active_Background",
"--sapButton_Accept_Active_BorderColor",
"--sapButton_Accept_Background",
"--sapButton_Accept_BorderColor",
"--sapButton_Accept_Hover_Background",
"--sapButton_Accept_Hover_BorderColor",
"--sapButton_Accept_Selected_Hover_Background",
"--sapButton_Accept_TextColor",
"--sapButton_Active_Background",
"--sapButton_Active_BorderColor",
"--sapButton_Active_TextColor",
"--sapButton_Background",
"--sapButton_BorderColor",
"--sapButton_Emphasized_Active_Background",
"--sapButton_Emphasized_Active_BorderColor",
"--sapButton_Emphasized_Background",
"--sapButton_Emphasized_BorderColor",
"--sapButton_Emphasized_Hover_Background",
"--sapButton_Emphasized_Hover_BorderColor",
"--sapButton_Emphasized_TextColor",
"--sapButton_Emphasized_TextShadow",
"--sapButton_Hover_Background",
"--sapButton_Hover_BorderColor",
"--sapButton_Hover_TextColor",
"--sapButton_Lite_Background",
"--sapButton_Lite_Hover_Background",
"--sapButton_Lite_TextColor",
"--sapButton_Reject_Active_Background",
"--sapButton_Reject_Active_BorderColor",
"--sapButton_Reject_Background",
"--sapButton_Reject_BorderColor",
"--sapButton_Reject_Hover_Background",
"--sapButton_Reject_Hover_BorderColor",
"--sapButton_Reject_Selected_Hover_Background",
"--sapButton_Reject_TextColor",
"--sapButton_Selected_Background",
"--sapButton_Selected_BorderColor",
"--sapButton_Selected_Hover_Background",
"--sapButton_Selected_Hover_BorderColor",
"--sapButton_Selected_TextColor",
"--sapButton_TextColor",
"--sapButton_TokenBackground",
"--sapButton_TokenBorderColor",
"--sapButton_Track_Background",
"--sapButton_Track_Selected_Background",
"--sapButton_Track_Selected_TextColor",
"--sapContent_BadgeBackground",
"--sapContent_ContrastFocusColor",
"--sapContent_ContrastTextColor",
"--sapContent_contrastTextColor",
"--sapContent_DisabledOpacity",
"--sapContent_DisabledTextColor",
"--sapContent_DragAndDropActiveColor",
"--sapContent_FocusColor",
"--sapContent_ForegroundBorderColor",
"--sapContent_ForegroundTextColor",
"--sapContent_HeaderShadow",
"--sapContent_HelpColor",
"--sapContent_IconColor",
"--sapContent_ImagePlaceholderBackground",
"--sapContent_ImagePlaceholderForegroundColor",
"--sapContent_LabelColor",
"--sapContent_NonInteractiveIconColor",
"--sapContent_Selected_Background",
"--sapContent_Selected_TextColor",
"--sapContent_Shadow0",
"--sapContent_Shadow1",
"--sapContent_Shadow2",
"--sapContent_TextShadow",
"--sapCriticalColor",
"--sapCriticalElementColor",
"--sapCriticalTextColor",
"--sapErrorBackground",
"--sapErrorBorderColor",
"--sapField_Background",
"--sapField_BorderColor",
"--sapField_Hover_Background",
"--sapField_Hover_BorderColor",
"--sapField_InformationBackground",
"--sapField_InformationColor",
"--sapField_InvalidBackground",
"--sapField_InvalidColor",
"--sapField_PlaceholderTextColor",
"--sapField_ReadOnly_Background",
"--sapField_ReadOnly_BorderColor",
"--sapField_RequiredColor",
"--sapField_SuccessBackground",
"--sapField_SuccessColor",
"--sapField_TextColor",
"--sapField_WarningBackground",
"--sapField_WarningColor",
"--sapFontFamily",
"--sapFontHeader5Size",
"--sapFontHeader6Size",
"--sapFontHeaderFamily",
"--sapFontLargeSize",
"--sapFontMediumSize",
"--sapFontSize",
"--sapFontSmallSize",
"--sapGroup_ContentBackground",
"--sapGroup_ContentBorderColor",
"--sapGroup_TitleBackground",
"--sapGroup_TitleBorderColor",
"--sapGroup_TitleTextColor",
"--sapHC_ReducedAltForeground",
"--sapHC_ReducedBackground",
"--sapHC_ReducedForeground",
"--sapHighlightColor",
"--sapInformationBackground",
"--sapInformationBorderColor",
"--sapInformativeElementColor",
"--sapLegend_CurrentDateTime",
"--sapLegend_NonWorkingBackground",
"--sapLegend_WorkingBackground",
"--sapLegendBackgroundColor1",
"--sapLegendBackgroundColor2",
"--sapLegendBackgroundColor3",
"--sapLegendBackgroundColor4",
"--sapLegendBackgroundColor5",
"--sapLegendBackgroundColor6",
"--sapLegendBackgroundColor7",
"--sapLegendBackgroundColor8",
"--sapLegendBackgroundColor9",
"--sapLegendBackgroundColor10",
"--sapLegendColor1",
"--sapLegendColor2",
"--sapLegendColor3",
"--sapLegendColor4",
"--sapLegendColor5",
"--sapLegendColor6",
"--sapLegendColor7",
"--sapLegendColor8",
"--sapLegendColor9",
"--sapLegendColor10",
"--sapLink_SubtleColor",
"--sapLinkColor",
"--sapList_Active_Background",
"--sapList_Active_TextColor",
"--sapList_AlternatingBackground",
"--sapList_Background",
"--sapList_BorderColor",
"--sapList_FooterBackground",
"--sapList_FooterTextColor",
"--sapList_GroupHeaderBackground",
"--sapList_GroupHeaderBorderColor",
"--sapList_HeaderBackground",
"--sapList_Hover_Background",
"--sapList_Hover_SelectionBackground",
"--sapList_SelectionBackgroundColor",
"--sapList_SelectionBorderColor",
"--sapList_TableGroupHeaderBorderColor",
"--sapList_TableGroupHeaderTextColor",
"--sapMFontHeader4Size",
"--sapMFontHeader5Size",
"--sapMFontHeader6Size",
"--sapMFontLargeSize",
"--sapNegativeColor",
"--sapNegativeElementColor",
"--sapNegativeTextColor",
"--sapNeutralColor",
"--sapNeutralTextColor",
"--sapObjectHeader_Background",
"--sapObjectHeader_BorderColor",
"--sapPageFooter_Background",
"--sapPageFooter_BorderColor",
"--sapPageFooter_TextColor",
"--sapPageHeader_BorderColor",
"--sapPageHeader_TextColor",
"--sapPositiveColor",
"--sapPositiveElementColor",
"--sapPositiveTextColor",
"--sapSelected",
"--sapSelectedColor",
"--sapShell_Active_Background",
"--sapShell_Active_TextColor",
"--sapShell_Hover_Background",
"--sapShell_InteractiveBorderColor",
"--sapShell_InteractiveTextColor",
"--sapShell_TextColor",
"--sapShellColor",
"--sapSuccessBackground",
"--sapSuccessBorderColor",
"--sapTextColor",
"--sapTile_Background",
"--sapTile_BorderColor",
"--sapTile_IconColor",
"--sapTile_SeparatorColor",
"--sapTile_TextColor",
"--sapTile_TitleTextColor",
"--sapUiBaseColor",
"--sapWarningBackground",
"--sapWarningBorderColor"
]
27 changes: 27 additions & 0 deletions packages/theme-base/lib/generate-css-vars-usage-report/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const fs = require('fs');
const path = require("path");
const glob = require("glob");
const beautify = require("json-beautify");

const vars = new Set();

const processFile = file => {
const content = fs.readFileSync(file);
const matches = `${content}`.match(/var\(--sap[\-_A-Za-z0-9]+\)/g);
matches && matches.forEach(match => {
const cssVar = match.match(/--sap[\-_A-Za-z0-9]+/)[0];
vars.add(cssVar);
});
};

// Main
glob.sync(path.join(__dirname, "../../../main/src/themes/**/*.css")).forEach(file => processFile(file));

// Fiori
glob.sync(path.join(__dirname, "../../../fiori/src/themes/**/*.css")).forEach(file => processFile(file));

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

fs.writeFileSync(path.join(__dirname, "../../css-vars-usage.json"), beautify(result, null, 2, 100));
console.log("CSS Vars usage report generated.");
6 changes: 4 additions & 2 deletions packages/theme-base/package-scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const resolve = require("resolve");
const assets = require('@ui5/webcomponents-tools/assets-meta.js');

const jsonImportsScript = resolve.sync("@ui5/webcomponents-tools/lib/generate-json-imports/themes.js");
const generateReportScript = resolve.sync("@ui5/webcomponents-theme-base/lib/generate-css-vars-usage-report/index.js");

const allThemes = assets.themes.all;
const buildThemesCommands = {};
Expand All @@ -19,14 +20,15 @@ module.exports = {
scripts: {
clean: "rimraf dist",
build: {
default: "nps clean build.src build.themes build.postcss build.jsonImports",
default: "nps clean build.src build.themes build.postcss build.jsonImports generateReport",
src: `copy-and-watch "src/**/*.js" dist/`,
themes: {
default: `nps build.themes.prepare ${buildThemesCommandsNames}`,
...buildThemesCommands
},
postcss: "postcss dist/**/parameters-bundle.css --config config/postcss.themes --base dist/ --dir dist/css/",
jsonImports: `node "${jsonImportsScript}" dist/generated/json-imports`,
}
},
generateReport: `node "${generateReportScript}"`,
},
};
2 changes: 2 additions & 0 deletions packages/theme-base/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@
"chokidar-cli": "^2.0.0",
"copy-and-watch": "^0.1.4",
"cssnano": "^4.1.10",
"glob": "^7.1.3",
"json-beautify": "^1.1.1",
"npm-run-all": "^4.1.3",
"nps": "^5.9.8",
"postcss": "^7.0.18",
Expand Down

0 comments on commit 9b4b6c4

Please sign in to comment.