@ui5/webcomponents-theming 0.0.0-0af474175

package/dist/themes/sap_horizon_hcw/parameters-bundle.css

@@ -0,0 +1 @@
+@import "./css_variables.css";

package/lib/generate-css-vars-usage-report/index.js

@@ -0,0 +1,36 @@
+import fs from "fs/promises";
+import path from "path";
+import beautify from "json-beautify";
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const vars = new Set();
+
+const processFile = async file => {
+	const content = await fs.readFile(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);
+	});
+};
+
+const generate = async () => {
+	const { globby } = await import("globby");
+
+	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, "/"));
+
+	await Promise.all([...mainFiles.map(processFile), ...fioriFiles.map(processFile)]);
+
+	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));
+}
+
+generate().then(() => {
+	console.log("CSS Vars usage report generated.");
+});

package/package-scripts.cjs

@@ -0,0 +1,34 @@
+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-theming/lib/generate-css-vars-usage-report/index.js");
+
+const allThemes = assets.themes.all;
+const buildThemesCommands = {};
+const buildThemesCommandsNames = allThemes.map(theme => `build.themes.${theme}`).join(" ");
+
+buildThemesCommands["prepare"] = allThemes.map(theme => `mkdirp dist/themes/${theme}`).join(" && ");
+allThemes.forEach(theme => {
+	buildThemesCommands[theme] = `nps build.themes.copy_${theme}_vars build.themes.copy_${theme}_bundle`;
+	buildThemesCommands[`copy_${theme}_vars`] = `copy-and-watch "../../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/${theme.replace("sap_horizon_exp", "sap_horizon")}/css_variables.css" dist/themes/${theme}/`;
+	buildThemesCommands[`copy_${theme}_bundle`] = `copy-and-watch "src/themes/${theme}/parameters-bundle.css" dist/themes/${theme}/`;
+});
+
+module.exports = {
+	scripts: {
+		clean: "rimraf dist && rimraf src/generated",
+		build: {
+			default: `cross-env UI5_TS=true nps clean build.src build.themes build.postcss build.jsonImports build.typescript generateReport`,
+			src: `copy-and-watch "src/**/*.js" dist/`,
+			typescript: "tsc",
+			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/assets/themes dist/generated/json-imports`,
+		},
+		generateReport: `node "${generateReportScript}"`,
+	},
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@ui5/webcomponents-theming",
+  "version": "0.0.0-0af474175",
+  "description": "UI5 Web Components: webcomponents.theming",
+  "author": "SAP SE (https://www.sap.com)",
+  "license": "Apache-2.0",
+  "private": false,
+  "type": "module",
+  "keywords": [
+    "openui5",
+    "sapui5",
+    "ui5"
+  ],
+  "exports": {
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./*": "./dist/*"
+  },
+  "scripts": {
+    "clean": "nps clean",
+    "build": "nps build",
+    "start": "nps start",
+    "verify": "node ./lib/verify-vars/index.js",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/ui5-webcomponents.git",
+    "directory": "packages/theming"
+  },
+  "dependencies": {
+    "@sap-theming/theming-base-content": "11.4.2",
+    "@ui5/webcomponents-base": "0.0.0-0af474175"
+  },
+  "devDependencies": {
+    "@ui5/webcomponents-tools": "0.0.0-0af474175",
+    "chromedriver": "112.0.0",
+    "cssnano": "^4.1.11",
+    "globby": "^13.1.1",
+    "json-beautify": "^1.1.1",
+    "nps": "^5.10.0",
+    "postcss": "^8.4.5",
+    "postcss-import": "^14.0.2",
+    "resolve": "^1.20.0"
+  },
+  "resolutions": {}
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "include": ["src/**/*"],
+    "compilerOptions": {
+      "target": "ES2021",
+      // Generate d.ts files
+      "declaration": true,
+      "outDir": "dist",
+      "skipLibCheck": true,
+      "sourceMap": true,
+      "inlineSources": true,
+      "strict": true,
+      "moduleResolution": "node",
+      "experimentalDecorators": true,
+    },
+}