Inject css code when building with esm format.

[lovetingyuan]

vite will not inject css code in your esm build js code. I have a plugin to solve this problem. Requires vite >= 2.9.0

import { extname } from 'path'

// vite wont inject css when build format is es
export default () => {
  return {
    name: 'inject-css-for-es-build',
    apply: 'build',
    enforce: 'post',
    config() {
      return {
        build: {
          cssCodeSplit: true
        }
      }
    },
    renderChunk(code, chunk, opt) {
      const { fileName, isEntry, isDynamicEntry, viteMetadata  } = chunk
      if (['.js', '.mjs', '.cjs'].includes(extname(fileName)) && opt.format === 'es' && (isEntry || isDynamicEntry) && viteMetadata) {
        return [...viteMetadata.importedCss].map((css) => `import "./${css}";`).join('\n') + code
      }
    }
  }
}