Alternatives to libInjectCss from vite-plugin-lib-inject-css

Question

I'm on the process of building a Vite application and I can see that the build generates three files which are significantly big.

• myProject.js 37kb
• myProject.umd.js 3671kb
• main.css 3657kb

This is part of a migration of a project that used to use webpack, which the generation of such files would be:

• index.js 4kb (with embedded styles)
• index.map.js 10kb

Furthermore, I've seen that in order to use the main.css there's this plugin (which makes the .umd file absurdly bigger)

Is there some setting that I'm missing?

My package.json and its dependencies:

{
  "name": "my-project",
  "version": "0.0.3",
  "type": "module",
  "main": "./dist/heading.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "peerDependencies": {
    "prop-types": "15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.2.0"
  },
  "dependencies": {
    "classnames": "^2.3.1"
  }
}

I tried the following vite.config.js setup:

import { defineConfig } from 'vite'
import path from 'path'
import react from '@vitejs/plugin-react'
import { libInjectCss } from 'vite-plugin-lib-inject-css';

export default defineConfig({
  plugins: [
    react(),
    libInjectCss()
  ],
  css: {
    cssPreprocessOptions: {
      includePaths: [
        './src',
        '../../styling',
      ]
    }
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/main.jsx'),
      name: 'my-project'
    },
    rollupOptions: {
      external: [
        'classnames',
        'prop-types',
        'react-dom',
        'react',
        '@types/react',
        '@types/react-dom',
        '@vitejs/plugin-react',
        'eslint',
        'eslint-plugin-react',
        'eslint-plugin-react-hooks',
        'eslint-plugin-react-refresh',
        'vite',
      ],
      output: {
        exports: "named",
        globals: {
          classnames: 'umd classnames',
          'prop-types': 'umd prop-types',
          'react-dom': 'umd react-dom',
          react: 'umd react',
          '@types/react': 'umd @types/react',
          '@types/react-dom': 'umd @types/react-dom',
          '@vitejs/plugin-react': 'umd @vitejs/plugin-react',
          'eslint': 'umd eslint',
          'eslint-plugin-react': 'umd eslint-plugin-react',
          'eslint-plugin-react-hooks': 'umd eslint-plugin-react-hooks',
          'eslint-plugin-react-refresh': 'umd eslint-plugin-react-refresh',
          'vite': 'umd vite',
        }
      }
    },
  },
  resolve: {
    alias: {
      '@packages': path.resolve(__dirname, '../../packages'),
      '@shared': path.resolve(__dirname, '../../shared'),
      'styling': path.resolve(__dirname, '../../styling'),
    }
  },
})