Import the same style file with scoped attribute

[slynx-01]

Describe the bug

When importing the same file into different vue components apply only to one

Reproduction

git clone https://github.com/slynx-01/vite-css-trouble.git
npm i
npm run dev
look at browser

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 Intel(R) Core(TM) i9-9900KS CPU @ 4.00GHz
    Memory: 34.95 GB / 63.92 GB
  Binaries:
    Node: 16.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.21.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.30)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

npm

Logs

vite:config bundled config file loaded in 83.44ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-script-proxy',
  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     'vite:asset-import-meta-url',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  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     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: 'E:/tmp/my-vue-app/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: 'E:/tmp/my-vue-app',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: 'E:\\tmp\\my-vue-app\\public',
  vite:config   cacheDir: 'E:\\tmp\\my-vue-app\\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     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   }
  vite:config } +4ms
vite v2.6.13 building for production...
✓ 18 modules transformed.
dist/assets/logo.03d6d6da.png    6.69 KiB
dist/index.html                  0.48 KiB
dist/assets/index.c6b54b8f.js    2.24 KiB / gzip: 1.13 KiB
dist/assets/index.3a79ec5c.css   0.25 KiB / gzip: 0.20 KiB
dist/assets/vendor.ff6604eb.js   49.54 KiB / gzip: 19.90 KiB

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Follow our Code of Conduct
• 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.
• The provided reproduction is a minimal reproducible example of the bug.

[btea]

I found that the reason for this problem is because the descriptor is cached by filename.

If the filename is the same, the subsequent descriptor will overwrite the previous cache. Therefore, when getting the descriptor content, the previous scoped id does not match.

I haven't found an effective solution. Do you have any good solutions?

vite/packages/plugin-vue/src/utils/descriptorCache.ts

Lines 69 to 71 in d788682

	export function setDescriptor(filename: string, entry: SFCDescriptor): void {
	cache.set(filename, entry)
	}

[slynx-01]

I found that the reason for this problem is because the descriptor is cached by filename.

If the filename is the same, the subsequent descriptor will overwrite the previous cache. Therefore, when getting the descriptor content, the previous scoped id does not match.

I haven't found an effective solution. Do you have any good solutions?

vite/packages/plugin-vue/src/utils/descriptorCache.ts

Lines 69 to 71 in d788682

	export function setDescriptor(filename: string, entry: SFCDescriptor): void {
	cache.set(filename, entry)
	}

It might be worth thinking about not adding to the cache here if scoped is used, or adding the hash path to the component to the filename

vite/packages/plugin-vue/src/main.ts

Line 311 in d788682

await linkSrcToDescriptor(style.src, descriptor, pluginContext)

[btea]

rel #5977