when outfile format cjs,vue style lose from dynamic import

[Veiintc]

Describe the bug

vitejs/vite#3101 had fixed for es，but cjs not
and How can I clean b_vue_vue_type_style_index_0_scoped_true_lang?

Reproduction

https://github.com/Veiintc/vite-cjs-csslose.git

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 2.98 GB / 15.83 GB
  Binaries:
    Node: 14.6.0 - D:\Program Files\nodejs\node.EXE
    npm: 6.14.6 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.64)
    Internet Explorer: 11.0.19041.1

Used Package Manager

npm

Logs

vite:config bundled config file loaded in 153ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { output: [Object] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     minify: false,
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'asset-import-meta-url',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: 'D:/Program Files/test/vite-preload-dep/vite.config.js',
  vite:config   configFileDependencies: [ 'vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: 'D:/Program Files/test/vite-preload-dep',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: 'D:\\Program Files\\test\\vite-preload-dep\\public',
  vite:config   cacheDir: 'D:\\Program Files\\test\\vite-preload-dep\\node_modules\\.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +8ms

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[Shinigami92]

@Veiintc Do you ask for a help wanted label? Or do you want to try to tackle it on your own?

[Veiintc]

Is this a low priority issue？

[Shinigami92]

Is this a low priority issue？

I'm not sure right now. I'm not as deep into it and know what is happening here, so I cannot assign a label like p3 or p4 or p5.
So until no other team member comes along this issue you are waiting on the community to take any action.
Please note that the vite team itself doesn't fix any bugs directly unless it is a really high prio. We are more moderators and try to help the community to fix and implement stuff with e.g. reviews and suggestions.

[KamilOcean]

Is this a low priority issue？

Hi, @Veiintc can you explain an expected behaviour, please? Do you expect "CJS" CommonJS module to be in your build or what? And why you marked the CSS file on your screenshot?

Thanks a lot

[Veiintc]

Is this a low priority issue？

Hi, @Veiintc can you explain an expected behaviour, please? Do you expect "CJS" CommonJS module to be in your build or what? And why you marked the CSS file on your screenshot?

Thanks a lot

it seems my description is not accurate enough，
like 3101,when format cjs,I will lose vue style
and I can not find anywhere had import this css file

[KamilOcean]

@Veiintc gotta. I think I get you. I opened your reproduction repo. As I understand you can't find styles from your common.module.less file in your prod build??

If I get you right and it is.

So, you don't include your CSS module file in your project and the needed styles will NOT be in your prod build. Now they are unused and they don't have to be in your build. They are not in the module graph.

I added this script line in your component b.vue

<template>
  <h2>Scan Deps from &lt;script setup lang=ts&gt; blocks</h2>
  <div class="scan">{{ typeof debounce === 'function' ? 'ok' : 'error' }}</div>
</template>

<script>
import classes from './common.module.less'
</script>

<style lang="less" scoped>
.scan{
  color: blue;
}

</style>

And now I can see the needed styles in my final production build by executing the command yarn build

._root_xlv1v_1 {
  color: red;
}
.scan[data-v-4e39fff2] {
  color: blue;
}

[Veiintc]

@Veiintc gotta. I think I get you. I opened your reproduction repo. As I understand you can't find styles from your file in your prod build??common.module.less

If I get you right and it is.

So, you don't include your CSS module file in your project and the needed styles will NOT be in your prod build. Now they are unused and they don't have to be in your build. They are not in the module graph.

I added this script line in your component b.vue

<template>
  <h2>Scan Deps from &lt;script setup lang=ts&gt; blocks</h2>
  <div class="scan">{{ typeof debounce === 'function' ? 'ok' : 'error' }}</div>
</template>

<script>
import classes from './common.module.less'
</script>

<style lang="less" scoped>
.scan{
  color: blue;
}

</style>

And now I can see the needed styles in my final production build by executing the command yarn build

._root_xlv1v_1 {
  color: red;
}
.scan[data-v-4e39fff2] {
  color: blue;
}

Thank you for your reply，
But the problem is that the blue style has not been introduced
Although the file was generated, it was not introduced

[Veiintc]

and when at vite 2.1.5,it will create style label

[KamilOcean]

and when at vite 2.1.5,it will create style label

I have Vite 2.4.2 and I see applied styles

[Veiintc]

are you format cjs?
if you format es ,It had fixed

[KamilOcean]

are you format cjs?
if you format es ,It had fixed

Man, I just run your project, that you provided. Where is the file in CJS format? I don't understand

[Veiintc]

are you format cjs?
if you format es ,It had fixed

Man, I just run your project, that you provided. Where is the file in CJS format? I don't understand

are you run dev ?
build outfile format cjs,it not run in browser。