Option to inline CSS (global or modules) - build.inlineCss

[kimsible]

Clear and concise description of the problem

Hi,

I'm using Vite for an app plugin. The plugin need to dist bundles of modules JS and CSS files to run in the app environment.
So I must use the build.lib option and build.watch with an outDir out of the project root for development.

I use the Rollup plugin livereload for js files, it's work pretty nice but unfortunately the CSS files are merged in a global css file outside of the plugin directory at the installation.

So the only way to develop CSS in live would be to inline them. I use CSS modules automatically bundled on build mode.

So CSS modules are well watched by Rollup but in this case it's useless since the CSS can't be reload by the main app.

Suggested solution

An option build.inlineCss: false | true (default to false) to inject it in the document.head with Javascript instead of creating the bundle.

Alternative

If there are any other solution for example with Rollup, I'm open to suggestions.

Or maybe I have a wrong approach of Vite.js, the initial problem was that the architecture of these plugins are considered as a library for Vite since there is no entry file index.html or main.js.

I found that issue #4454, it's not really the same problem but it raises the lack flexibility for assets (css included) on library mode.

Additional context

Here is the vite.config.js

https://github.com/kimsible/peertube-plugin-upload-limits/blob/master/vite.config.js

import { resolve } from 'path'
import { loadEnv } from 'vite'
import pkg from './package.json'
import livereload from 'rollup-plugin-livereload'
import copy from 'rollup-plugin-copy'

// npx vite build -m development - build and watch without minifying in PeerTube environment
// npx vite build -m staging - build without minifying
// npx vite build [-m production] - build and minify

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), 'PEERTUBE_')
  const buildPeerTubeDistPath = () => env.PEERTUBE_PATH && resolve(env.PEERTUBE_PATH, `./storage/plugins/node_modules/${pkg.name}/`)

  return {
    build: {
      outDir: resolve(buildPeerTubeDistPath() || './', 'dist'),
      watch: mode === 'development',
      minify: mode === 'production' && 'terser',
      lib: {
        entry: 'client/common-client-plugin.js',
        name: pkg.name,
        formats: ['es'],
        fileName: () => 'common-client-plugin.js'
      },
      commonjsOptions: {
        include: ['./helpers/shared-helpers.js', './helpers/client-helpers.js'] // Keep commonjs for helpers
      },
      rollupOptions: {
        output: {
          chunkFileNames: 'assets/[name].js',
          assetFileNames: 'assets/[name][extname]'
        }
      }
    },
    plugins: [
      mode === 'development' && livereload(),
      copy({
        copyOnce: true,
        flatten: true,
        hook: 'writeBundle',
        targets: [
          { src: 'node_modules/mediainfo.js/dist/MediaInfoModule.wasm', dest: 'dist/assets/static' }
        ]
      })
    ]
  }
}

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

Closing as it is a duplicate of #1579.
But I think this could be solved by https://github.com/thgh/rollup-plugin-livereload#options.