From 0be05e50f8d4553b38052b608aa8a8f9158b01a5 Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Sat, 7 May 2022 20:49:26 +0800
Subject: [PATCH 1/5] test: same file but load two times

---
 packages/playground/vue/src-import/css.module.css          | 7 +++++++
 packages/playground/vue/src-import/script.ts               | 6 +++++-
 .../playground/vue/src-import/srcImportModuleStyle.vue     | 4 ++++
 .../playground/vue/src-import/srcImportModuleStyle2.vue    | 4 ++++
 packages/playground/vue/src-import/template.html           | 2 ++
 5 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 packages/playground/vue/src-import/css.module.css
 create mode 100644 packages/playground/vue/src-import/srcImportModuleStyle.vue
 create mode 100644 packages/playground/vue/src-import/srcImportModuleStyle2.vue

diff --git a/packages/playground/vue/src-import/css.module.css b/packages/playground/vue/src-import/css.module.css
new file mode 100644
index 00000000000000..09b5c09fb637e2
--- /dev/null
+++ b/packages/playground/vue/src-import/css.module.css
@@ -0,0 +1,7 @@
+.one {
+  background: yellow;
+}
+
+.two {
+  border: solid 1px red;
+}
diff --git a/packages/playground/vue/src-import/script.ts b/packages/playground/vue/src-import/script.ts
index 54e6e35db41f46..d20c098a7af289 100644
--- a/packages/playground/vue/src-import/script.ts
+++ b/packages/playground/vue/src-import/script.ts
@@ -1,11 +1,15 @@
 import { defineComponent } from 'vue'
 import SrcImportStyle from './srcImportStyle.vue'
 import SrcImportStyle2 from './srcImportStyle2.vue'
