Build unDynamicEntry SFC, the css does not inject

[LoveofRedMoon]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

In dev mode, it runs normally.
When build, it misses some css.

Reproduction

https://github.com/LoveofRedMoon/vite-build-css-error.git
or: https://prod.liveshare.vsengsaas.visualstudio.com/join?2E874AA8B27402C760D49A8AB6CF7B1A0A51
see localhost:3000(dev) localhost:8080(build-production)

System Info

• required vite version: 2.0.0-beta.3
• required Operating System: win10
• required Node version: 15
• Optional:
  • npm/yarn version 14
  • Installed vue version (from yarn.lock or package-lock.json) 3.0.5
  • Installed @vue/compiler-sfc version

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

vite:config bundled config file loaded in 326ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     base: '/',
  vite:config     target: 'es2015',
  vite:config     outDir: 'runtime/dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     manifest: false,
  vite:config     lib: false
  vite:config   },
  vite:config   alias: [
  vite:config     {
  vite:config       find: /^\/@vite\//,
  vite:config       replacement: 'D:\\project\\demo17\\node_modules\\vite\\dist\\client/'
  vite:config     },
  vite:config     { find: '/@', replacement: 'D:\\project\\demo17\\src' }
  vite:config   ],
  vite:config   esbuild: { jsxFactory: 'h', jsxFragment: 'Fragment' },
  vite:config   css: { preprocessorOptions: { less: [Object] } },
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'versionPlugin',
  vite:config     'skipServiceWorker',
  vite:config     'vite:css-post',
  vite:config     'commonjs',
  vite:config     'vite:build-html',
  vite:config     'vite:define',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:size'
  vite:config   ],
  vite:config   mode: 'production',
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   configPath: '/project/demo17/vite.config.ts',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     mode: 'production',
  vite:config     logLevel: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/project/demo17',
  vite:config   command: 'build',
  vite:config   isProduction: true,
  vite:config   optimizeCacheDir: '\\project\\demo17\\node_modules\\.vite',
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   transformInclude: [Function: transformInclude],
  vite:config   logger: {
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   }
  vite:config } +4ms
building for production...
[write] assets\iconfont.296d28a8.eot 4.12kb
[write] assets\iconfont.c330516e.svg 13.85kb
[write] assets\index.251ebad0.js 106.30kb, brotli: 34.99kb
[write] assets\Example.cc46ddc8.js 0.95kb, brotli: 0.46kb
[write] assets\PCard.e8a66b19.js 0.69kb, brotli: 0.38kb
[write] assets\PTabs.15e39757.js 1.12kb, brotli: 0.57kb
[write] assets\PScroll.056f8b20.js 3.27kb, brotli: 1.07kb
[write] assets\Component.1064a60d.js 0.91kb, brotli: 0.44kb
[write] assets\Alert.610cdce9.js 3.40kb, brotli: 1.29kb
[write] assets\PTable.7426f22a.js 1.91kb, brotli: 0.78kb
[write] assets\Button.f3ce88eb.js 3.11kb, brotli: 1.05kb
[write] assets\Card.af841d53.js 1.98kb, brotli: 0.81kb
[write] assets\Checkbox.a78f0142.js 4.13kb, brotli: 1.29kb
[write] assets\PCheckbox.ab3a9e16.js 2.18kb, brotli: 0.91kb
[write] assets\Collapse.082196e6.js 6.43kb, brotli: 2.21kb
[write] assets\Divider.c03f8b38.js 1.80kb, brotli: 0.71kb
[write] assets\Icon.bbcd636f.js 2.04kb, brotli: 0.83kb
[write] assets\Input.f032f44b.js 4.03kb, brotli: 1.50kb
[write] assets\InputNumber.2b5d6fbf.js 3.06kb, brotli: 1.11kb
[write] assets\PInputNumber.5e98a6f7.js 2.75kb, brotli: 1.22kb
[write] assets\Loading.0e4a188b.js 2.98kb, brotli: 1.13kb
[write] assets\DatePicker.7ecf5b14.js 10.63kb, brotli: 3.39kb
[write] assets\slide.b2fecb13.js 0.00kb, brotli: 0.00kb
[write] assets\Pagination.ce83d73e.js 7.46kb, brotli: 2.28kb
[write] assets\PSelect.e503568a.js 2.20kb, brotli: 1.03kb
[write] assets\PlainButton.5e742727.js 2.70kb, brotli: 1.03kb
[write] assets\Radio.3337871d.js 5.28kb, brotli: 1.76kb
[write] assets\Repeat.03f74308.js 4.93kb, brotli: 2.01kb
[write] assets\Scroll.56352893.js 3.37kb, brotli: 1.19kb
[write] assets\Select.835297be.js 2.75kb, brotli: 1.04kb
[write] assets\Sort.30929577.js 7.25kb, brotli: 2.69kb
[write] assets\Switch.3fda553f.js 4.79kb, brotli: 1.50kb
[write] assets\Table.2db4b222.js 5.21kb, brotli: 1.72kb
[write] assets\Tabs.923df1a1.js 2.25kb, brotli: 1.00kb
[write] assets\Text.148c8a0e.js 1.68kb, brotli: 0.70kb
[write] assets\Title.aec51bde.js 1.58kb, brotli: 0.66kb
[write] assets\Upload.15145f8b.js 3.56kb, brotli: 1.48kb
[write] assets\Directive.ed967a13.js 0.92kb, brotli: 0.45kb
[write] assets\ClickOutSide.4de9ae97.js 1.50kb, brotli: 0.75kb
[write] assets\Wave.cdcef2f3.js 1.90kb, brotli: 0.86kb
[write] assets\NoFocus.3e5e2bf8.js 1.24kb, brotli: 0.60kb
[write] assets\Plugin.6c3fc800.js 0.91kb, brotli: 0.45kb
[write] assets\PluginAlert.2c27a3ff.js 3.60kb, brotli: 1.56kb
[write] assets\PluginToast.b6532c8d.js 3.80kb, brotli: 1.62kb
[write] assets\CSS.b46d5de2.js 2.60kb, brotli: 0.96kb
[write] assets\index.e1fbfacb.css 16.78kb, brotli: 8.64kb
[write] assets\PCard.e31de65f.css 0.81kb, brotli: 0.31kb
[write] assets\PTabs.df46f8ec.css 0.59kb, brotli: 0.17kb
[write] assets\PScroll.90ccec51.css 0.59kb, brotli: 0.16kb
[write] assets\PTable.094dcce6.css 0.81kb, brotli: 0.26kb
[write] assets\PCheckbox.f216ce09.css 0.44kb, brotli: 0.15kb
[write] assets\PInputNumber.1e2c7113.css 0.83kb, brotli: 0.24kb
[write] assets\slide.b4bc0a39.css 0.14kb, brotli: 0.08kb
[write] assets\PSelect.0917f843.css 1.12kb, brotli: 0.30kb
[write] index.html 0.40kb

Only place where put link element is generateBundle and it's only for index.html
other css which have no faceModuleId will be ignored instead of inject in js

One way to solve this is :
modify vite/src/plugins/css.ts line: 220 to the following to inject css in SFC-js

        if (chunk.isDynamicEntry) {
          const placeholder = `__VITE_CSS__`
          code =
            `let ${placeholder} = document.createElement('style');` +
            `${placeholder}.innerHTML = ${JSON.stringify(chunkCSS)};` +
            `document.head.appendChild(${placeholder});` +
            code
        } else {
          // for normal entry chunks, emit corresponding css file
          const fileHandle = this.emitFile({
            name: chunk.name + '.css',
            type: 'asset',
            source: chunkCSS
          })
          /* add */
          const placeholder = `__VITE_CSS__`
          code =
            `let ${placeholder} = document.createElement('link');` +
            `${placeholder}.ref = 'stylesheet';` +
            `${placeholder}.href = '${config.build.base}${this.getFileName(fileHandle)}';` +
            `document.head.appendChild(${placeholder});` +
            code
          /* add */
          chunkToEmittedCssFileMap.set(chunk, fileHandle)
        }

The following is one chunk I print in console with null faceModuleId, and this css did not inject in assets/PScroll.729023c1.js

{
  exports: [ '_' ],
  facadeModuleId: null,
  isDynamicEntry: false,
  isEntry: false,
  isImplicitEntry: false,
  modules: [Object: null prototype] {
    '/project/jspop/operating-platform-front/src/components/PScroll.vue?vue&type=script&lang.ts': {
      originalLength: 5375,
      removedExports: [],
      renderedExports: [Array],
      renderedLength: 4165
    },
    '/project/jspop/operating-platform-front/src/components/PScroll.vue?vue&type=style&index=0&lang.less': {
      originalLength: 755,
      removedExports: [],
      renderedExports: [Array],
      renderedLength: 871
    },
    '/project/jspop/operating-platform-front/src/components/PScroll.vue': {
      originalLength: 7228,
      removedExports: [],
      renderedExports: [Array],
      renderedLength: 1838
    }
  },
  name: [Getter],
  type: 'chunk',
  code: undefined,
  dynamicImports: [],
  fileName: 'assets/PScroll.729023c1.js',
  implicitlyLoadedBefore: [],
  importedBindings: {
    'assets/index.e202a64d.js': [
      'd', 'm', 'c', 'h',
      'n', 'p', 'q', 'o',
      'b', 'e', 'g', 's'
    ]
  },
  imports: [ 'assets/index.e202a64d.js' ],
  map: undefined,
  referencedFiles: []
}

[LoveofRedMoon]

@yyx990803 I am happy to get your attention, but the css does not inject as well
from html chunk, other chunks all import from chunk.dynamicImports not chunk.imports
For example, PScroll.vue is import async, when build, PScroll.js and PScroll.css created, but PScroll.css does not inject in PScroll.js, so when PScroll.js imported, PScroll.css does not import.

so, what i can support is inject these css files in PScroll.js with

const __VITE_CSS__ = document.createElement('link')
__VITE_CSS__.rel = 'stylesheet'
__VITE_CSS__ .href = '...........'
document.body.append(__VITE_CSS__ )