diff --git a/packages/ai/src/themes/base/Button-parameters.css b/packages/ai/src/themes/base/Button-parameters.css deleted file mode 100644 index fbcb648c03dd..000000000000 --- a/packages/ai/src/themes/base/Button-parameters.css +++ /dev/null @@ -1,2 +0,0 @@ -:root { -} \ No newline at end of file diff --git a/packages/ai/src/themes/sap_horizon/parameters-bundle.css b/packages/ai/src/themes/sap_horizon/parameters-bundle.css deleted file mode 100644 index 3b33b7630fe0..000000000000 --- a/packages/ai/src/themes/sap_horizon/parameters-bundle.css +++ /dev/null @@ -1 +0,0 @@ -@import "../base/Button-parameters.css"; \ No newline at end of file diff --git a/packages/ai/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/ai/src/themes/sap_horizon_dark/parameters-bundle.css deleted file mode 100644 index 3b33b7630fe0..000000000000 --- a/packages/ai/src/themes/sap_horizon_dark/parameters-bundle.css +++ /dev/null @@ -1 +0,0 @@ -@import "../base/Button-parameters.css"; \ No newline at end of file diff --git a/packages/ai/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/ai/src/themes/sap_horizon_hcb/parameters-bundle.css deleted file mode 100644 index 3b33b7630fe0..000000000000 --- a/packages/ai/src/themes/sap_horizon_hcb/parameters-bundle.css +++ /dev/null @@ -1 +0,0 @@ -@import "../base/Button-parameters.css"; \ No newline at end of file diff --git a/packages/ai/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/ai/src/themes/sap_horizon_hcw/parameters-bundle.css deleted file mode 100644 index 3b33b7630fe0..000000000000 --- a/packages/ai/src/themes/sap_horizon_hcw/parameters-bundle.css +++ /dev/null @@ -1 +0,0 @@ -@import "../base/Button-parameters.css"; \ No newline at end of file diff --git a/packages/tools/lib/css-processors/shared.mjs b/packages/tools/lib/css-processors/shared.mjs index 0cda3c30d4c1..c93b3911234c 100644 --- a/packages/tools/lib/css-processors/shared.mjs +++ b/packages/tools/lib/css-processors/shared.mjs @@ -1,4 +1,5 @@ import { writeFile, readFile, mkdir } from "fs/promises"; +import fsSync from "fs"; import * as path from "path"; import assets from "../../assets-meta.js"; @@ -18,7 +19,7 @@ const writeFileIfChanged = async (fileName, content) => { const oldContent = await readOldContent(fileName); if (content !== oldContent) { if (!oldContent) { - await mkdir(path.dirname(fileName), {recursive: true}); + await mkdir(path.dirname(fileName), { recursive: true }); } return writeFile(fileName, content); } @@ -27,20 +28,27 @@ const writeFileIfChanged = async (fileName, content) => { const DEFAULT_THEME = assets.themes.default; const getDefaultThemeCode = packageName => { - return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js"; + const defaultThemeFile = fsSync.existsSync(path.join(process.cwd(), 'src', "themes", DEFAULT_THEME, "parameters-bundle.css")); + let defaultThemeText = `const defaultTheme = "";`; + + if (defaultThemeFile) { + defaultThemeText = `import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";`; + } + + 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"; +${defaultThemeText} registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase); -registerThemePropertiesLoader(${ packageName.split("").map(c => `"${c}"`).join (" + ") }, "${DEFAULT_THEME}", async () => defaultTheme); +registerThemePropertiesLoader(${packageName.split("").map(c => `"${c}"`).join(" + ")}, "${DEFAULT_THEME}", async () => defaultTheme); `; }; const getFileContent = (packageName, css, includeDefaultTheme) => { - const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : ""; - return `${defaultTheme}export default ${css.trim()}` + const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : ""; + return `${defaultTheme}export default ${css.trim()}` } -export { writeFileIfChanged, getFileContent} \ No newline at end of file +export { writeFileIfChanged, getFileContent } \ No newline at end of file diff --git a/packages/tools/lib/generate-json-imports/themes.js b/packages/tools/lib/generate-json-imports/themes.js index b61d28a7226a..54b7f4faed65 100644 --- a/packages/tools/lib/generate-json-imports/themes.js +++ b/packages/tools/lib/generate-json-imports/themes.js @@ -21,13 +21,21 @@ const generate = async (argv) => { return matches ? dir : undefined; }).filter(key => !!key && allThemes.includes(key)); + // Themes that doesn't exist on the file system + const missingThemes = allThemes.filter(theme => !themesOnFileSystem.includes(theme)); + const packageName = JSON.parse(await fs.readFile("package.json")).name; - const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`; + // Contain all supported themes from assets-meta.js + const availableThemesArray = `[${allThemes.map(theme => `"${theme}"`).join(", ")}]`; + const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n"); const dynamicImportJSONAttrLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json", {with: { type: 'json'}})).default;`).join("\n"); const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle.css.json", import.meta.url))).json();`).join("\n"); + // Lines for missing themes to avoid runtime errors. By default parameters-bundle.css.json returns a strings. + const missingThemesLines = missingThemes.map(theme => `\t\tcase "${theme}": return "";`).join("\n"); + // dynamic imports file content const contentDynamic = function (lines) { return `// @ts-nocheck @@ -55,9 +63,9 @@ ${availableThemesArray} await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true }); return Promise.all([ - fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines)), - fs.writeFile(outputFileDynamicImportJSONAttr, contentDynamic(dynamicImportJSONAttrLines)), - fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)), + fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines.concat("\n", missingThemesLines))), + fs.writeFile(outputFileDynamicImportJSONAttr, contentDynamic(dynamicImportJSONAttrLines.concat("\n", missingThemesLines))), + fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines.concat("\n", missingThemesLines))), ]). then(() => { console.log("Generated themes JSON imports.");