+import SrcImportModuleStyle from './srcImportModuleStyle.vue'
+import SrcImportModuleStyle2 from './srcImportModuleStyle2.vue'
 
 export default defineComponent({
   components: {
     SrcImportStyle,
-    SrcImportStyle2
+    SrcImportStyle2,
+    SrcImportModuleStyle,
+    SrcImportModuleStyle2
   },
   setup() {
     return {
diff --git a/packages/playground/vue/src-import/srcImportModuleStyle.vue b/packages/playground/vue/src-import/srcImportModuleStyle.vue
new file mode 100644
index 00000000000000..f1e85abb6d2b12
--- /dev/null
+++ b/packages/playground/vue/src-import/srcImportModuleStyle.vue
@@ -0,0 +1,4 @@
+<template>
+  <div :class="$style.one">src for import css module</div>
+</template>
+<style lang="scss" module src="/@/src-import/css.module.css" />
diff --git a/packages/playground/vue/src-import/srcImportModuleStyle2.vue b/packages/playground/vue/src-import/srcImportModuleStyle2.vue
new file mode 100644
index 00000000000000..7e5baebbf7dfbb
--- /dev/null
+++ b/packages/playground/vue/src-import/srcImportModuleStyle2.vue
@@ -0,0 +1,4 @@
+<template>
+  <div :class="$style.two">src for import css module</div>
+</template>
+<style lang="scss" module src="/@/src-import/css.module.css" />
diff --git a/packages/playground/vue/src-import/template.html b/packages/playground/vue/src-import/template.html
index 6b55c545daac6a..af94a480e7e357 100644
--- a/packages/playground/vue/src-import/template.html
+++ b/packages/playground/vue/src-import/template.html
@@ -3,3 +3,5 @@ <h2>SFC Src Imports</h2>
 <div class="src-imports-style">This should be tan</div>
 <SrcImportStyle></SrcImportStyle>
 <SrcImportStyle2></SrcImportStyle2>
+<SrcImportModuleStyle></SrcImportModuleStyle>
+<SrcImportModuleStyle2></SrcImportModuleStyle2>

From 80acd460dd48a94045eaafe0705c72a6c79520e1 Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Sat, 7 May 2022 22:10:49 +0800
Subject: [PATCH 2/5] fix: cache same src if no scoped

---
 packages/plugin-vue/src/main.ts               | 41 ++++++++++++++-----
 .../plugin-vue/src/utils/descriptorCache.ts   | 23 ++++++++---
 packages/plugin-vue/src/utils/query.ts        |  4 ++
 3 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index 1b24856be1ecab..524f3819aa3213 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/packages/plugin-vue/src/main.ts
@@ -227,6 +227,7 @@ async function genTemplateCode(
   ssr: boolean
 ) {
   const template = descriptor.template!
+  const hasScoped = descriptor.styles.some((style) => style.scoped)
 
   // If the template is not using pre-processor AND is not using external src,
   // compile and inline it directly in the main module. When served in vite this
@@ -241,12 +242,22 @@ async function genTemplateCode(
     )
   } else {
     if (template.src) {
-      await linkSrcToDescriptor(template.src, descriptor, pluginContext)
+      await linkSrcToDescriptor(
+        template.src,
+        descriptor,
+        pluginContext,
+        hasScoped
+      )
     }
     const src = template.src || descriptor.filename
-    const srcQuery = template.src ? `&src=${descriptor.id}` : ``
+    const srcQuery = template.src
+      ? hasScoped
+        ? `&src=${descriptor.id}`
+        : '&src'
+      : ''
+    const scopedQuery = hasScoped ? `&scoped=true` : ``
     const attrsQuery = attrsToQuery(template.attrs, 'js', true)
-    const query = `?vue&type=template${srcQuery}${attrsQuery}`
+    const query = `?vue&type=template${srcQuery}${scopedQuery}${attrsQuery}`
     const request = JSON.stringify(src + query)
     const renderFnName = ssr ? 'ssrRender' : 'render'
     return {
@@ -281,12 +292,12 @@ async function genScriptCode(
       map = script.map
     } else {
       if (script.src) {
-        await linkSrcToDescriptor(script.src, descriptor, pluginContext)
+        await linkSrcToDescriptor(script.src, descriptor, pluginContext, false)
       }
       const src = script.src || descriptor.filename
       const langFallback = (script.src && path.extname(src).slice(1)) || 'js'
       const attrsQuery = attrsToQuery(script.attrs, langFallback)
-      const srcQuery = script.src ? `&src=${descriptor.id}` : ``
+      const srcQuery = script.src ? `&src` : ``
       const query = `?vue&type=script${srcQuery}${attrsQuery}`
       const request = JSON.stringify(src + query)
       scriptCode =
@@ -311,13 +322,22 @@ async function genStyleCode(
     for (let i = 0; i < descriptor.styles.length; i++) {
       const style = descriptor.styles[i]
       if (style.src) {
-        await linkSrcToDescriptor(style.src, descriptor, pluginContext)
+        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
       // that the module needs to export the modules json
       const attrsQuery = attrsToQuery(style.attrs, 'css')
-      const srcQuery = style.src ? `&src=${descriptor.id}` : ``
+      const srcQuery = style.src
+        ? style.scoped
+          ? `&src=${descriptor.id}`
+          : '&src'
+        : ''
       const directQuery = asCustomElement ? `&inline` : ``
       const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}`
       const styleRequest = src + query + attrsQuery
@@ -387,7 +407,7 @@ async function genCustomBlockCode(
   for (let index = 0; index < descriptor.customBlocks.length; index++) {
     const block = descriptor.customBlocks[index]
     if (block.src) {
-      await linkSrcToDescriptor(block.src, descriptor, pluginContext)
+      await linkSrcToDescriptor(block.src, descriptor, pluginContext, false)
     }
     const src = block.src || descriptor.filename
     const attrsQuery = attrsToQuery(block.attrs, block.type)
@@ -408,13 +428,14 @@ async function genCustomBlockCode(
 async function linkSrcToDescriptor(
   src: string,
   descriptor: SFCDescriptor,
-  pluginContext: PluginContext
+  pluginContext: PluginContext,
+  scoped?: boolean
 ) {
   const srcFile =
     (await pluginContext.resolve(src, descriptor.filename))?.id || src
   // #1812 if the src points to a dep file, the resolved id may contain a
   // version query.
-  setSrcDescriptor(srcFile.replace(/\?.*$/, ''), descriptor)
+  setSrcDescriptor(srcFile.replace(/\?.*$/, ''), descriptor, scoped)
 }
 
 // these are built-in query parameters so should be ignored
diff --git a/packages/plugin-vue/src/utils/descriptorCache.ts b/packages/plugin-vue/src/utils/descriptorCache.ts
index c0b77e72d3e613..9a8cea40ddab5b 100644
--- a/packages/plugin-vue/src/utils/descriptorCache.ts
+++ b/packages/plugin-vue/src/utils/descriptorCache.ts
@@ -69,11 +69,24 @@ export function getSrcDescriptor(
   filename: string,
   query: VueQuery
 ): SFCDescriptor {
-  return cache.get(`${filename}?src=${query.src}`)!
+  if (query.scoped) {
+    return cache.get(`${filename}?src=${query.src}`)!
+  }
+  // console.log('get', filename)
+  return cache.get(filename)!
 }
 
-export function setSrcDescriptor(filename: string, entry: SFCDescriptor): void {
-  // if multiple Vue files use the same src file, they will be overwritten
-  // should use other key
-  cache.set(`${filename}?src=${entry.id}`, entry)
+export function setSrcDescriptor(
+  filename: string,
+  entry: SFCDescriptor,
+  scoped?: boolean
+): void {
+  if (scoped) {
+    // if multiple Vue files use the same src file, they will be overwritten
+    // should use other key
+    cache.set(`${filename}?src=${entry.id}`, entry)
+    return
+  }
+  // console.log('set', filename, entry)
+  cache.set(filename, entry)
 }
diff --git a/packages/plugin-vue/src/utils/query.ts b/packages/plugin-vue/src/utils/query.ts
index 060b5f28987bfa..f579067e52f8d8 100644
--- a/packages/plugin-vue/src/utils/query.ts
+++ b/packages/plugin-vue/src/utils/query.ts
@@ -5,6 +5,7 @@ export interface VueQuery {
   index?: number
   lang?: string
   raw?: boolean
+  scoped?: boolean
 }
 
 export function parseVueRequest(id: string): {
@@ -22,6 +23,9 @@ export function parseVueRequest(id: string): {
   if (query.raw != null) {
     query.raw = true
   }
+  if (query.scoped != null) {
+    query.scoped = true
+  }
   return {
     filename,
     query

From a608d0311913e71b717df5d5d1323a7a942b51af Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Sat, 7 May 2022 23:48:50 +0800
Subject: [PATCH 3/5] fix: if(src) when src = ''

---
 packages/plugin-vue/src/main.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/plugin-vue/src/main.ts b/packages/plugin-vue/src/main.ts
index 524f3819aa3213..dfeb6e4ac78878 100644
--- a/packages/plugin-vue/src/main.ts
+++ b/packages/plugin-vue/src/main.ts
@@ -253,7 +253,7 @@ async function genTemplateCode(
     const srcQuery = template.src
       ? hasScoped
         ? `&src=${descriptor.id}`
-        : '&src'
+        : '&src=true'
       : ''
     const scopedQuery = hasScoped ? `&scoped=true` : ``
     const attrsQuery = attrsToQuery(template.attrs, 'js', true)
@@ -297,7 +297,7 @@ async function genScriptCode(
       const src = script.src || descriptor.filename
       const langFallback = (script.src && path.extname(src).slice(1)) || 'js'
       const attrsQuery = attrsToQuery(script.attrs, langFallback)
-      const srcQuery = script.src ? `&src` : ``
+      const srcQuery = script.src ? `&src=true` : ``
       const query = `?vue&type=script${srcQuery}${attrsQuery}`
       const request = JSON.stringify(src + query)
       scriptCode =
@@ -336,7 +336,7 @@ async function genStyleCode(
       const srcQuery = style.src
         ? style.scoped
           ? `&src=${descriptor.id}`
-          : '&src'
+          : '&src=true'
         : ''
       const directQuery = asCustomElement ? `&inline` : ``
       const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}`
@@ -411,7 +411,7 @@ async function genCustomBlockCode(
     }
     const src = block.src || descriptor.filename
     const attrsQuery = attrsToQuery(block.attrs, block.type)
-    const srcQuery = block.src ? `&src` : ``
+    const srcQuery = block.src ? `&src=true` : ``
     const query = `?vue&type=${block.type}&index=${index}${srcQuery}${attrsQuery}`
     const request = JSON.stringify(src + query)
     code += `import block${index} from ${request}\n`

From 3ef32dc24b00e17741a05be425eba972e0684d4f Mon Sep 17 00:00:00 2001
From: yoho <panyoho@gmail.com>
Date: Sat, 7 May 2022 23:53:02 +0800
Subject: [PATCH 4/5] chore: remove comment

---
 packages/plugin-vue/src/utils/descriptorCache.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/plugin-vue/src/utils/descriptorCache.ts b/packages/plugin-vue/src/utils/descriptorCache.ts
index 9a8cea40ddab5b..5143a6131d5ddc 100644
--- a/packages/plugin-vue/src/utils/descriptorCache.ts
+++ b/packages/plugin-vue/src/utils/descriptorCache.ts
@@ -72,7 +72,6 @@ export function getSrcDescriptor(
   if (query.scoped) {
     return cache.get(`${filename}?src=${query.src}`)!
   }
-  // console.log('get', filename)
   return cache.get(filename)!
 }
 
@@ -87,6 +86,5 @@ export function setSrcDescriptor(
     cache.set(`${filename}?src=${entry.id}`, entry)
     return
   }
-  // console.log('set', filename, entry)
   cache.set(filename, entry)
 }

From 86b278c00dfa9c25cedd3ca43395fe2faa1b17b4 Mon Sep 17 00:00:00 2001
From: patak-dev <matias.capeletto@gmail.com>
Date: Mon, 9 May 2022 22:05:18 +0200
Subject: [PATCH 5/5] chore: rename new playground files

---
 {packages/playground => playground}/vue/src-import/css.module.css | 0
 .../vue/src-import/srcImportModuleStyle.vue                       | 0
 .../vue/src-import/srcImportModuleStyle2.vue                      | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename {packages/playground => playground}/vue/src-import/css.module.css (100%)
 rename {packages/playground => playground}/vue/src-import/srcImportModuleStyle.vue (100%)
 rename {packages/playground => playground}/vue/src-import/srcImportModuleStyle2.vue (100%)

diff --git a/packages/playground/vue/src-import/css.module.css b/playground/vue/src-import/css.module.css
similarity index 100%
rename from packages/playground/vue/src-import/css.module.css
rename to playground/vue/src-import/css.module.css
diff --git a/packages/playground/vue/src-import/srcImportModuleStyle.vue b/playground/vue/src-import/srcImportModuleStyle.vue
similarity index 100%
rename from packages/playground/vue/src-import/srcImportModuleStyle.vue
rename to playground/vue/src-import/srcImportModuleStyle.vue
diff --git a/packages/playground/vue/src-import/srcImportModuleStyle2.vue b/playground/vue/src-import/srcImportModuleStyle2.vue
similarity index 100%
rename from packages/playground/vue/src-import/srcImportModuleStyle2.vue
rename to playground/vue/src-import/srcImportModuleStyle2.vue