feat: dom2-mp下样式隔离时加入uvue.wxss的处理

Author: schizobulia

packages/uni-cli-shared/src/mp/externalClasses.ts

@@ -7,6 +7,7 @@ import {
   isStringLiteral,
 } from '@babel/types'
 import { walk } from 'estree-walker'
+import { normalizePath } from '../utils'
 
 const externalClassesCache = new Map<
   string,
@@ -25,19 +26,27 @@ export interface PageExternalClassesInfo {
   hasAppAndPageStyle?: boolean
 }
 
-const pageStyleIsolationCache = new Map<string, boolean>() // 子组件是否存在 styleIsolation 为app
+export type StyleIsolation = 'isolated' | 'app' | 'app-and-page'
+
+const pageStyleIsolationCache = new Map<
+  string,
+  {
+    styleIsolation: StyleIsolation
+    isPage: boolean
+  }
+>()
 
 const pageExternalClassesCache = new Map<string, PageExternalClassesInfo>()
 
 export function findPageExternalClasses(filename: string) {
-  return pageExternalClassesCache.get(filename)
+  return pageExternalClassesCache.get(normalizePath(filename))
 }
 
 export function updatePageExternalClasses(
   filename: string,
   info: PageExternalClassesInfo
 ) {
-  pageExternalClassesCache.set(filename, info)
+  pageExternalClassesCache.set(normalizePath(filename), info)
 }
 
 export function addPageExternalClasses(
@@ -46,10 +55,11 @@ export function addPageExternalClasses(
   hasDynamic: boolean,
   hasAppAndPageStyle?: boolean
 ) {
-  let info = pageExternalClassesCache.get(filename)
+  const normalizedFilename = normalizePath(filename)
+  let info = pageExternalClassesCache.get(normalizedFilename)
   if (!info) {
     info = { staticClasses: new Set(), hasDynamic: false }
-    pageExternalClassesCache.set(filename, info)
+    pageExternalClassesCache.set(normalizedFilename, info)
   }
   staticClasses.forEach((cls) => info!.staticClasses.add(cls))
   if (hasDynamic) {
@@ -61,22 +71,22 @@ export function addPageExternalClasses(
 }
 
 export function clearPageExternalClasses(filename: string) {
-  pageExternalClassesCache.delete(filename)
+  pageExternalClassesCache.delete(normalizePath(filename))
 }
 
 export function hasExternalClasses(code: string) {
   return code.includes('externalClasses')
 }
 
 export function findMiniProgramComponentExternalClasses(filename: string) {
-  return externalClassesCache.get(filename)
+  return externalClassesCache.get(normalizePath(filename))
 }
 
 export function updateMiniProgramComponentExternalClasses(
   filename: string,
   value: { mtime: number; classes: string[] }
 ) {
-  externalClassesCache.set(filename, value)
+  externalClassesCache.set(normalizePath(filename), value)
 }
 
 export function parseExternalClasses(ast: Program) {
@@ -103,8 +113,8 @@ export function parseExternalClasses(ast: Program) {
   return classes
 }
 
-export function parseStyleIsolation(ast: Program) {
-  let styleIsolationValue = ''
+export function parseStyleIsolation(ast: Program): StyleIsolation | '' {
+  let styleIsolationValue: StyleIsolation | '' = ''
   ;(walk as any)(ast, {
     enter(child: Node, parent: Node) {
       if (!isIdentifier(child) || child.name !== 'styleIsolation') {
@@ -116,22 +126,36 @@ export function parseStyleIsolation(ast: Program) {
       if (!isStringLiteral(parent.value)) {
         return
       }
-      if (parent.value.value === 'app') {
-        styleIsolationValue = 'app'
+      if (
+        parent.value.value === 'app' ||
+        parent.value.value === 'app-and-page' ||
+        parent.value.value === 'isolated'
+      ) {
+        styleIsolationValue = parent.value.value
       }
       return parent.value.value
     },
   })
   return styleIsolationValue
 }
 
+/**
+ * 目前只有小程序平台才会走这个逻辑
+ * @param pagePahth
+ * @param value
+ * @param isPage
+ */
 export function updateMiniProgramComponentStyleIsolation(
   pagePahth: string,
-  value: boolean
+  value: StyleIsolation,
+  isPage = false
 ) {
-  pageStyleIsolationCache.set(pagePahth, value)
+  pageStyleIsolationCache.set(normalizePath(pagePahth), {
+    styleIsolation: value,
+    isPage,
+  })
 }
 
 export function findMiniProgramComponentStyleIsolation(pagePahth: string) {
-  return pageStyleIsolationCache.get(pagePahth)
+  return pageStyleIsolationCache.get(normalizePath(pagePahth))
 }

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

@@ -6,6 +6,7 @@ import {
   createEncryptCssUrlReplacer,
   createShadowImageUrl,
   cssPostPlugin,
+  findMiniProgramComponentStyleIsolation,
   getUniModulesEncryptType,
   injectAssetPlugin,
   injectCssPlugin,
@@ -30,6 +31,7 @@ import {
   parseVirtualComponentPath,
   parseVirtualPagePath,
 } from '../plugins/entry'
+import path from 'path'
 
 const debugNVueCss = debug('uni:nvue-css')
 const cssVars = `page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}`
@@ -185,11 +187,35 @@ export function createConfigResolved({
                 (page.style as any).renderer === 'skyline')
 
             if (!shouldNotResetStyle) {
-              /**
-               * 兼容发布为小程序分包模式
-               */
-              const uvueCssPath = relativeFile(filename, `uvue${extname}`)
-              cssCode = `@import "${uvueCssPath}";\n` + cssCode
+              let addUvueCss = false
+              if (
+                process.env.UNI_APP_STYLE_ISOLATION_VERSION === '2' &&
+                process.env.UNI_APP_X === 'true'
+              ) {
+                const basePath = path.join(
+                  process.env.UNI_INPUT_DIR!,
+                  removeExt(filename)
+                )
+                const styleIsolation =
+                  findMiniProgramComponentStyleIsolation(basePath + '.uvue') ||
+                  findMiniProgramComponentStyleIsolation(basePath + '.vue')
+                if (
+                  styleIsolation &&
+                  styleIsolation.isPage &&
+                  styleIsolation.styleIsolation === 'isolated'
+                ) {
+                  addUvueCss = true
+                }
+              } else {
+                addUvueCss = true
+              }
+              if (addUvueCss) {
+                /**
+                 * 兼容发布为小程序分包模式
+                 */
+                const uvueCssPath = relativeFile(filename, `uvue${extname}`)
+                cssCode = `@import "${uvueCssPath}";\n` + cssCode
+              }
             }
             return cssCode
           }

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

@@ -2,6 +2,7 @@ import { extend } from '@vue/shared'
 import { once } from '@dcloudio/uni-shared'
 import {
   findMiniProgramComponentStyleIsolation,
+  isAppVue,
   isMiniProgramPageFile,
   parseStyleIsolation,
   resolveBuiltIn,
@@ -36,8 +37,21 @@ function rewriteCompileScript() {
   compiler.compileStyleAsync = (
     options: SFCAsyncStyleCompileOptions
   ): Promise<SFCStyleCompileResults> => {
-    if (findMiniProgramComponentStyleIsolation(options.filename)) {
-      options.source = `@import "/app.wxss";\n` + options.source
+    if (
+      process.env.UNI_APP_STYLE_ISOLATION_VERSION === '2' &&
+      process.env.UNI_APP_X === 'true' &&
+      isAppVue(options.filename)
+    ) {
+      options.source = `@import "/uvue.wxss";\n` + options.source
+    }
+    const { styleIsolation, isPage } =
+      findMiniProgramComponentStyleIsolation(options.filename) || {}
+    if (!isPage) {
+      if (styleIsolation === 'app') {
+        options.source = `@import "/app.wxss";\n` + options.source
+      } else if (styleIsolation === 'isolated') {
+        options.source = `@import "/uvue.wxss";\n` + options.source
+      }
     }
     // https://github.com/dcloudio/uni-app/issues/4076
     options.isProd = true
@@ -56,6 +70,7 @@ function rewriteCompileScript() {
     // https://github.com/dcloudio/uni-app/issues/4076
     // dev模式下，会生成：{ "83a5a03c-style.color": style.color}
     options.isProd = true
+    let res = compileScript(sfc, options)
     if (
       process.env.UNI_APP_STYLE_ISOLATION_VERSION === '2' &&
       process.env.UNI_APP_X === 'true' &&
@@ -66,11 +81,15 @@ function rewriteCompileScript() {
         sfc.filename,
         process.env.UNI_INPUT_DIR
       )
-    }
-    let res = compileScript(sfc, options)
-    // @ts-expect-error
-    if (!options.__isPage && parseStyleIsolation(res)) {
-      updateMiniProgramComponentStyleIsolation(sfc.filename, true)
+      const styleIsolation = parseStyleIsolation(res)
+      if (styleIsolation) {
+        // @ts-expect-error
+        updateMiniProgramComponentStyleIsolation(
+          sfc.filename,
+          styleIsolation,
+          options.__isPage
+        )
+      }
     }
     return res
   }