@ui5/webcomponents-tools 0.0.0-d0bcf47c7 → 0.0.0-d160e83dd

package/README.md

@@ -1,24 +1,21 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/master/docs/images/UI5_logo_wide.png)
+# ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_water.png)UI5 Web Components - Tools
 
-# UI5 Web Components - Tools
-
-[![Travis CI Build Status](https://travis-ci.org/SAP/ui5-webcomponents.svg?branch=master)](https://travis-ci.org/SAP/ui5-webcomponents)
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
 Provides libraries, configuration files and build artifacts, 
 used by other UI5 Web Components packages, such as `main` and `fiori`. 
 
 ## Resources
-- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/master/README.md)
+- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
-- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
+- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/play/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).
 
 ## Contribute
-Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/CONTRIBUTING.md).
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
-This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/master/LICENSE.txt) file.
+This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/main/LICENSE.txt) file.

package/assets-meta.js

@@ -0,0 +1,154 @@
+const assetsMeta = {
+  "themes": {
+    "default": "sap_horizon",
+    "all": [
+      "sap_fiori_3",
+      "sap_fiori_3_dark",
+      "sap_fiori_3_hcb",
+      "sap_fiori_3_hcw",
+	    "sap_horizon",
+	    "sap_horizon_dark",
+	    "sap_horizon_hcb",
+	    "sap_horizon_hcw",
+    ],
+  },
+  "languages": {
+    "default": "en",
+    "all": [
+      "ar",
+      "bg",
+      "ca",
+      "cnr",
+      "cs",
+      "cy",
+      "da",
+      "de",
+      "el",
+      "en",
+      "en_GB",
+      "en_US_sappsd",
+      "en_US_saprigi",
+      "en_US_saptrc",
+      "es",
+      "es_MX",
+      "et",
+      "fi",
+      "fr",
+      "fr_CA",
+      "hi",
+      "hr",
+      "hu",
+      "in",
+      "it",
+      "iw",
+      "ja",
+      "kk",
+      "ko",
+      "lt",
+      "lv",
+      "mk",
+      "ms",
+      "nl",
+      "no",
+      "pl",
+      "pt_PT",
+      "pt",
+      "ro",
+      "ru",
+      "sh",
+      "sk",
+      "sl",
+      "sr",
+      "sv",
+      "th",
+      "tr",
+      "uk",
+      "vi",
+      "zh_CN",
+      "zh_TW"
+    ]
+  },
+  "locales": {
+    "default": "en",
+    "all": [
+      "ar",
+      "ar_EG",
+      "ar_SA",
+      "bg",
+      "ca",
+      "cnr",
+      "cs",
+      "da",
+      "de",
+      "de_AT",
+      "de_CH",
+      "el",
+      "el_CY",
+      "en",
+      "en_AU",
+      "en_GB",
+      "en_HK",
+      "en_IE",
+      "en_IN",
+      "en_NZ",
+      "en_PG",
+      "en_SG",
+      "en_ZA",
+      "es",
+      "es_AR",
+      "es_BO",
+      "es_CL",
+      "es_CO",
+      "es_MX",
+      "es_PE",
+      "es_UY",
+      "es_VE",
+      "et",
+      "fa",
+      "fi",
+      "fr",
+      "fr_BE",
+      "fr_CA",
+      "fr_CH",
+      "fr_LU",
+      "he",
+      "hi",
+      "hr",
+      "hu",
+      "id",
+      "it",
+      "it_CH",
+      "ja",
+      "kk",
+      "ko",
+      "lt",
+      "lv",
+      "ms",
+      "mk",
+      "nb",
+      "nl",
+      "nl_BE",
+      "pl",
+      "pt",
+      "pt_PT",
+      "ro",
+      "ru",
+      "ru_UA",
+      "sk",
+      "sl",
+      "sr",
+      "sr_Latn",
+      "sv",
+      "th",
+      "tr",
+      "uk",
+      "vi",
+      "zh_CN",
+      "zh_HK",
+      "zh_SG",
+      "zh_TW"
+    ]
+  }
+};
+
+module.exports = assetsMeta;

package/bin/dev.js

@@ -2,4 +2,15 @@
 
 const child_process = require("child_process");
 
