Vite Config for Spefic TS and CSS File Compilation in specific relative folders

Question

I have a project that is structured like this (a shopify app)

extensions/
├─ checkout/
├─ theme-foo/
│  ├─ assets/
│  │  ├─ foo.min.js
│  │  ├─ asset.png
├─ theme-baz/
│  ├─ assets/
│  │  ├─ baz.min.js/
│  │  ├─ styles.css
extensions.source/
├─ theme-foo/
│  ├─ assets/
│  │  ├─ foo.ts
├─ theme-baz/
│  ├─ assets/
│  │  ├─ baz.ts
unrelated/
├─ untouchedFile.ts
vite.config.ts
vite.config.theme.ts

We want to have an extra vite config that spins up a watch process to do a spefific real-time minfication/source-map of ts and css files but we are failing at the moment.

Here's what we need:

Vite will be reading files and folders in the extensions.source directory and will map them to the extensions directory.

Here's some guidelines:

1. Only folders that start with theme- should be taken into consideration (it should ignore anything else, so there shouldn't be any actions done in the checkout folder.
2. ts files get compiled to js files minified and also a source map should be included (knowing that the browser receiving the min.js file will not have access to the origina ts file)
3. The other files shouldn't be touched, so if the assets folder already includes an image or anything else, etc, it shouldnt delete it, only replace whichever file matches the ts/css file in the extensions.source folder
4. Other folders should remain untoched and not even considered by this process (for example the unrelated folder.

We have the following (from chatgpt) but it's not working, we seem to not understand the process that well.

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  root: path.resolve(__dirname, 'extensions.source'), // Set root directory to extensions.source
  build: {
    outDir: '../extensions', // Adjust outDir path accordingly
    minify: 'terser',
    terserOptions: {
      // Specify terser options here
    },
    target: 'es2015',
    rollupOptions: {
      input: {}, // Set input to an empty object to avoid specifying an HTML entry file
    },
  },
  optimizeDeps: {
    include: ['theme-*/*.{ts,css}'],
  },
  plugins: [
    {
      name: 'compile-typescript',
      apply: 'build',
      transform(src, id) {
        const themeFolder = path.dirname(id);
        const themeName = path.basename(themeFolder);

        if (!themeName.startsWith('theme-')) {
          return null;
        }

        if (id.endsWith('.ts')) {
          return {
            code: require('typescript').transpileModule(src, {
              compilerOptions: {
                module: require('typescript').ModuleKind.CommonJS,
                sourceMap: true,
              },
            }).outputText,
            map: null,
          };
        }

        return null;
      },
    },
    {
      name: 'minify-css',
      apply: 'build',
      transform(src, id) {
        if (id.endsWith('.css')) {
          return require('css-minimizer').minify(src);
        }
        return null;
      },
    },
  ],
});

Are we totally misunderstand this? How do we approach this? We already have a vite config and we want to run this as a separate process side-by-side