From 022fb1de350c9ed1236bc3558e2b695c510e736f Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Fri, 7 Jul 2023 15:58:12 +0800
Subject: [PATCH 1/4] feat: support external scoped style

---
 packages/plugin-vue/src/index.ts       | 29 ++++++++++++++++++++++++++
 packages/plugin-vue/src/utils/query.ts |  1 +
 2 files changed, 30 insertions(+)

diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
index d2109370..a625c00a 100644
--- a/packages/plugin-vue/src/index.ts
+++ b/packages/plugin-vue/src/index.ts
@@ -9,6 +9,8 @@ import type {
   SFCTemplateCompileOptions,
 } from 'vue/compiler-sfc'
 import type * as _compiler from 'vue/compiler-sfc'
+import type { ExistingRawSourceMap } from 'rollup'
+import type { RawSourceMap } from 'source-map'
 /* eslint-enable import/no-duplicates */
 import { resolveCompiler } from './compiler'
 import { parseVueRequest } from './utils/query'
@@ -201,6 +203,12 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
       }
 
       const { filename, query } = parseVueRequest(id)
+
+      // external scoped style
+      if (!query.vue && query.scoped) {
+        return fs.readFileSync(filename, 'utf-8')
+      }
+
       // select corresponding block for sub-part virtual modules
       if (query.vue) {
         if (query.src) {
@@ -230,10 +238,31 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
     transform(code, id, opt) {
       const ssr = opt?.ssr === true
       const { filename, query } = parseVueRequest(id)
+
       if (query.raw || query.url) {
         return
       }
+
+      if (!query.vue && query.scoped) {
+        // external scoped style
+        const result = options.compiler.compileStyle({
+          filename,
+          source: code,
+          id: `data-v-${query.id}`,
+          scoped: true,
+          isProd: options.isProduction,
+        })
+        return {
+          code: result.code,
+          map: result.map as Omit<
+            RawSourceMap,
+            'version'
+          > as ExistingRawSourceMap,
+        }
+      }
+
       if (!filter(filename) && !query.vue) {
+        // transform ref necessarily
         if (
           !query.vue &&
           refTransformFilter(filename) &&
diff --git a/packages/plugin-vue/src/utils/query.ts b/packages/plugin-vue/src/utils/query.ts
index 66fe103c..29417a22 100644
--- a/packages/plugin-vue/src/utils/query.ts
+++ b/packages/plugin-vue/src/utils/query.ts
@@ -7,6 +7,7 @@ export interface VueQuery {
   raw?: boolean
   url?: boolean
   scoped?: boolean
+  id?: string
 }
 
 export function parseVueRequest(id: string): {

From d6a2d8064c8e347aeae3405dcded2620456be7fb Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Fri, 7 Jul 2023 18:01:34 +0800
Subject: [PATCH 2/4] test: add test cases for pre-compiled components

---
 playground/vue/Main.vue                       |  6 ++
 playground/vue/__tests__/vue.spec.ts          | 12 ++++
 .../pre-compiled/external-cssmodules.vue.js   | 59 ++++++++++++++++++
 .../vue/pre-compiled/external-scoped.vue.js   | 62 +++++++++++++++++++
 playground/vue/pre-compiled/external.css      |  3 +
 .../vue/pre-compiled/external.module.css      |  6 ++
 playground/vue/pre-compiled/foo.vue.js        | 55 ++++++++++++++++
 playground/vue/pre-compiled/foo.vue__0.css    |  3 +
 8 files changed, 206 insertions(+)
 create mode 100644 playground/vue/pre-compiled/external-cssmodules.vue.js
 create mode 100644 playground/vue/pre-compiled/external-scoped.vue.js
 create mode 100644 playground/vue/pre-compiled/external.css
 create mode 100644 playground/vue/pre-compiled/external.module.css
 create mode 100644 playground/vue/pre-compiled/foo.vue.js
 create mode 100644 playground/vue/pre-compiled/foo.vue__0.css

diff --git a/playground/vue/Main.vue b/playground/vue/Main.vue
index 1fbea3df..2821d5da 100644
--- a/playground/vue/Main.vue
+++ b/playground/vue/Main.vue
@@ -28,6 +28,9 @@
   <WorkerTest />
   <Url />
   <TsGeneric msg="hello" />
+  <PreCompiled />
+  <PreCompiledExternalScoped />
+  <PreCompiledExternalCssModules />
 </template>
 
 <script setup lang="ts">
@@ -50,6 +53,9 @@ import WorkerTest from './worker.vue'
 import { ref } from 'vue'
 import Url from './Url.vue'
 import TypeProps from './TypeProps.vue'
+import PreCompiled from './pre-compiled/foo.vue'
+import PreCompiledExternalScoped from './pre-compiled/external-scoped.vue'
+import PreCompiledExternalCssModules from './pre-compiled/external-cssmodules.vue'
 
 const TsGeneric = defineAsyncComponent(() => import('./TsGeneric.vue'))
 
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index c356f53f..8559bed4 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -327,3 +327,15 @@ describe('macro imported types', () => {
 test('TS with generics', async () => {
   expect(await page.textContent('.generic')).toMatch('hello')
 })
+
+describe('pre-compiled components', () => {
+  test('should work', async () => {
+    expect(await getColor('.pre-compiled-title')).toBe('red')
+  })
+  test('should work with external scoped style', async () => {
+    expect(await getColor('.pre-compiled-external-scoped-title')).toBe('red')
+  })
+  test('should work with external css modules', async () => {
+    expect(await getColor('.pre-compiled-external-cssmodules')).toBe('red')
+  })
+})
diff --git a/playground/vue/pre-compiled/external-cssmodules.vue.js b/playground/vue/pre-compiled/external-cssmodules.vue.js
new file mode 100644
index 00000000..93738d95
--- /dev/null
+++ b/playground/vue/pre-compiled/external-cssmodules.vue.js
@@ -0,0 +1,59 @@
+import style0 from './external.module.css?module=true&lang.module.css'
+
+const __sfc__ = {
+  data() {
+    return {
+      isRed: true,
+    }
+  },
+}
+
+import {
+  normalizeClass as _normalizeClass,
+  createElementVNode as _createElementVNode,
+  Fragment as _Fragment,
+  openBlock as _openBlock,
+  createElementBlock as _createElementBlock,
+} from 'vue'
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (
+    _openBlock(),
+    _createElementBlock(
+      _Fragment,
+      null,
+      [
+        _createElementVNode(
+          'p',
+          {
+            class: _normalizeClass({
+              [_ctx.$style.red]: $data.isRed,
+              'pre-compiled-external-cssmodules': true,
+            }),
+          },
+          ' Am I red? ',
+          2 /* CLASS */,
+        ),
+        _createElementVNode(
+          'p',
+          {
+            class: _normalizeClass([
+              _ctx.$style.red,
+              _ctx.$style.bold,
+              'pre-compiled-external-cssmodules',
+            ]),
+          },
+          ' Red and bold ',
+          2 /* CLASS */,
+        ),
+      ],
+      64 /* STABLE_FRAGMENT */,
+    )
+  )
+}
+__sfc__.render = render
+const cssModules = {}
+cssModules['$style'] = style0
+__sfc__.__cssModules = cssModules
+__sfc__.__file = 'external-cssmodules.vue'
+export default __sfc__
diff --git a/playground/vue/pre-compiled/external-scoped.vue.js b/playground/vue/pre-compiled/external-scoped.vue.js
new file mode 100644
index 00000000..59976c2e
--- /dev/null
+++ b/playground/vue/pre-compiled/external-scoped.vue.js
@@ -0,0 +1,62 @@
+import './external.css?scoped=true&id=0d49ede6&lang.css'
+
+import { ref } from 'vue'
+const __sfc__ = {
+  setup() {
+    const msg = ref('Hello World!')
+    return { msg }
+  },
+}
+
+import {
+  toDisplayString as _toDisplayString,
+  createElementVNode as _createElementVNode,
+  vModelText as _vModelText,
+  withDirectives as _withDirectives,
+  Fragment as _Fragment,
+  openBlock as _openBlock,
+  createElementBlock as _createElementBlock,
+  pushScopeId as _pushScopeId,
+  popScopeId as _popScopeId,
+} from 'vue'
+
+const _withScopeId = (n) => (
+  _pushScopeId('data-v-0d49ede6'), (n = n()), _popScopeId(), n
+)
+const _hoisted_1 = { class: 'pre-compiled-external-scoped-title' }
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (
+    _openBlock(),
+    _createElementBlock(
+      _Fragment,
+      null,
+      [
+        _createElementVNode(
+          'h6',
+          _hoisted_1,
+          _toDisplayString($setup.msg),
+          1 /* TEXT */,
+        ),
+        _withDirectives(
+          _createElementVNode(
+            'input',
+            {
+              'onUpdate:modelValue':
+                _cache[0] || (_cache[0] = ($event) => ($setup.msg = $event)),
+            },
+            null,
+            512 /* NEED_PATCH */,
+          ),
+          [[_vModelText, $setup.msg]],
+        ),
+      ],
+      64 /* STABLE_FRAGMENT */,
+    )
+  )
+}
+__sfc__.render = render
+
+__sfc__.__scopeId = 'data-v-0d49ede6'
+__sfc__.__file = 'external-scoped.vue'
+export default __sfc__
diff --git a/playground/vue/pre-compiled/external.css b/playground/vue/pre-compiled/external.css
new file mode 100644
index 00000000..9e614629
--- /dev/null
+++ b/playground/vue/pre-compiled/external.css
@@ -0,0 +1,3 @@
+.pre-compiled-external-scoped-title {
+  color: red;
+}
diff --git a/playground/vue/pre-compiled/external.module.css b/playground/vue/pre-compiled/external.module.css
new file mode 100644
index 00000000..03adb4b5
--- /dev/null
+++ b/playground/vue/pre-compiled/external.module.css
@@ -0,0 +1,6 @@
+.red {
+  color: red;
+}
+.bold {
+  font-weight: bold;
+}
diff --git a/playground/vue/pre-compiled/foo.vue.js b/playground/vue/pre-compiled/foo.vue.js
new file mode 100644
index 00000000..47a82bc6
--- /dev/null
+++ b/playground/vue/pre-compiled/foo.vue.js
@@ -0,0 +1,55 @@
+import './foo.vue__0.css'
+
+import { ref } from 'vue'
+const __sfc__ = {
+  setup() {
+    const msg = ref('Hello World!')
+    return { msg }
+  },
+}
+
+import {
+  toDisplayString as _toDisplayString,
+  createElementVNode as _createElementVNode,
+  vModelText as _vModelText,
+  withDirectives as _withDirectives,
+  Fragment as _Fragment,
+  openBlock as _openBlock,
+  createElementBlock as _createElementBlock,
+} from 'vue'
+const _hoisted_1 = { class: 'pre-compiled-title' }
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (
+    _openBlock(),
+    _createElementBlock(
+      _Fragment,
+      null,
+      [
+        _createElementVNode(
+          'h6',
+          _hoisted_1,
+          _toDisplayString($setup.msg),
+          1 /* TEXT */,
+        ),
+        _withDirectives(
+          _createElementVNode(
+            'input',
+            {
+              'onUpdate:modelValue':
+                _cache[0] || (_cache[0] = ($event) => ($setup.msg = $event)),
+            },
+            null,
+            512 /* NEED_PATCH */,
+          ),
+          [[_vModelText, $setup.msg]],
+        ),
+      ],
+      64 /* STABLE_FRAGMENT */,
+    )
+  )
+}
+__sfc__.render = render
+
+__sfc__.__file = 'foo.vue'
+export default __sfc__
diff --git a/playground/vue/pre-compiled/foo.vue__0.css b/playground/vue/pre-compiled/foo.vue__0.css
new file mode 100644
index 00000000..afa14cb5
--- /dev/null
+++ b/playground/vue/pre-compiled/foo.vue__0.css
@@ -0,0 +1,3 @@
+.pre-compiled-title {
+  color: red;
+}

From 70588fc04a3e56d0e5b01aa6acb1c13d960f280c Mon Sep 17 00:00:00 2001
From: Jinjiang <zhaojinjiang@me.com>
Date: Sat, 30 Sep 2023 01:16:19 +0800
Subject: [PATCH 3/4] refactor: handle pre-compiled scoped styles

---
 packages/plugin-vue/src/index.ts              | 37 ++++---------------
 .../plugin-vue/src/utils/descriptorCache.ts   | 19 ++++++++++
 .../vue/pre-compiled/external-scoped.vue.js   |  2 +-
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/packages/plugin-vue/src/index.ts b/packages/plugin-vue/src/index.ts
index a625c00a..e4d091c4 100644
--- a/packages/plugin-vue/src/index.ts
+++ b/packages/plugin-vue/src/index.ts
@@ -9,12 +9,14 @@ import type {
   SFCTemplateCompileOptions,
 } from 'vue/compiler-sfc'
 import type * as _compiler from 'vue/compiler-sfc'
-import type { ExistingRawSourceMap } from 'rollup'
-import type { RawSourceMap } from 'source-map'
 /* eslint-enable import/no-duplicates */
 import { resolveCompiler } from './compiler'
 import { parseVueRequest } from './utils/query'
-import { getDescriptor, getSrcDescriptor } from './utils/descriptorCache'
+import {
+  getDescriptor,
+  getSrcDescriptor,
+  getTempSrcDescriptor,
+} from './utils/descriptorCache'
 import { getResolvedScript, typeDepToSFCMap } from './script'
 import { transformMain } from './main'
 import { handleHotUpdate, handleTypeDepChange } from './handleHotUpdate'
@@ -204,11 +206,6 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
 
       const { filename, query } = parseVueRequest(id)
 
-      // external scoped style
-      if (!query.vue && query.scoped) {
-        return fs.readFileSync(filename, 'utf-8')
-      }
-
       // select corresponding block for sub-part virtual modules
       if (query.vue) {
         if (query.src) {
@@ -243,26 +240,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
         return
       }
 
-      if (!query.vue && query.scoped) {
-        // external scoped style
-        const result = options.compiler.compileStyle({
-          filename,
-          source: code,
-          id: `data-v-${query.id}`,
-          scoped: true,
-          isProd: options.isProduction,
-        })
-        return {
-          code: result.code,
-          map: result.map as Omit<
-            RawSourceMap,
-            'version'
-          > as ExistingRawSourceMap,
-        }
-      }
-
       if (!filter(filename) && !query.vue) {
-        // transform ref necessarily
         if (
           !query.vue &&
           refTransformFilter(filename) &&
@@ -289,7 +267,8 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
       } else {
         // sub block request
         const descriptor = query.src
-          ? getSrcDescriptor(filename, query)!
+          ? getSrcDescriptor(filename, query) ||
+            getTempSrcDescriptor(filename, query)
           : getDescriptor(filename, options)!
 
         if (query.type === 'template') {
@@ -298,7 +277,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
           return transformStyle(
             code,
             descriptor,
-            Number(query.index),
+            Number(query.index || 0),
             options,
             this,
             filename,
diff --git a/packages/plugin-vue/src/utils/descriptorCache.ts b/packages/plugin-vue/src/utils/descriptorCache.ts
index 2152cd21..2443305c 100644
--- a/packages/plugin-vue/src/utils/descriptorCache.ts
+++ b/packages/plugin-vue/src/utils/descriptorCache.ts
@@ -75,6 +75,25 @@ export function getSrcDescriptor(
   return cache.get(filename)!
 }
 
+export function getTempSrcDescriptor(
+  filename: string,
+  query: VueQuery,
+): SFCDescriptor {
+  // this is only used for pre-compiled <style src> with scoped flag
+  return {
+    filename,
+    id: query.id || '',
+    styles: [
+      {
+        scoped: query.scoped,
+        loc: {
+          start: { line: 0, column: 0 },
+        },
+      },
+    ],
+  } as SFCDescriptor
+}
+
 export function setSrcDescriptor(
   filename: string,
   entry: SFCDescriptor,
diff --git a/playground/vue/pre-compiled/external-scoped.vue.js b/playground/vue/pre-compiled/external-scoped.vue.js
index 59976c2e..4fbe1fc5 100644
--- a/playground/vue/pre-compiled/external-scoped.vue.js
+++ b/playground/vue/pre-compiled/external-scoped.vue.js
@@ -1,4 +1,4 @@
-import './external.css?scoped=true&id=0d49ede6&lang.css'
+import './external.css?vue&type=style&scoped=true&id=0d49ede6&src=0d49ede6&lang.css'
 
 import { ref } from 'vue'
 const __sfc__ = {

From 31f39051659afed7bfec1579f530884141f6d1e4 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Sun, 1 Oct 2023 20:51:13 +0800
Subject: [PATCH 4/4] style: fix lint errors

---
 .../pre-compiled/external-cssmodules.vue.js   | 16 ++++++------
 .../vue/pre-compiled/external-scoped.vue.js   | 25 +++++++++----------
 playground/vue/pre-compiled/foo.vue.js        | 20 +++++++--------
 3 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/playground/vue/pre-compiled/external-cssmodules.vue.js b/playground/vue/pre-compiled/external-cssmodules.vue.js
index 93738d95..3da12be5 100644
--- a/playground/vue/pre-compiled/external-cssmodules.vue.js
+++ b/playground/vue/pre-compiled/external-cssmodules.vue.js
@@ -1,3 +1,11 @@
+import {
+  Fragment as _Fragment,
+  createElementBlock as _createElementBlock,
+  createElementVNode as _createElementVNode,
+  normalizeClass as _normalizeClass,
+  openBlock as _openBlock,
+} from 'vue'
+
 import style0 from './external.module.css?module=true&lang.module.css'
 
 const __sfc__ = {
@@ -8,14 +16,6 @@ const __sfc__ = {
   },
 }
 
-import {
-  normalizeClass as _normalizeClass,
-  createElementVNode as _createElementVNode,
-  Fragment as _Fragment,
-  openBlock as _openBlock,
-  createElementBlock as _createElementBlock,
-} from 'vue'
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (
     _openBlock(),
diff --git a/playground/vue/pre-compiled/external-scoped.vue.js b/playground/vue/pre-compiled/external-scoped.vue.js
index 4fbe1fc5..5aa8254f 100644
--- a/playground/vue/pre-compiled/external-scoped.vue.js
+++ b/playground/vue/pre-compiled/external-scoped.vue.js
@@ -1,6 +1,17 @@
 import './external.css?vue&type=style&scoped=true&id=0d49ede6&src=0d49ede6&lang.css'
 
-import { ref } from 'vue'
+import {
+  Fragment as _Fragment,
+  createElementBlock as _createElementBlock,
+  createElementVNode as _createElementVNode,
+  openBlock as _openBlock,
+  popScopeId as _popScopeId,
+  pushScopeId as _pushScopeId,
+  toDisplayString as _toDisplayString,
+  vModelText as _vModelText,
+  withDirectives as _withDirectives,
+  ref,
+} from 'vue'
 const __sfc__ = {
   setup() {
     const msg = ref('Hello World!')
@@ -8,18 +19,6 @@ const __sfc__ = {
   },
 }
 
-import {
-  toDisplayString as _toDisplayString,
-  createElementVNode as _createElementVNode,
-  vModelText as _vModelText,
-  withDirectives as _withDirectives,
-  Fragment as _Fragment,
-  openBlock as _openBlock,
-  createElementBlock as _createElementBlock,
-  pushScopeId as _pushScopeId,
-  popScopeId as _popScopeId,
-} from 'vue'
-
 const _withScopeId = (n) => (
   _pushScopeId('data-v-0d49ede6'), (n = n()), _popScopeId(), n
 )
diff --git a/playground/vue/pre-compiled/foo.vue.js b/playground/vue/pre-compiled/foo.vue.js
index 47a82bc6..8777b5e6 100644
--- a/playground/vue/pre-compiled/foo.vue.js
+++ b/playground/vue/pre-compiled/foo.vue.js
@@ -1,6 +1,15 @@
 import './foo.vue__0.css'
 
-import { ref } from 'vue'
+import {
+  Fragment as _Fragment,
+  createElementBlock as _createElementBlock,
+  createElementVNode as _createElementVNode,
+  openBlock as _openBlock,
+  toDisplayString as _toDisplayString,
+  vModelText as _vModelText,
+  withDirectives as _withDirectives,
+  ref,
+} from 'vue'
 const __sfc__ = {
   setup() {
     const msg = ref('Hello World!')
@@ -8,15 +17,6 @@ const __sfc__ = {
   },
 }
 
-import {
-  toDisplayString as _toDisplayString,
-  createElementVNode as _createElementVNode,
-  vModelText as _vModelText,
-  withDirectives as _withDirectives,
-  Fragment as _Fragment,
-  openBlock as _openBlock,
-  createElementBlock as _createElementBlock,
-} from 'vue'
 const _hoisted_1 = { class: 'pre-compiled-title' }
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {