added multi entryfiles for content-ui + internalize tailwindcss bundle

packages/hmr/lib/plugins/tailwind-bundler.ts

@@ -0,0 +1,28 @@
+import { Plugin } from 'vite';
+import fs from 'fs/promises';
+import path from 'path';
+import postcss from 'postcss';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+import postcssImport from 'postcss-import';
+
+export function processCssPlugin(): Plugin {
+    return {
+      name: 'process-css',
+      async configResolved(config) {
+        const inputFile = path.resolve(__dirname, '../../../../ui/lib/global.css');
+        const outputFile = path.resolve(__dirname, '../../../../ui/dist/global-out.css');
+
+        const css = await fs.readFile(inputFile, 'utf-8');
+        const result = await postcss([
+          postcssImport(),
+          tailwindcss,
+          autoprefixer,
+        ]).process(css, { from: inputFile, to: outputFile });
+        await fs.mkdir(path.dirname(outputFile), { recursive: true });
+
+        await fs.writeFile(outputFile, result.css);
+        console.log('CSS processed and saved to', outputFile);
+      }
+    };
+}

pages/content-ui/vite.config.mts

@@ -1,24 +1,72 @@
 import { resolve } from 'node:path';
 import { makeEntryPointPlugin } from '@extension/hmr';
 import { isDev, withPageConfig } from '@extension/vite-config';
+import { readdirSync, existsSync, mkdirSync, writeFileSync, Dirent } from 'fs';
+import { processCssPlugin } from '@extension/hmr';
 
 const rootDir = resolve(__dirname);
 const srcDir = resolve(rootDir, 'src');
 
+const getEntryPoints = (options: { include?: string[], exclude?: string[], createRecursively?: boolean }) => {
+  const entryPoints: Record<string, string> = {};
+
+  const foldersToProcess = options.include ||
+    readdirSync(srcDir, { withFileTypes: true })
+      .filter((item): item is Dirent => item.isDirectory())
+      .map(item => item.name);
+
+  foldersToProcess.forEach(folderName => {
+    const shouldExclude = options.exclude && options.exclude.includes(folderName);
+
+    if (!shouldExclude) {
+      const entryFolder = resolve(srcDir, folderName);
+      const entryFileTS = resolve(entryFolder, 'index.ts');
+      const entryFileTSX = resolve(entryFolder, `${folderName}.tsx`);
+
+      if (!existsSync(entryFolder) && options.createRecursively) {
+        console.log('Creating folder', entryFolder);
+        mkdirSync(entryFolder, { recursive: true });
+        writeFileSync(entryFileTS, `export * from "./${folderName}.tsx";`);
+        writeFileSync(entryFileTSX, '');
+      }
+
+      if (existsSync(entryFolder)) {
+        entryPoints[folderName] = entryFileTS;
+      } else {
+        console.warn(`Folder "${folderName}" does not exist and was not created.`);
+      }
+    }
+  });
+
+  return entryPoints;
+}
+/**
+ * Here is the place to add new entry points, u can straight away add new folders here to include
+ * without creating folders in src dir manually.
+ * @param {string[]} options.include - Folders to include !!MODIFY ME!!
+ * @param {string[]} options.exclude - Folders to exclude !!MODIFY ME!!
+ * @param {boolean} options.createRecursively - Create folders recursively
+ * @returns {Record<string, string>}
+ */
+const entryPoints = getEntryPoints({ 
+  include: ['page1', 'page2'], createRecursively: true 
+});
+
 export default withPageConfig({
   resolve: {
     alias: {
       '@src': srcDir,
     },
   },
-  plugins: [isDev && makeEntryPointPlugin()],
+  plugins: [processCssPlugin()],
   publicDir: resolve(rootDir, 'public'),
   build: {
     lib: {
-      entry: resolve(srcDir, 'index.tsx'),
+      entry: entryPoints,
       name: 'contentUI',
-      formats: ['iife'],
-      fileName: 'index',
+      formats: ['es'],
+      fileName: (format, entryName) =>
+        isDev ? `${entryName}/index_dev.js` : `${entryName}/index.js`
     },
     outDir: resolve(rootDir, '..', '..', 'dist', 'content-ui'),
   },