chore: merge

packages/uni-app-vite/src/vue/plugin/configResolved.ts

@@ -3,7 +3,6 @@ import path from 'path'
 import { Plugin } from 'vite'
 
 import {
-  removePlugins,
   injectAssetPlugin,
   injectCssPlugin,
   injectCssPostPlugin,
@@ -24,7 +23,6 @@ function normalizeCssChunkFilename(id: string) {
 export const configResolved: Plugin['configResolved'] = (config) => {
   const inputDir = process.env.UNI_INPUT_DIR
   const mainPath = resolveMainPathOnce(inputDir)
-  removePlugins('vite:import-analysis', config)
   injectCssPlugin(config)
   injectCssPostPlugin(config, {
     chunkCssFilename(id: string) {

packages/uni-cli-shared/src/vite/utils/plugin.ts

 import type { Plugin, ResolvedConfig } from 'vite'
+import { extend } from '@vue/shared'
 import { assetPlugin } from '../plugins/vitejs/plugins/asset'
 import { cssPlugin, cssPostPlugin } from '../plugins/vitejs/plugins/css'
 
@@ -28,10 +29,17 @@ export function injectCssPostPlugin(
     chunkCssCode: (filename: string, cssCode: string) => string
   }
 ) {
-  replacePlugins(
-    [cssPostPlugin(config, { chunkCssFilename, chunkCssCode })],
-    config
+  const newCssPostPlugin = cssPostPlugin(config, {
+    chunkCssFilename,
+    chunkCssCode,
+  })
+  const oldCssPostPlugin = config.plugins.find(
+    (p) => p.name === newCssPostPlugin.name
   )
+  // 直接覆盖原有方法，不能删除，替换，因为 unocss 在 pre 阶段已经获取到了旧的 css-post 插件对象
+  if (oldCssPostPlugin) {
+    extend(oldCssPostPlugin, newCssPostPlugin)
+  }
 }
 
 export function replacePlugins(plugins: Plugin[], config: ResolvedConfig) {

packages/uni-mp-compiler/__tests__/component.spec.ts

@@ -100,8 +100,8 @@ describe('compiler: transform component', () => {
   })
   test(`component with props`, () => {
     assert(
-      `<uni-collapse ref="a" :ref="b" slot="c" :slot="d" class="e" :class="f" style="g" :style="h" @click="i" v-model:first="j" v-model:last="k" prop-a="l" :prop-b="m" data-a="n" :data-b="o" key="p" :key="r" is="s" :is="t"/>`,
-      `<uni-collapse ref="a" ref="{{a}}" slot="c" slot="{{b}}" class="{{['e', c]}}" style="{{'g' + ';' + d}}" bindclick="{{e}}" data-a="n" data-b="{{f}}" key="p" key="{{g}}" is="s" is="{{h}}" u-i="2a9ec0b0-0" bindupdateFirst="{{i}}" bindupdateLast="{{j}}" u-p="{{k}}"/>`,
+      `<uni-collapse id="id" ref="a" :ref="b" slot="c" :slot="d" class="e" :class="f" style="g" :style="h" @click="i" v-model:first="j" v-model:last="k" prop-a="l" :prop-b="m" data-a="n" :data-b="o" key="p" :key="r" is="s" :is="t"/>`,
+      `<uni-collapse id="id" ref="a" ref="{{a}}" slot="c" slot="{{b}}" class="{{['e', c]}}" style="{{'g' + ';' + d}}" bindclick="{{e}}" data-a="n" data-b="{{f}}" key="p" key="{{g}}" is="s" is="{{h}}" u-i="2a9ec0b0-0" bindupdateFirst="{{i}}" bindupdateLast="{{j}}" u-p="{{k}}"/>`,
       `(_ctx, _cache) => {
   return { a: _ctx.b, b: _ctx.d, c: _n(_ctx.f), d: _s(_ctx.h), e: _o(_ctx.i), f: _ctx.o, g: _ctx.r, h: _ctx.t, i: _o($event => _ctx.j = $event), j: _o($event => _ctx.k = $event), k: _p({ ['prop-a']: 'l', ['prop-b']: _ctx.m, first: _ctx.j, last: _ctx.k }) }
 }`

packages/uni-mp-compiler/src/transforms/transformComponent.ts

@@ -112,6 +112,7 @@ function processBooleanAttr({ props }: ComponentNode) {
 }
 
 const builtInProps = [
+  'id',
   'class',
   'style',
   ATTR_VUE_ID,

packages/uni-mp-vite/src/plugin/configResolved.ts

 import debug from 'debug'
-import { Plugin } from 'vite'
+import type { Plugin, ResolvedConfig } from 'vite'
+import type { EmittedAsset } from 'rollup'
 import {
-  removePlugins,
   injectAssetPlugin,
   injectCssPlugin,
   injectCssPostPlugin,
@@ -43,24 +43,31 @@ export function createConfigResolved({
   }
   return (config) => {
     const mainPath = resolveMainPathOnce(process.env.UNI_INPUT_DIR)
-    removePlugins('vite:import-analysis', config)
+    fixUnocss(config)
     injectCssPlugin(config)
+
+    const unocssGlobalBuildGenerateIndex = config.plugins.findIndex(
+      (p) => p.name === 'unocss:global:build:generate'
+    )
+    const hasUnocssGlobalBuildGenerate = unocssGlobalBuildGenerateIndex > -1
+    // unocss 是根据 .css 后缀来编译文件，需要先保持 css 文件后缀为 .css，等 unocss 处理完后，再重置回正确的文件后缀
+    const cssExtname = hasUnocssGlobalBuildGenerate ? '.css' : extname
     injectCssPostPlugin(config, {
       chunkCssFilename(id: string) {
         if (id === mainPath) {
-          return 'app' + extname
+          return 'app' + cssExtname
         } else if (isUniPageUrl(id)) {
-          return normalizeCssChunkFilename(parseVirtualPagePath(id), extname)
+          return normalizeCssChunkFilename(parseVirtualPagePath(id), cssExtname)
         } else if (isUniComponentUrl(id)) {
           return normalizeCssChunkFilename(
             parseVirtualComponentPath(id),
-            extname
+            cssExtname
           )
         }
       },
       chunkCssCode(filename, cssCode) {
         cssCode = transformScopedCss(cssCode)
-        if (filename === 'app' + extname) {
+        if (filename === 'app' + cssExtname) {
           const componentCustomHiddenCss =
             (component &&
               component.vShow &&
@@ -94,5 +101,44 @@ export function createConfigResolved({
       },
     })
     injectAssetPlugin(config)
+
+    if (hasUnocssGlobalBuildGenerate && extname !== '.css') {
+      ;(config.plugins as Plugin[]).splice(
+        unocssGlobalBuildGenerateIndex + 1,
+        0,
+        adjustCssExtname(extname)
+      )
+    }
+  }
+}
+
+function adjustCssExtname(extname: string): Plugin {
+  return {
+    name: 'vite:uni-adjust-css-extname',
+    generateBundle(_, bundle) {
+      const files = Object.keys(bundle)
+      files.forEach((name) => {
+        if (name.endsWith('.css')) {
+          const asset = bundle[name] as EmittedAsset
+          this.emitFile({
+            fileName: name.replace('.css', extname),
+            type: 'asset',
+            source: asset.source,
+          })
+          delete bundle[name]
+        }
+      })
+    },
+  }
+}
+function fixUnocss(config: ResolvedConfig) {
+  const unocssGlobalBuildScan = config.plugins.find(
+    (p) => p.name === 'unocss:global:build:scan'
+  )
+  // TODO 原始的 scan 的 buildStart 会清空 vfsLayerMap，导致 watch 时，load 阶段 /__uno.css 获取不到
+  // https://github.com/antfu/unocss/blob/main/packages/vite/src/modes/global/build.ts#L25
+  if (unocssGlobalBuildScan) {
+    // 隐患: task 未被清空
+    unocssGlobalBuildScan.buildStart = () => {}
   }
 }