fix: importing unscoped style between multiple sfc's

packages/plugin-vue/src/main.ts

@@ -12,6 +12,7 @@ import {
   createDescriptor,
   getDescriptor,
   getPrevDescriptor,
+  getSrcDescriptor,
   setSrcDescriptor,
 } from './utils/descriptorCache'
 import {
@@ -434,13 +435,45 @@ async function genStyleCode(
   if (descriptor.styles.length) {
     for (let i = 0; i < descriptor.styles.length; i++) {
       const style = descriptor.styles[i]
+      let indexQuery = i
       if (style.src) {
-        await linkSrcToDescriptor(
-          style.src,
-          descriptor,
-          pluginContext,
-          style.scoped,
-        )
+        const resolvedSrc =
+          (await pluginContext.resolve(style.src, descriptor.filename))?.id ||
+          style.src
+        const alreadyDescriptor = getSrcDescriptor(resolvedSrc, {
+          scoped: style.scoped,
+          src: descriptor.id,
+        })
+
+        if (alreadyDescriptor) {
+          const foundIndex = await alreadyDescriptor.styles.reduce(
+            async (acc, { scoped, src }, index) => {
+              const prevRes = await acc
+
+              if (~prevRes) return prevRes
+              if (scoped !== style.scoped) return prevRes
+              if (!src) return prevRes
+
+              const _resolvedSrc =
+                (await pluginContext.resolve(src, alreadyDescriptor.filename))
+                  ?.id || src
+
+              if (_resolvedSrc !== resolvedSrc) return prevRes
+
+              return index
+            },
+            Promise.resolve(-1),
+          )
+
+          if (~foundIndex) indexQuery = foundIndex
+        } else {
+          await linkSrcToDescriptor(
+            style.src,
+            descriptor,
+            pluginContext,
+            style.scoped,
+          )
+        }
       }
       const src = style.src || descriptor.filename
       // do not include module in default query, since we use it to indicate
@@ -453,7 +486,7 @@ async function genStyleCode(
         : ''
       const directQuery = customElement ? `&inline` : ``
       const scopedQuery = style.scoped ? `&scoped=${descriptor.id}` : ``
-      const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}${scopedQuery}`
+      const query = `?vue&type=style&index=${indexQuery}${srcQuery}${directQuery}${scopedQuery}`
       const styleRequest = src + query + attrsQuery
       if (style.module) {
         if (customElement) {

playground/vue-custom-id/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-vue-custom-id",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/vue/src-import/SrcImport.vue

@@ -1,4 +1,8 @@
+<style src="/@/src-import/foo.css"></style>
+<style src="/@/src-import/bar.css"></style>
 <style src="/@/src-import/style.css" scoped></style>
 <style src="/@/src-import/style2.css" scoped></style>
+<style src="/@/src-import/style.css"></style>
+<style src="/@/src-import/style2.css"></style>
 <template src="./template.html"></template>
 <script src="./script.ts"></script>

playground/vue/src-import/script.ts

@@ -1,13 +1,17 @@
 import { defineComponent } from 'vue'
 import SrcImportStyle from './srcImportStyle.vue'
 import SrcImportStyle2 from './srcImportStyle2.vue'
+import SrcImportScopedStyle from './srcImportScopedStyle.vue'
+import SrcImportScopedStyle2 from './srcImportScopedStyle2.vue'
 import SrcImportModuleStyle from './srcImportModuleStyle.vue'
 import SrcImportModuleStyle2 from './srcImportModuleStyle2.vue'
 
 export default defineComponent({
   components: {
     SrcImportStyle,
     SrcImportStyle2,
+    SrcImportScopedStyle,
+    SrcImportScopedStyle2,
     SrcImportModuleStyle,
     SrcImportModuleStyle2,
   },

playground/vue/src-import/srcImportScopedStyle.vue

@@ -0,0 +1,7 @@
+<style src="/@/src-import/style.css" scoped></style>
+<template>
+  <div class="src-imports-script">{{ msg }}</div>
+</template>
+<script setup>
+const msg = 'hello from component A!'
+</script>

playground/vue/src-import/srcImportScopedStyle2.vue

@@ -0,0 +1,4 @@
+<style src="/@/src-import/style2.css" scoped></style>
+<template>
+  <div class="src-imports-style">This should be tan</div>
+</template>

playground/vue/src-import/srcImportStyle.vue

@@ -1,4 +1,5 @@
-<style src="/@/src-import/style.css" scoped></style>
+<style src="/@/src-import/style.css"></style>
+<style src="./style2.css"></style>
 <template>
   <div class="src-imports-script">{{ msg }}</div>
 </template>

playground/vue/src-import/srcImportStyle2.vue

@@ -1,4 +1,4 @@
-<style src="/@/src-import/style2.css" scoped></style>
+<style src="/@/src-import/style2.css"></style>
 <template>
   <div class="src-imports-style">This should be tan</div>
 </template>

playground/vue/src-import/template.html

@@ -3,5 +3,7 @@ <h2>SFC Src Imports</h2>
 <div class="src-imports-style">This should be tan</div>
 <SrcImportStyle></SrcImportStyle>
 <SrcImportStyle2></SrcImportStyle2>
+<SrcImportScopedStyle></SrcImportScopedStyle>
+<SrcImportScopedStyle2></SrcImportScopedStyle2>
 <SrcImportModuleStyle></SrcImportModuleStyle>
 <SrcImportModuleStyle2></SrcImportModuleStyle2>