chore(tools): Optimize build by switching css processing to esbuild

package.json

@@ -13,21 +13,20 @@
     "generateAPI": "wsrun --exclude-missing generateAPI",
     "ts": "tsc -b packages/fiori/tsconfig.json",
     "bundle": "wsrun --exclude-missing bundle",
-    "copy:generated": "wsrun --exclude-missing copyGenerated",
     "clean": "wsrun --exclude-missing clean",
     "scopePrepare:main": "yarn workspace @ui5/webcomponents nps scope.prepare",
     "scopePrepare:fiori": "yarn workspace @ui5/webcomponents-fiori nps scope.prepare",
     "watch:base": "yarn workspace @ui5/webcomponents-base nps watch",
-    "watch:localization": "yarn workspace @ui5/webcomponents-localization nps watch",
     "watch:main": "yarn workspace @ui5/webcomponents nps watch",
     "watch:fiori": "yarn workspace @ui5/webcomponents-fiori nps watch",
+    "watch:allWithDelay": "node -e \"setTimeout(function(){}, 5000)\" && npm-run-all --parallel copy-css watch:base watch:main watch:fiori",
     "scopeWatch:main": "yarn workspace @ui5/webcomponents nps scope.watch",
     "scopeWatch:fiori": "yarn workspace @ui5/webcomponents-fiori nps scope.watch",
     "start": "npm-run-all --sequential generate start:all",
     "startWithScope": "npm-run-all --sequential generate scopePrepare:main scopePrepare:fiori copy-css scopeStart:all",
-    "start:all": "npm-run-all --parallel copy-css watch:base watch:localization watch:main watch:fiori dev",
+    "start:all": "npm-run-all --parallel watch:allWithDelay dev",
     "dev": "node packages/tools/lib/dev-server/dev-server.js",
-    "scopeStart:all": "npm-run-all --parallel watch:base watch:localization scopeWatch:main scopeWatch:fiori dev",
+    "scopeStart:all": "npm-run-all --parallel watch:base scopeWatch:main scopeWatch:fiori dev",
     "start:playground": "yarn ci:releasebuild && yarn copy-css && yarn workspace @ui5/webcomponents-playground start",
     "test:base": "yarn workspace @ui5/webcomponents-base test",
     "test:main": "yarn workspace @ui5/webcomponents test",
@@ -36,9 +35,10 @@
     "test:fiori": "yarn workspace @ui5/webcomponents-fiori test",
     "test": "yarn wsrun --exclude-missing test",
 
-    "ci:releasebuild": "npm-run-all --sequential generate copy:generated ts generateAPI",
+    "build": "yarn ci:releasebuild",
+    "ci:releasebuild": "npm-run-all --sequential generate ts generateAPI",
     "ci:lint": "npm-run-all --sequential generate lint",
-    "ci:testbuild": "npm-run-all --sequential generate copy:generated ts bundle",
+    "ci:testbuild": "npm-run-all --sequential generate ts bundle",
     "ci:deploybuild": "yarn ci:testbuild && yarn generateAPI && yarn copy-css && yarn workspace @ui5/webcomponents-playground build",
 
     "lint": "wsrun --exclude-missing lint",

packages/fiori/package.json

@@ -34,7 +34,6 @@
     "build": "wc-dev build",
     "generate": "nps generate",
     "generateAPI": "nps generateAPI",
-    "copyGenerated": "nps copyGenerated",
     "bundle": "nps build.bundle",
     "test": "wc-dev test",
     "create-ui5-element": "wc-create-ui5-element",

packages/localization/package-scripts.cjs

@@ -1,39 +1,30 @@
 const resolve = require("resolve");
-const path = require("path");
 
 const copyUsedModules = resolve.sync("@ui5/webcomponents-tools/lib/copy-list/index.js");
 const replaceGlobalCore = resolve.sync("@ui5/webcomponents-tools/lib/replace-global-core/index.js");
 const esmAbsToRel = resolve.sync("@ui5/webcomponents-tools/lib/esm-abs-to-rel/index.js");
-const LIB = path.join(__dirname, `../tools/lib/`);
 
 const scripts = {
 	clean: "rimraf dist",
 	lint: "eslint .",
-	generate: "nps clean copy.used-modules copy.cldr copy.overlay build.replace-amd build.replace-export-true build.replace-export-false build.amd-to-es6 build.replace-global-core-usage build.esm-abs-to-rel build.jsonImports copy.src",
+	generate: "nps copy.used-modules copy.cldr copy.overlay build.replace-amd build.replace-export-true build.replace-export-false build.amd-to-es6 build.replace-global-core-usage build.esm-abs-to-rel build.jsonImports",
 	build: {
-		"default": "nps clean copy.used-modules copy.cldr copy.overlay build.replace-amd build.replace-export-true build.replace-export-false build.amd-to-es6 build.replace-global-core-usage build.esm-abs-to-rel build.jsonImports build.typescript copy.src",
+		"default": "nps clean copy.used-modules copy.cldr copy.overlay build.replace-amd build.replace-export-true build.replace-export-false build.amd-to-es6 build.replace-global-core-usage build.esm-abs-to-rel build.jsonImports build.typescript",
 		"replace-amd": "replace-in-file sap.ui.define define dist/**/*.js",
 		"replace-export-true": `replace-in-file ", /* bExport= */ true" "" dist/**/*.js`,
 		"replace-export-false": `replace-in-file ", /* bExport= */ false" "" dist/**/*.js`,
 		"amd-to-es6": "amdtoes6 --src=dist --replace --glob=**/*.js",
 		"replace-global-core-usage": `node "${replaceGlobalCore}" dist/`,
 		"esm-abs-to-rel": `node "${esmAbsToRel}" dist/`,
 		typescript: "tsc --build",
-		jsonImports: "node ./lib/generate-json-imports/cldr.js"
+		jsonImports: "node ./lib/generate-json-imports/cldr.js",
 	},
 	typescript: "tsc --build",
 	copy: {
 		"used-modules": `node "${copyUsedModules}" ./used-modules.txt dist/`,
-		cldr: `node ./lib/copy-and-strip-cldr/index.js "../../node_modules/@openui5/sap.ui.core/src/sap/ui/core/cldr/" src/generated/assets/cldr/`,
+		cldr: `node ./lib/copy-and-strip-cldr/index.js "../../node_modules/@openui5/sap.ui.core/src/sap/ui/core/cldr/" dist/generated/assets/cldr/`,
 		overlay: `copy-and-watch "overlay/**/*.js" dist/`,
-		src: `copy-and-watch "src/**/*.js" dist/`,
 	},
-	copyGenerated: `node "${LIB}/copy-and-watch/index.js" --silent "src/generated/**/*.{js,json}" dist/generated/`,
-	watch: {
-		"default": "nps watch.src",
-		src: `nps "copy.src --watch --skip-initial-copy"`,
-	},
-	start: "nps watch",
 };
 
 module.exports = {

packages/localization/package.json

@@ -26,7 +26,6 @@
     "start": "nps start",
     "build": "nps build",
     "generate": "nps generate",
-    "copyGenerated": "nps copyGenerated",
     "prepublishOnly": "tsc"
   },
   "devDependencies": {

packages/main/package.json

@@ -23,7 +23,6 @@
     "watch": "wc-dev watch",
     "generate": "nps generate",
     "generateAPI": "nps generateAPI",
-    "copyGenerated": "nps copyGenerated",
     "build": "wc-dev build",
     "bundle": "nps build.bundle",
     "test": "wc-dev test",

packages/theming/package-scripts.cjs

@@ -1,23 +1,23 @@
 const resolve = require("resolve");
 const assets = require('@ui5/webcomponents-tools/assets-meta.js');
+const path = require('path');
 
 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 LIB = path.join(__dirname, `../tools/lib/`);
+
 module.exports = {
 	scripts: {
 		clean: "rimraf dist && rimraf src/generated",
-		generate: `cross-env UI5_TS=true nps clean build.src  build.postcss build.jsonImports`,
+		generate: `cross-env UI5_TS=true nps build.postcss build.jsonImports`,
 		build: {
 			default: `cross-env UI5_TS=true nps clean build.src build.postcss build.jsonImports build.typescript generateReport`,
-			src: `copy-and-watch "src/**/*.{js,css}" dist/`,
+			src: `copy-and-watch "src/**/*.{json}" dist/`,
 			typescript: "tsc",
-			postcss: "postcss dist/**/parameters-bundle.css --config config/postcss.themes --base dist/ --dir dist/css/",
-			jsonImports: `node "${jsonImportsScript}" src/generated/assets/themes src/generated/json-imports`,
+			postcss: `node "${LIB}/css-processors/css-processor-themes.mjs"`,
+			jsonImports: `node "${jsonImportsScript}" dist/generated/assets/themes src/generated/json-imports`,
 		},
-		copyGenerated: `copy-and-watch "src/generated/**/*.{js,css,json}" dist/generated/`,
 		generateReport: `node "${generateReportScript}"`,
 	},
 };
-
-console.log(JSON.stringify(module.exports, 2, 2))

packages/theming/package.json

@@ -20,7 +20,6 @@
     "clean": "nps clean",
     "build": "nps build",
     "generate": "nps generate",
-    "copyGenerated": "nps copyGenerated",
     "start": "nps start",
     "verify": "node ./lib/verify-vars/index.js",
     "prepublishOnly": "tsc"
@@ -36,7 +35,6 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.21.0-rc.2",
-    "cssnano": "^6.0.1",
     "globby": "^13.1.1",
     "json-beautify": "^1.1.1",
     "nps": "^5.10.0",

packages/tools/components-package/nps.js

@@ -68,25 +68,23 @@ const getScripts = (options) => {
 			styleRelated: "nps build.styles build.jsonImports build.jsImports",
 			typescript: tsCommandOld,
 		},
-		copyGenerated: `node "${LIB}/copy-and-watch/index.js" --silent "src/generated/**/*.{js,json}" dist/generated/`,
 		build: {
 			default: "nps prepare lint build.bundle", // build.bundle2
 			templates: `mkdirp src/generated/templates && ${tsCrossEnv} node "${LIB}/hbs2ui5/index.js" -d src/ -o src/generated/templates`,
 			styles: {
 				default: `concurrently "nps build.styles.themes" "nps build.styles.components"`,
-				default2: `nps build.styles.themes build.styles.components`,
-				themes: `node "${LIB}/postcss-p/postcss-p.mjs"`,
-				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
+				themes: `node "${LIB}/css-processors/css-processor-themes.mjs"`,
+				components: `node "${LIB}/css-processors/css-processor-components.mjs"`,
 			},
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
 				defaultsjs: `node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
-				json: `node "${LIB}/i18n/toJSON.js" src/i18n src/generated/assets/i18n`,
+				json: `node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
 			jsonImports: {
 				default: "mkdirp src/generated/json-imports && nps build.jsonImports.themes build.jsonImports.i18n",
-				themes: `node "${LIB}/generate-json-imports/themes.js" src/generated/assets/themes src/generated/json-imports`,
-				i18n: `node "${LIB}/generate-json-imports/i18n.js" src/generated/assets/i18n src/generated/json-imports`,
+				themes: `node "${LIB}/generate-json-imports/themes.js" dist/generated/assets/themes src/generated/json-imports`,
+				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n src/generated/json-imports`,
 			},
 			jsImports: {
 				default: "mkdirp src/generated/js-imports && nps build.jsImports.illustrationsLoaders",
@@ -112,11 +110,7 @@ const getScripts = (options) => {
 			styles: {
 				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
 				themes: 'nps "build.styles.themes -w"',
-				components: {
-					default: 'concurrently "nps watch.styles.components.existingFiles" "nps watch.styles.components.newFiles"',
-					existingFiles: `nps "build.styles.components -w"`,
-					newFiles: `node "${LIB}/postcss-new-files/index.js" --srcFiles="src/themes/*.css"`,
-				},
+				components: `nps "build.styles.components -w"`,
 			},
 			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
 			api: 'chokidar "test/**/*.sample.html" -c "nps generateAPI"',

packages/tools/components-package/postcss.components.js

@@ -1,24 +1,3 @@
-const postcssImport = require('postcss-import');
-const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
-const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
-const cssnano = require('cssnano');
-const fs = require("fs")
-
-
 const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
 
-module.exports = {
-		plugins: [
-			postcssImport(),
-			cssnano({
-				preset: [
-					'default', {
-						mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-						mergeRules: false, // https://github.com/cssnano/cssnano/issues/730
-					},
-				]
-			}),
-			postcssScopeVars({version: packageJSON.version}),
-			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName: packageJSON.name }),
-		]
-}
+module.exports = {}

packages/tools/components-package/postcss.themes.js

@@ -1,30 +1 @@
-const postcssImport = require('postcss-import');
-const combineSelectors = require('../lib/postcss-combine-duplicated-selectors/index.js');
-const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
-const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
-const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
-const cssnano = require('cssnano');
-const fs = require("fs");
-
-
-const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
-const packageName = packageJSON.name;
-
-module.exports = {
-		plugins: [
-			postcssScopeVars({version: packageJSON.version}),
-			postcssImport(),
-			combineSelectors({
-				removeDuplicatedProperties: true
-			}),
-			cssnano({
-				preset: [
-					'default', {
-						mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-					},
-				]
-			},),
-			postcssCSStoJSON({ toReplace: 'src', packageName }),
-			postcssCSStoESM({ toReplace: 'src', packageName }),
-		]
-};
+module.exports = {};

packages/tools/lib/css-processors/css-processor-components.mjs

@@ -0,0 +1,74 @@
+import { globby } from "globby";
+import * as esbuild from 'esbuild'
+import * as fs from "fs";
+import * as path from "path";
+import { writeFile, mkdir } from "fs/promises";
+import chokidar from "chokidar";
+import scopeVariables from "./scope-variables.mjs";
+import { writeFileIfChanged, getFileContent } from "./shared.mjs";
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
+const inputFilesGlob = "src/themes/*.css";
+const restArgs = process.argv.slice(2);
+
+let customPlugin = {
+    name: 'ui5-tools',
+    setup(build) {
+        build.initialOptions.write = false;
+
+        build.onEnd(result => {
+            result.outputFiles.forEach(async f => {
+                // scoping
+                const newText = scopeVariables(f.text, packageJSON);
+                await mkdir(path.dirname(f.path), {recursive: true});
+                writeFile(f.path, newText);
+
+                // JS/TS
+                const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", ".css.ts");
+                const jsContent = getFileContent(true, jsPath, packageJSON.name, "\`" + newText + "\`", true);
+                writeFileIfChanged(jsPath, jsContent);
+            });
+        })
+    },
+}
+
+const getConfig = async () => {
+    const config = {
+        entryPoints: await globby(inputFilesGlob),
+        bundle: true,
+        minify: true,
+        outdir: 'dist/css',
+        outbase: 'src',
+        plugins: [
+            customPlugin,
+        ]
+    };
+    return config;
+}
+
+if (restArgs.includes("-w")) {
+    let ready;
+    let config = await getConfig();
+    let ctx = await esbuild.context(config);
+    await ctx.watch()
+    console.log('watching...')
+
+    // when new component css files are added, they do not trigger a build as no one directly imports them
+    // restart the watch mode with the new entry points if a css file is added.
+    const watcher = chokidar.watch(inputFilesGlob);
+    watcher.on("ready", () => {
+        ready = true; // Initial scan is over -> waiting for new files
+    });
+    watcher.on("add", async path => {
+        if (ready) {
+            // new file
+            ctx.dispose();
+            config = await getConfig();
+            ctx = await esbuild.context(config);
+            ctx.watch();
+        }
+    });
+} else {
+    const config = await getConfig();
+    const result = await esbuild.build(config);
+}