chore: cleanup

packages/theming/package-scripts.cjs

@@ -16,7 +16,6 @@ module.exports = {
 			src: `copy-and-watch "src/**/*.{json}" dist/`,
 			typescript: "tsc",
 			postcss: `node "${LIB}/css-processors/css-processor-themes.mjs"`,
-			postcss2: "postcss dist/**/parameters-bundle.css --config config/postcss.themes --base dist/ --dir dist/css/",
 			jsonImports: `node "${jsonImportsScript}" dist/generated/assets/themes src/generated/json-imports`,
 		},
 		generateReport: `node "${generateReportScript}"`,

packages/theming/package.json

@@ -35,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/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

@@ -1,12 +1,11 @@
-import 'zx/globals';
+import { globby } from "globby";
 import * as esbuild from 'esbuild'
 import * as fs from "fs";
 import * as path from "path";
-import { writeFile, readFile, mkdir } from "fs/promises";
-import { getFileContent } from '../postcss-css-to-esm/index.js';
+import { writeFile, mkdir } from "fs/promises";
 import chokidar from "chokidar";
 import scopeVariables from "./scope-variables.mjs";
-import { writeFileIfChanged } from "./shared.mjs";
+import { writeFileIfChanged, getFileContent } from "./shared.mjs";
 
 const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
 const inputFilesGlob = "src/themes/*.css";

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

@@ -1,12 +1,11 @@
-import 'zx/globals';
+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 { getFileContent } from '../postcss-css-to-esm/index.js';
 import postcss from "postcss";
 import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
-import { writeFileIfChanged, stripThemingBaseContent } from "./shared.mjs";
+import { writeFileIfChanged, stripThemingBaseContent, getFileContent } from "./shared.mjs";
 import scopeVariables from "./scope-variables.mjs";
 
 const packageJSON = JSON.parse(fs.readFileSync("./package.json"))

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

@@ -1,4 +1,6 @@
 import { writeFile, readFile, mkdir } from "fs/promises";
+import * as path from "path";
+import assets from "../../assets-meta.js";
 
 const readOldContent = async (fileName) => {
     // it seems slower to read the old content, but writing the same content with no real changes
@@ -31,4 +33,44 @@ const stripThemingBaseContent = css => {
 	return css;
 }
 
-export { writeFileIfChanged, stripThemingBaseContent }
+
+const DEFAULT_THEME = assets.themes.default;
+
+const getDefaultThemeCode = packageName => {
+	return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
+import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
+
+registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
+registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () => defaultTheme);
+`;
+};
+
+const getFileContent = (tsMode, targetFile, packageName, css, includeDefaultTheme) => {
+	if (tsMode) {
+		return getTSContent(targetFile, packageName, css, includeDefaultTheme);
+	}
+
+	return getJSContent(targetFile, packageName, css, includeDefaultTheme);
+}
+
+const getTSContent = (targetFile, packageName, css, includeDefaultTheme) => {
+	const typeImport = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";"
+	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
+
+	// tabs are intentionally mixed to have proper identation in the produced file
+	return `${typeImport}
+${defaultTheme}
+const styleData: StyleData = {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}};
+export default styleData;
+	`;
+}
+
+const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
+	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
+
+	return `${defaultTheme}export default {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
+}
+
+export { writeFileIfChanged, stripThemingBaseContent, getFileContent}