CSS not being imported in vite single spa root app

Question

I am migrating my CRA + Craco microfrontend app to vite using vite-plugin-single-spa. I have converted the root app as well in vite using the same plugin.

The problem I am facing is css is not being imported when loading my microfrontend into the root app with default built settings.

Root app vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import vitePluginSingleSpa from "vite-plugin-single-spa";

export default defineConfig({
  plugins: [
    react(),
    vitePluginSingleSpa({
      type: "root",
      imo: "2.4.2",
    }),
  ],
});

Microfrontend vite.config.js

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import vitePluginSingleSpa from "vite-plugin-single-spa";
import tsconfigPaths from "vite-tsconfig-paths";

export default ({ mode }) => {
  // load app-level env vars to node-level env vars.
  process.env = { ...process.env, ...loadEnv(mode, process.cwd() )};

  return defineConfig({
    plugins: [
      react(),
      tsconfigPaths(),
      vitePluginSingleSpa({
        type: "mife",
        serverPort: 4101,
        spaEntryPoints: "src/spa.jsx",
        projectId: 'mifeA',
        cssStrategy: 'singleMife',
      }),
    ],
    base: process.env.VITE_BASE_URL
  });
}

microfrontend spa entry point src/spa.jsx

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import singleSpaReact from 'single-spa-react';
import { cssLifecycleFactory } from 'vite-plugin-single-spa/ex';

import App from './App'

const lc = singleSpaReact({
    React,
    ReactDOMClient,
    rootComponent: App,
    errorBoundary() {
        return <div>Error</div>
    }
});

const cssLc = cssLifecycleFactory('spa');
export const bootstrap = [cssLc.bootstrap, lc.bootstrap];
export const mount = [cssLc.mount, lc.mount];
export const unmount = [cssLc.unmount, lc.unmount];

The interesting thing is when I am adding this piece in the vite.config.js file, css does get imported in the root app. The difference I see is the default build settings divide the js and css files in chunks, whereas this build configs, builds the app in a single js file and a single css file.

build: {
   rollupOptions: {
     output: {
          manualChunks: undefined,
          inlineDynamicImports: true,
     }
  }
}

Another solution I found was using vite-plugin-css-injected-by-js this plugin which injects all css into js files.

Though I have found couple of solutions, Ideally I would like to stick to css and chunks of js. Any suggestion or help would be appreciated. Thanks!

PS: I didn't find any tag related to vite-single-plugin-spa. If anyone with 1500+ reputations can create a new tag, it would help reach this question to correct community members