feat: support generated JS imports for external scoped style

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) &&

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): {

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'))
 

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')
+  })
+})

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__

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__

playground/vue/pre-compiled/external.css

@@ -0,0 +1,3 @@
+.pre-compiled-external-scoped-title {
+  color: red;
+}

playground/vue/pre-compiled/external.module.css

@@ -0,0 +1,6 @@
+.red {
+  color: red;
+}
+.bold {
+  font-weight: bold;
+}

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__

playground/vue/pre-compiled/foo.vue__0.css

@@ -0,0 +1,3 @@
+.pre-compiled-title {
+  color: red;
+}