wip(uvue): iOS平台支持css解析

packages/uni-app-uts/src/plugins/android/css.ts

@@ -84,7 +84,7 @@ export function uniAppCssPlugin(): Plugin {
       // 增加 css plugins
       insertBeforePlugin(
         cssPlugin(config, {
-          isAppX: true,
+          isAndroidX: true,
           getDescriptor: (filename) => {
             return getDescriptor(filename, descriptorOptions, false)
           },

packages/uni-app-uts/src/plugins/android/plugin.ts

@@ -10,10 +10,8 @@ import {
   resolveMainPathOnce,
   resolveUTSCompiler,
   utsPlugins,
-  injectAssetPlugin,
   AutoImportOptions,
 } from '@dcloudio/uni-cli-shared'
-import type { Plugin } from 'vite'
 import {
   DEFAULT_APPID,
   parseImports,
@@ -28,36 +26,10 @@ import {
   createTryResolve,
 } from './utils'
 import { getOutputManifestJson } from './manifestJson'
-import { createUniOptions } from '../utils'
+import { configResolved, createUniOptions } from '../utils'
 
 const uniCloudSpaceList = getUniCloudSpaceList()
 
-const REMOVED_PLUGINS = [
-  'vite:build-metadata',
-  'vite:modulepreload-polyfill',
-  'vite:css',
-  'vite:esbuild',
-  'vite:wasm-helper',
-  'vite:worker',
-  // 'vite:asset', // replace
-  'vite:wasm-fallback',
-  'vite:define',
-  'vite:css-post',
-  'vite:build-html',
-  'vite:html-inline-proxy',
-  'vite:worker-import-meta-url',
-  'vite:asset-import-meta-url',
-  'vite:force-systemjs-wrap-complete',
-  'vite:watch-package-data',
-  'commonjs',
-  'vite:data-uri',
-  'vite:dynamic-import-vars',
-  'vite:import-glob',
-  'vite:build-import-analysis',
-  'vite:esbuild-transpile',
-  'vite:terser',
-  'vite:reporter',
-]
 let isFirst = true
 export function uniAppPlugin(options: {
   autoImportOptions?: AutoImportOptions
@@ -134,17 +106,7 @@ export function uniAppPlugin(options: {
       }
     },
     configResolved(config) {
-      const plugins = config.plugins as Plugin[]
-      const len = plugins.length
-      for (let i = len - 1; i >= 0; i--) {
-        const plugin = plugins[i]
-        if (REMOVED_PLUGINS.includes(plugin.name)) {
-          plugins.splice(i, 1)
-        }
-      }
-      // 强制不inline
-      config.build.assetsInlineLimit = 0
-      injectAssetPlugin(config, { isAppX: true })
+      configResolved(config, true)
     },
     async transform(code, id) {
       if (process.env.UNI_APP_X_TSC === 'true') {

packages/uni-app-uts/src/plugins/ios/css.ts

+import type { Plugin, ResolvedConfig } from 'vite'
+import colors from 'picocolors'
+
+import {
+  commonjsProxyRE,
+  cssLangRE,
+  formatAtFilename,
+  generateCodeFrame,
+  parseAssets,
+  preUVueCss,
+} from '@dcloudio/uni-cli-shared'
+import { parse } from '@dcloudio/uni-nvue-styler'
+
+export function uniAppCssPlugin(): Plugin {
+  let resolvedConfig: ResolvedConfig
+
+  return {
+    name: 'vite:css-post',
+    configResolved(config) {
+      resolvedConfig = config
+    },
+    buildStart() {
+      // 用于覆盖原始插件方法
+      // noop
+    },
+    async transform(source, filename) {
+      if (!cssLangRE.test(filename) || commonjsProxyRE.test(filename)) {
+        return
+      }
+      if (source.includes('#endif')) {
+        source = preUVueCss(source)
+      }
+      source = parseAssets(resolvedConfig, source)
+      // 仅做校验使用
+      const { messages, code } = await parse(source, {
+        filename,
+        logLevel: 'WARNING',
+        type: 'uvue',
+        platform: process.env.UNI_UTS_PLATFORM,
+      })
+      messages.forEach((message) => {
+        if (message.type === 'warning') {
+          // 拆分成多行，第一行输出信息（有颜色），后续输出错误代码+文件行号
+          resolvedConfig.logger.warn(
+            colors.yellow(`[plugin:uni:app-uvue-css] ${message.text}`)
+          )
+          let msg = ''
+          if (message.line && message.column) {
+            msg += `\n${generateCodeFrame(source, {
+              line: message.line,
+              column: message.column,
+            }).replace(/\t/g, ' ')}\n`
+          }
+          msg += `${formatAtFilename(filename)}`
+          resolvedConfig.logger.warn(msg)
+        }
+      })
+      return { code: `export default ${code}`, map: { mappings: '' } }
+    },
+    generateBundle() {
+      // 用于覆盖原始插件方法
+      // noop
+    },
+  }
+}

packages/uni-app-uts/src/plugins/ios/plugin.ts

@@ -3,37 +3,12 @@ import {
   APP_SERVICE_FILENAME,
   UniVitePlugin,
   emptyDir,
+  injectCssPlugin,
+  injectCssPostPlugin,
   resolveMainPathOnce,
 } from '@dcloudio/uni-cli-shared'
-import { createUniOptions } from '../utils'
-import type { Plugin } from 'vite'
-
-const REMOVED_PLUGINS = [
-  'vite:build-metadata',
-  'vite:modulepreload-polyfill',
-  'vite:css',
-  'vite:esbuild',
-  'vite:wasm-helper',
-  'vite:worker',
-  // 'vite:asset', // replace
-  'vite:wasm-fallback',
-  'vite:define',
-  'vite:css-post',
-  'vite:build-html',
-  'vite:html-inline-proxy',
-  'vite:worker-import-meta-url',
-  'vite:asset-import-meta-url',
-  'vite:force-systemjs-wrap-complete',
-  'vite:watch-package-data',
-  'commonjs',
-  'vite:data-uri',
-  'vite:dynamic-import-vars',
-  'vite:import-glob',
-  'vite:build-import-analysis',
-  'vite:esbuild-transpile',
-  'vite:terser',
-  'vite:reporter',
-]
+import { configResolved, createUniOptions } from '../utils'
+import { uniAppCssPlugin } from './css'
 
 export function uniAppIOSPlugin(): UniVitePlugin {
   const inputDir = process.env.UNI_INPUT_DIR
@@ -74,14 +49,9 @@ export function uniAppIOSPlugin(): UniVitePlugin {
       }
     },
     configResolved(config) {
-      const plugins = config.plugins as Plugin[]
-      const len = plugins.length
-      for (let i = len - 1; i >= 0; i--) {
-        const plugin = plugins[i]
-        if (REMOVED_PLUGINS.includes(plugin.name)) {
-          plugins.splice(i, 1)
-        }
-      }
+      configResolved(config)
+      injectCssPlugin(config)
+      injectCssPostPlugin(config, uniAppCssPlugin())
     },
   }
 }

packages/uni-app-uts/src/plugins/utils.ts

@@ -4,8 +4,10 @@ import {
   UniViteCopyPluginOptions,
   UniVitePlugin,
   initI18nOptions,
+  injectAssetPlugin,
 } from '@dcloudio/uni-cli-shared'
 import { compileI18nJsonStr } from '@dcloudio/uni-i18n'
+import { Plugin, ResolvedConfig } from 'vite'
 
 export function createUniOptions(): UniVitePlugin['uni'] {
   return {
@@ -45,3 +47,52 @@ export function isManifest(id: string) {
 export function isPages(id: string) {
   return id.endsWith(PAGES_JSON_UTS)
 }
+
+// TODO vite 升级需要考虑调整以下列表
+const REMOVED_PLUGINS = [
+  'vite:build-metadata',
+  'vite:modulepreload-polyfill',
+  // 'vite:css', // iOS replace
+  'vite:esbuild',
+  'vite:wasm-helper',
+  'vite:worker',
+  'vite:json',
+  // 'vite:asset', // replace
+  'vite:wasm-fallback',
+  'vite:define',
+  // 'vite:css-post', // iOS replace
+  'vite:build-html',
+  'vite:html-inline-proxy',
+  'vite:worker-import-meta-url',
+  'vite:asset-import-meta-url',
+  'vite:force-systemjs-wrap-complete',
+  'vite:watch-package-data',
+  'commonjs',
+  'vite:data-uri',
+  'vite:dynamic-import-vars',
+  'vite:import-glob',
+  'vite:build-import-analysis',
+  'vite:esbuild-transpile',
+  'vite:terser',
+  'vite:reporter',
+]
+
+export function configResolved(config: ResolvedConfig, isAndroidX = false) {
+  const plugins = config.plugins as Plugin[]
+  const len = plugins.length
+  const removedPlugins = REMOVED_PLUGINS.slice(0)
+  if (isAndroidX) {
+    removedPlugins.push('vite:css')
+    removedPlugins.push('vite:css-post')
+  }
+  for (let i = len - 1; i >= 0; i--) {
+    const plugin = plugins[i]
+    if (removedPlugins.includes(plugin.name)) {
+      plugins.splice(i, 1)
+    }
+  }
+  // console.log(plugins.map((p) => p.name))
+  // 强制不inline
+  config.build.assetsInlineLimit = 0
+  injectAssetPlugin(config, { isAndroidX })
+}

packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/asset.ts

@@ -38,7 +38,7 @@ const emittedHashMap = new WeakMap<ResolvedConfig, Set<string>>()
  */
 export function assetPlugin(
   config: ResolvedConfig,
-  options?: { isAppX: boolean }
+  options?: { isAndroidX: boolean }
 ): Plugin {
   // assetHashToFilenameMap initialization in buildStart causes getAssetFilename to return undefined
   assetHashToFilenameMap.set(config, new Map())
@@ -86,7 +86,7 @@ export function assetPlugin(
       const url = await fileToUrl(
         id,
         config,
-        options?.isAppX
+        options?.isAndroidX
           ? ({
               emitFile(emittedFile: EmittedAsset) {
                 // 直接写入目标目录
@@ -101,7 +101,7 @@ export function assetPlugin(
             } as PluginContext)
           : this
       )
-      if (options?.isAppX) {
+      if (options?.isAndroidX) {
         this.emitFile({
           type: 'asset',
           fileName: normalizeNodeModules(

packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts

@@ -184,9 +184,9 @@ function wrapResolve(
 export function cssPlugin(
   config: ResolvedConfig,
   options: {
-    isAppX: boolean
+    isAndroidX: boolean
     getDescriptor?(filename: string): SFCDescriptor | undefined
-  } = { isAppX: false }
+  } = { isAndroidX: false }
 ): Plugin {
   let server: ViteDevServer
   let moduleCache: Map<string, Record<string, string>>
@@ -231,7 +231,7 @@ export function cssPlugin(
           return fileToUrl(
             resolved,
             config,
-            options?.isAppX
+            options?.isAndroidX
               ? ({
                   emitFile(emittedFile: EmittedAsset) {
                     // 直接写入目标目录

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

@@ -13,7 +13,7 @@ export interface UniViteFilterPluginOptions {
 
 export function injectAssetPlugin(
   config: ResolvedConfig,
-  options?: { isAppX: boolean }
+  options?: { isAndroidX: boolean }
 ) {
   replacePlugins([assetPlugin(config, options)], config)
 }

packages/vite-plugin-uni/src/configResolved/plugins/ssr.ts

@@ -25,7 +25,7 @@ export function uniSSRPlugin(
 ): Plugin {
   const filter = createFilter(options.include, options.exclude)
   return {
-    name: 'uni:ssr',
+    name: 'uni:ssr:ref',
     transform(code, id) {
       if (!filter(id)) return null
       if (!KEYED_FUNC_RE.test(code)) {

packages/vite-plugin-uni/src/vue/options.ts

@@ -148,10 +148,11 @@ export function initPluginVueOptions(
   compilerOptions.hoistStatic = false
   // 小程序使用了
   ;(compilerOptions as any).root = process.env.UNI_INPUT_DIR
-  // app-nvue 需要启用 customElement 机制来内联 styles
-  if (process.env.UNI_COMPILER === 'nvue') {
+  const isX = process.env.UNI_APP_X === 'true'
+  // app-nvue | app-uvue 需要启用 customElement 机制来内联 styles
+  if (process.env.UNI_COMPILER === 'nvue' || isX) {
     vueOptions.customElement = true
-    if (process.env.UNI_RENDERER_NATIVE !== 'appService') {
+    if (process.env.UNI_RENDERER_NATIVE !== 'appService' || isX) {
       // nvue 需要使用自己的 compiler，来移除 scoped
       vueOptions.compiler = createNVueCompiler()
     }