Improve theming by generating a distinct css file for each theme (#271)

* build separate css file for each theme

Author: radubrehar

examples/src/pages/tests/table/utils/ListRowManager.spec.ts

@@ -14,6 +14,7 @@ const createRow = (node?: string): ListRowInterface => {
     getNode: () => node,
     destroy: () => {},
     onMount: () => {},
+    isMounted: () => true,
     debugId: 'test',
     ref: () => {},
   };

source/package.json

@@ -30,13 +30,14 @@
   "module": "index.mjs",
   "typings": "index.d.ts",
   "scripts": {
-    "build": "INFINITE_OUT_FOLDER=${INFINITE_OUT_FOLDER:=$npm_package_config_outdir} npm-run-all -s rm-out-folder tsc esbuild generate-dts-file update-md copy-license-and-readme",
+    "build": "INFINITE_OUT_FOLDER=${INFINITE_OUT_FOLDER:=$npm_package_config_outdir} npm-run-all -s rm-out-folder tsc esbuild esbuild-theming generate-dts-file update-md copy-license-and-readme",
     "rm-out-folder": "rimraf $INFINITE_OUT_FOLDER",
     "copy-license-and-readme": "cp LICENSE.md ./$INFINITE_OUT_FOLDER && cp ../README.md ./$INFINITE_OUT_FOLDER",
     "watch": "npm run esbuild && npm run generate-dts-file && concurrently \"npm run esbuild-watch\" \"npm run generate-dts-file-watch\"",
     "rollup-types": "rollup -c rollup.config.js",
     "update-md": "npm run --prefix .. doctoc",
     "esbuild": "tsup --config dev-bundle.tsup.config.ts && tsup",
+    "esbuild-theming": "tsup --config tsup-theming.config.ts",
     "esbuild-watch": "tsup --watch",
     "esbuild-deepmap": "npm run esbuild-deepmap-esm && npm run esbuild-deepmap-cjs",
     "esbuild-deepmap-esm": "node run-build-deepmap.js esm",

source/src/components/InfiniteTable/theming.css.ts

@@ -1,5 +1,5 @@
 import './theme-default.css';
-import './theme-minimalist.css';
-import './theme-ocean.css';
-import './theme-balsam.css';
-import './theme-shadcn.css';
+// import './theme-minimalist.css';
+// import './theme-ocean.css';
+// import './theme-balsam.css';
+// import './theme-shadcn.css';

source/src/generate-theme-balsam.ts

@@ -0,0 +1 @@
+import './components/InfiniteTable/theme-balsam.css';

source/src/generate-theme-default.ts

@@ -0,0 +1 @@
+import './components/InfiniteTable/theme-default.css';

source/src/generate-theme-minimalist.ts

@@ -0,0 +1 @@
+import './components/InfiniteTable/theme-minimalist.css';

source/src/generate-theme-ocean.ts

@@ -0,0 +1 @@
+import './components/InfiniteTable/theme-ocean.css';

source/src/generate-theme-shadcn.ts

@@ -0,0 +1 @@
+import './components/InfiniteTable/theme-shadcn.css';

source/tsup-theming.config.ts

@@ -0,0 +1,43 @@
+import { defineConfig, Options } from 'tsup';
+
+// @ts-ignore
+import packageJSON from './package.json';
+
+import fs from 'fs';
+
+import { vanillaConfig } from './tsup-vanilla-extract-config';
+
+const { config } = packageJSON;
+const outDir = config.outdir + '/theme/';
+
+export const tsupConfig: Options = {
+  entry: {
+    balsam: './src/generate-theme-balsam.ts',
+    default: './src/generate-theme-default.ts',
+    minimalist: './src/generate-theme-minimalist.ts',
+    ocean: './src/generate-theme-ocean.ts',
+    shadcn: './src/generate-theme-shadcn.ts',
+  },
+
+  tsconfig: './tsconfig.build.json',
+  outDir,
+  bundle: true,
+  clean: false,
+
+  onSuccess: async () => {
+    // remove all non-css files from the theme folder
+    fs.readdirSync(outDir).forEach((file) => {
+      if (!file.endsWith('.css')) {
+        fs.unlinkSync(outDir + '/' + file);
+      } else {
+        console.log('Generated ' + file);
+      }
+    });
+
+    console.log('Files generated in ' + outDir + ' folder');
+  },
+
+  esbuildPlugins: [vanillaConfig],
+};
+
+export default defineConfig(tsupConfig);

source/tsup-vanilla-extract-config.ts

@@ -0,0 +1,17 @@
+import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
+
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+
+async function processCss(css) {
+  const result = await postcss([autoprefixer]).process(css, {
+    from: undefined /* suppress source map warning */,
+  });
+
+  return result.css;
+}
+
+export const vanillaConfig = vanillaExtractPlugin({
+  processCss,
+  identifiers: 'short',
+});