-child_process.execSync(`npx nps ${process.argv[2]}`, {stdio: 'inherit'});
+let command = process.argv[2];
+const argument = process.argv[3];
+
+if (command === "watch") {
+	if (["src", "test", "bundles", "styles", "templates", "samples"].includes(argument)) {
+		command = `watch.${argument}`;
+	}
+} else if (command === "test") {
+	command = `test ${process.argv.slice(3).join(" ")}`;
+}
+
+child_process.execSync(`npx nps "${command}"`, {stdio: 'inherit'});

package/components-package/eslint.js

@@ -1,3 +1,65 @@
+const fs = require("fs");
+const path = require("path");
+const tsMode = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
+
+/**
+ * Returns eslint rules specific to typescript files
+ * @returns
+ */
+const getTsModeOverrides = () => {
+	const tsConfiguration = {
+		files: ["*.ts"],
+		parser: "@typescript-eslint/parser",
+		plugins: ["@typescript-eslint"],
+		extends: [
+			"plugin:@typescript-eslint/recommended",
+			"plugin:@typescript-eslint/recommended-requiring-type-checking"
+		],
+		parserOptions: {
+			"project": [
+				"./tsconfig.json"
+			],
+			EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
+		},
+		rules: {
+			"no-shadow": "off",
+			"@typescript-eslint/consistent-type-imports": "error",
+			"import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+			"@typescript-eslint/no-shadow": ["error"],
+			"@typescript-eslint/no-unsafe-member-access": "off",
+			"@typescript-eslint/no-floating-promises": "off",
+			"@typescript-eslint/no-explicit-any": "off",
+			"@typescript-eslint/no-unsafe-assignment": "off",
+			"@typescript-eslint/ban-ts-comment": "off",
+			"@typescript-eslint/no-unsafe-call": "off",
+			"@typescript-eslint/no-non-null-assertion": "off",
+			"@typescript-eslint/no-empty-function": "off",
+			"@typescript-eslint/no-empty-interface": "off",
+			"lines-between-class-members": "off",
+		}
+	};
+
+	const tsxConfiguration = JSON.parse(JSON.stringify(tsConfiguration));
+	tsxConfiguration.files = ["*.tsx"];
+	tsxConfiguration.plugins.push("jsx-no-leaked-values");
+	tsxConfiguration.rules = {
+		...tsxConfiguration.rules,
+		"jsx-no-leaked-values/jsx-no-leaked-values": "error",
+		"@typescript-eslint/unbound-method": "off", // to be able to attach on* listeners
+		"@typescript-eslint/no-misused-promises": "off", // to be able to have async event listeners
+		"operator-linebreak": "off",
+		"no-nested-ternary": "off",
+		"implicit-arrow-linebreak": "off",
+		"function-paren-newline": "off",
+		"comma-dangle": "off"
+	};
+
+	return [
+		tsConfiguration,
+		tsxConfiguration
+	];
+}
+
 module.exports = {
 	"env": {
 		"browser": true,
@@ -5,6 +67,7 @@ module.exports = {
 	},
 	"root": true,
 	"extends": "airbnb-base",
+	"overrides": tsMode ? getTsModeOverrides() : [],
 	"parserOptions": {
 		"ecmaVersion": 2018,
 		"sourceType": "module"
@@ -47,6 +110,7 @@ module.exports = {
 		"curly": [2, "all"],
 		// "default-case": 1, // removed for UI5 WebComponents
 		"import/extensions": ["error", "always"], // override for UI5 WebComponents
+		"import/order": "off",
 		"no-alert": 2,
 		"no-caller": 2,
 		"no-div-regex": 2,
@@ -88,7 +152,7 @@ module.exports = {
 		"no-shadow-restricted-names": 2,
 		"no-undef-init": 2,
 		"no-undef": 2,
-		"no-unused-vars": [2, {"vars":"all", "args":"none"}],
+		"no-unused-vars": [2, { "vars": "all", "args": "none" }],
 
 		"brace-style": [2, "1tbs", { "allowSingleLine": true }],
 		"camelcase": [1, { "properties": "never" }], // added for UI5 WebComponents
@@ -104,7 +168,7 @@ module.exports = {
 		"no-new-object": 2,
 		"no-spaced-func": 2,
 		"quote-props": [2, "as-needed", { "keywords": true, "unnecessary": false }],
-		"semi-spacing": [1, {"before": false, "after": true}],
+		"semi-spacing": [1, { "before": false, "after": true }],
 		"semi": 2,
 		"keyword-spacing": 2,
 		"space-infix-ops": 2,

package/components-package/nps.js

@@ -1,73 +1,170 @@
 const path = require("path");
-
+const fs = require("fs");
 const LIB = path.join(__dirname, `../lib/`);
-const NODE_MODULES_PATH = path.join(__dirname, `../../../node_modules/`);
-const serveConfig = path.join(__dirname, `serve.json`);
-const polyfillPath = path.join(NODE_MODULES_PATH, `/@webcomponents/webcomponentsjs/**/*.*`);
+let websiteBaseUrl = "/";
+
+if (process.env.DEPLOY) {
+	websiteBaseUrl = "/ui5-webcomponents/";
+} else if (process.env.DEPLOY_NIGHTLY) {
+	websiteBaseUrl = "/ui5-webcomponents/nightly/";
+}
+
+const cypressEnvVariables = (options, predefinedVars) => {
+	let variables = [];
+	const { cypress_code_coverage, cypress_acc_tests } = options.internal ?? {};
+
+	// Handle environment variables like TEST_SUITE  
+	if (predefinedVars) {
+		variables = [...predefinedVars];
+	}
+
+	// The coverage task is always registered and requires an explicit variable whether to generate a report or not
+	variables.push(`CYPRESS_COVERAGE=${!!cypress_code_coverage}`);
+
+	if (cypress_acc_tests) {
+		variables.push("CYPRESS_UI5_ACC=true");
+	}
+
+	return variables.length ? `cross-env ${variables.join(" ")}` : "";
+}
 
 const getScripts = (options) => {
 
-	const port = options.port;
+	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
+	const illustrationsData = options.illustrationsData || [];
+	const illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath} ${illustration.collection}`);
+	const createIllustrationsJSImportsScript = illustrations.join(" && ");
+
+	// The script creates the "src/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
+	const createIllustrationsLoadersScript = illustrationsData.map(illustrations => `node ${LIB}/generate-js-imports/illustrations.js ${illustrations.destinationPath} ${illustrations.dynamicImports.outputFile} ${illustrations.set} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.filterOut.join(" ")}`).join(" && ");
+
+	const tsOption = !options.legacy || options.jsx;
+	const tsCommandOld = tsOption ? "tsc" : "";
+	let tsWatchCommandStandalone = tsOption ? "tsc --watch" : "";
+	// this command is only used for standalone projects. monorepo projects get their watch from vite, so opt-out here
+	if (options.noWatchTS) {
+		tsWatchCommandStandalone = "";
+	}
+	const tsCrossEnv = tsOption ? "cross-env UI5_TS=true" : "";
+
+	if (tsOption) {
+		try {
+			require("typescript");
+		} catch (e) {
+			console.error(`TypeScript is not found. Try to install it by running \`npm install --save-dev typescript\` if you are using npm or by running \`yarn add --dev typescript\` if you are using yarn.`);
+			process.exit(e.code);
+		}
+	}
+
+	let viteConfig;
+	if (fs.existsSync("config/vite.config.js")) {
+		// old project setup where config file is in separate folder
+		viteConfig = "-c config/vite.config.js";
+	} else if (fs.existsSync("vite.config.js")) {
+		// preferred way of custom configuration in root project folder
+		viteConfig = "";
+	} else {
+		// no custom configuration - use default from tools project
+		viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
+	}
+
+	let eslintConfig;
+	if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
+		// preferred way of custom configuration in root project folder
+		eslintConfig = "";
+	} else {
+		// no custom configuration - use default from tools project
+		eslintConfig = `--config  "${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}"`;
+	}
 
 	const scripts = {
-		clean: "rimraf dist",
-		lint: "eslint . --config config/.eslintrc.js",
-		prepare: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples",
+		clean: 'rimraf src/generated && rimraf dist && rimraf .port && nps "scope.testPages.clean"',
+		lint: `eslint . ${eslintConfig}`,
+		lintfix: `eslint . ${eslintConfig} --fix`,
+		generate: {
+			default: `${tsCrossEnv} nps prepare.all`,
+			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copyProps" "nps build.illustrations"',
+			styleRelated: "nps build.styles build.jsonImports build.jsImports",
+		},
+		prepare: {
+			default: `${tsCrossEnv} nps clean prepare.all ${options.legacy ? "copy" : ""} copyProps prepare.typescript generateAPI`,
+			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps build.illustrations"',
+			styleRelated: "nps build.styles build.jsonImports build.jsImports",
+			typescript: tsCommandOld,
+		},
 		build: {
-			default: "nps lint prepare build.bundle",
-			templates: `mkdirp dist/generated/templates && node ${LIB}/hbs2ui5/index.js -d src/ -o dist/generated/templates`,
+			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: "nps build.styles.themes build.styles.components",
-				themes: "postcss src/**/parameters-bundle.css --config config/postcss.themes --base src --dir dist/css/",
-				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/",
+				default: `concurrently "nps build.styles.themes" "nps build.styles.components"`,
+				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: `mkdirp dist/generated/i18n && node ${LIB}/i18n/defaults.js src/i18n dist/generated/i18n`,
-				json: `mkdirp dist/generated/assets/i18n && node ${LIB}/i18n/toJSON.js src/i18n dist/generated/assets/i18n`,
+				defaultsjs: `node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
+				json: `node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
 			jsonImports: {
-				default: "mkdirp dist/generated/json-imports && nps build.jsonImports.themes build.jsonImports.i18n",
-				themes: `node ${LIB}/generate-json-imports/themes.js`,
-				i18n: `node ${LIB}/generate-json-imports/i18n.js`,
+				default: "mkdirp src/generated/json-imports && nps build.jsonImports.themes build.jsonImports.i18n",
+				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`,
 			},
-			bundle: "rollup --config config/rollup.config.js --environment ES5_BUILD",
-			samples: {
-				default: "nps build.samples.api build.samples.docs",
-				api: `jsdoc -c  ${LIB}/jsdoc/config.json`,
-				docs: `node ${LIB}/documentation/index.js dist/api.json`,
-			}
+			jsImports: {
+				default: "mkdirp src/generated/js-imports && nps build.jsImports.illustrationsLoaders",
+				illustrationsLoaders: createIllustrationsLoadersScript,
+			},
+			bundle: `vite build ${viteConfig} --mode testing  --base ${websiteBaseUrl}`,
+			bundle2: ``,
+			illustrations: createIllustrationsJSImportsScript,
 		},
+		copyProps: `node "${LIB}/copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/`,
 		copy: {
-			default: "nps copy.src copy.test copy.webcomponents-polyfill",
-			src: "copy-and-watch \"src/**/*.js\" dist/",
-			test: "copy-and-watch \"test/**/*.*\" dist/test-resources",
-			"webcomponents-polyfill": `copy-and-watch "${polyfillPath}" dist/webcomponentsjs/`,
+			default: "nps copy.src copy.props",
+			src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.{js,json}" dist/`,
+			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/`,
 		},
 		watch: {
-			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
-			src: 'nps "copy.src --watch --skip-initial-copy"',
-			test: 'nps "copy.test --watch --skip-initial-copy"',
-			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV",
+			default: `${tsCrossEnv} concurrently "nps watch.templates" "nps watch.typescript" ${options.legacy ? '"nps watch.src"' : ""} "nps watch.styles" "nps watch.i18n" "nps watch.props"`,
+			devServer: 'concurrently "nps watch.default" "nps watch.bundle"',
+			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
+			typescript: tsWatchCommandStandalone,
+			props: 'nps "copyProps --watch --safe --skip-initial-copy"',
+			bundle: `node ${LIB}/dev-server/dev-server.mjs ${viteConfig}`,
 			styles: {
 				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
 				themes: 'nps "build.styles.themes -w"',
-				components: 'nps "build.styles.components -w"',
+				components: `nps "build.styles.components -w"`,
 			},
-			templates: "chokidar \"src/**/*.hbs\" -c \"nps build.templates\"",
-			samples: "chokidar \"test/**/*.sample.html\" -c \"nps build.samples\"",
+			templates: 'chokidar "src/**/*.hbs" -i "src/generated" -c "nps build.templates"',
+			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
 		},
-		dev: 'concurrently "nps serve" "nps watch"',
-		start: "nps prepare dev",
-		serve: {
-			default: "nps serve.prepare serve.run",
-			prepare: `copy-and-watch "${serveConfig}" dist/`,
-			run: `serve --no-clipboard -l ${port} dist`,
+		start: "nps prepare watch.devServer",
+		test: `node "${LIB}/test-runner/test-runner.js"`,
+		"test-cy-ci": `${cypressEnvVariables(options)} yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-1": `${cypressEnvVariables(options, ["TEST_SUITE=SUITE1"])} yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-2": `${cypressEnvVariables(options, ["TEST_SUITE=SUITE2"])} yarn cypress run --component --browser chrome`,
+		"test-cy-open": `${cypressEnvVariables(options)} yarn cypress open --component --browser chrome`,
+		"test-suite-1": `node "${LIB}/test-runner/test-runner.js" --suite suite1`,
+		"test-suite-2": `node "${LIB}/test-runner/test-runner.js" --suite suite2`,
+		startWithScope: "nps scope.prepare scope.watchWithBundle",
+		scope: {
+			prepare: "nps scope.lint scope.testPages",
+			lint: `node "${LIB}/scoping/lint-src.js"`,
+			testPages: {
+				default: "nps scope.testPages.clean scope.testPages.copy scope.testPages.replace",
+				clean: "rimraf test/pages/scoped",
+				copy: `node "${LIB}/copy-and-watch/index.js" --silent "test/pages/**/*" test/pages/scoped`,
+				replace: `node "${LIB}/scoping/scope-test-pages.js" test/pages/scoped demo`,
+			},
+			watchWithBundle: 'concurrently "nps scope.watch" "nps scope.bundle" ',
+			watch: 'concurrently "nps watch.templates" "nps watch.props" "nps watch.styles"',
+			bundle: `node ${LIB}/dev-server/dev-server.mjs ${viteConfig}`,
 		},
-		test: {
-			// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
-			default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
-			run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
+		generateAPI: {
+			default: tsOption ? "nps generateAPI.generateCEM generateAPI.validateCEM" : "",
+			generateCEM: `${options.dev ? "cross-env UI5_CEM_MODE='dev'" : ""} cem analyze --config "${LIB}/cem/custom-elements-manifest.config.mjs"`,
+			validateCEM: `${options.dev ? "cross-env UI5_CEM_MODE='dev'" : ""} node "${LIB}/cem/validate.js"`,
 		},
 	};
 

package/components-package/postcss.components.js

@@ -1,21 +1 @@
-const postcssImport = require('postcss-import');
-const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
-const cssnano = require('cssnano');
-const fs = require("fs");
-
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-
-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
-				},
-			]
-		}),
-		postcssCSStoESM({toReplace: 'src', includeDefaultTheme: true, packageName}),
-	]
-};
+module.exports = {}

package/components-package/postcss.themes.js

@@ -1,23 +1 @@
-const postcssImport = require('postcss-import');
-const combineSelectors = require('postcss-combine-duplicated-selectors');
-const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
-const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
-const cssnano = require('cssnano');
-
-module.exports = {
-	plugins: [
-		postcssImport(),
-		combineSelectors({
-			removeDuplicatedProperties: true
-		}),
-		cssnano({
-			preset: [
-				'default', {
-					mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-				},
-			]
-		},),
-		postcssCSStoJSON({toReplace: 'src'}),
-		postcssCSStoESM({toReplace: 'src'}),
-	]
-};
+module.exports = {};

package/components-package/vite.config.js

@@ -0,0 +1,9 @@
+// vite.config.js
+const virtualIndex = require('../lib/dev-server/virtual-index-html-plugin.js');
+
+module.exports = {
+	build: {
+		emptyOutDir: false,
+	},
+	plugins: [virtualIndex()],
+};