样式相关优化

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -1,4 +1,4 @@
-import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn, getFocusedNavigation, noop } from '@mpxjs/utils'
+import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn, getFocusedNavigation } from '@mpxjs/utils'
 import { StyleSheet, Dimensions } from 'react-native'
 import { reactive } from '../../observer/reactive'
 import Mpx from '../../index'
@@ -12,7 +12,7 @@ global.__mpxPageSizeCountMap = reactive({})
 
 global.__GCC = function (className, classMap, classMapValueCache) {
   if (!classMapValueCache.has(className)) {
-    const styleObj = classMap[className]?.()
+    const styleObj = classMap[className]?.(global.__formatValue)
     styleObj && classMapValueCache.set(className, styleObj)
   }
   return classMapValueCache.get(className)
@@ -266,18 +266,17 @@ export default function styleHelperMixin () {
 
           classString.split(/\s+/).forEach((className) => {
             let localStyle, appStyle
-            const getAppClassStyle = global.__getAppClassStyle || noop
-            if (localStyle = this.__getClassStyle(className)) {
+            if (localStyle = this.__getClassStyle?.(className)) {
               if (localStyle._media?.length) {
                 mergeResult(localStyle._default, getMediaStyle(localStyle._media))
               } else {
-                mergeResult(localStyle._default)
+                mergeResult(localStyle)
               }
-            } else if (appStyle = getAppClassStyle(className)) {
+            } else if (appStyle = global.__getAppClassStyle?.(className)) {
               if (appStyle._media?.length) {
                 mergeResult(appStyle._default, getMediaStyle(appStyle._media))
               } else {
-                mergeResult(appStyle._default)
+                mergeResult(appStyle)
               }
             } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -547,6 +547,15 @@ module.exports = function getSpec ({ warn, error }) {
     return { prop, value: values[0].trim() }
   }
 
+  const formatZIndex = ({ prop, value, selector }, { mode }) => {
+    // z-index auto 报错
+    if (value === 'auto') {
+      error(`Property [${prop}] does not supported [${value}] on ${selector} in ${mode} environment, please check again!`)
+      return { prop, value: 0 }
+    }
+    return { prop, value: value }
+  }
+
   // const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
   //   value = value.trim()
   //   if (value === 'none') {
@@ -612,6 +621,12 @@ module.exports = function getSpec ({ warn, error }) {
         android: formatFontFamily,
         harmony: formatFontFamily
       },
+      {
+        test: 'z-index',
+        ios: formatZIndex,
+        android: formatZIndex,
+        harmony: formatZIndex
+      },
       // {
       //   test: 'box-shadow',
       //   ios: formatBoxShadow,

packages/webpack-plugin/lib/react/processStyles.js

@@ -48,26 +48,29 @@ module.exports = function (styles, {
     }, (err) => {
       if (err) return callback(err)
       try {
+        output += `
+          global.__classCaches = global.__classCaches || []
+          var __classCache = new Map()
+          global.__classCaches.push(__classCache)`
+        const formatValueName = '_f'
         const classMap = getClassMap({
           content,
           filename: loaderContext.resourcePath,
           mode,
           srcMode,
           ctorType,
           warn,
-          error
+          error,
+          formatValueName
         })
         const classMapCode = Object.entries(classMap).reduce((result, [key, value]) => {
           result !== '' && (result += ',')
-          result += `${isValidIdentifierStr(key) ? `${key}` : `['${key}']`}: () => (${shallowStringify(value)})`
+          result += `${isValidIdentifierStr(key) ? `${key}` : `['${key}']`}: function(${formatValueName}){return ${shallowStringify(value)};}`
           return result
         }, '')
         if (ctorType === 'app') {
           output += `
-          global.__classCaches = global.__classCaches || []
-          const __classCache = new Map()
-          global.__classCaches.push(__classCache)
-          let __appClassMap
+          var __appClassMap
           global.__getAppClassStyle = function(className) {
             if(!__appClassMap) {
               __appClassMap = {${classMapCode}};
@@ -76,10 +79,7 @@ module.exports = function (styles, {
           };\n`
         } else {
           output += `
-          global.__classCaches = global.__classCaches || []
-          const __classCache = new Map()
-          global.__classCaches.push(__classCache)
-          let __classMap
+          var __classMap
           global.currentInject.injectMethods = {
             __getClassStyle: function(className) {
               if(!__classMap) {

packages/webpack-plugin/lib/react/style-helper.js

@@ -8,14 +8,9 @@ const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh|px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error }) {
+function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueName, warn, error }) {
   const classMap = ctorType === 'page'
-      ? {
-          [MPX_TAG_PAGE_SELECTOR]: {
-            _media: [],
-            _default: { flex: 1, height: "'100%'" }
-          }
-        }
+      ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1, height: "'100%'" } }
       : {}
 
   const root = postcss.parse(content, {
@@ -30,12 +25,12 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
         value = matched[1]
         needStringify = false
       } else {
-        value = `global.__formatValue(${+matched[1]}, '${matched[2]}')`
+        value = `${formatValueName}(${+matched[1]}, '${matched[2]}')`
         needStringify = false
       }
     }
     if (hairlineRegExp.test(value)) {
-      value = `global.__formatValue(${JSON.stringify(value)}, 'hairlineWidth')`
+      value = `${formatValueName}(${JSON.stringify(value)}, 'hairlineWidth')`
       needStringify = false
     }
     return needStringify ? JSON.stringify(value) : value
@@ -93,7 +88,7 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
   root.walkRules(rule => {
     const classMapValue = {}
     rule.walkDecls(({ prop, value }) => {
-      if (cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
+      if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
       let newData = rulesRunner({ prop, value, selector: rule.selector })
       if (!newData) return
       if (!Array.isArray(newData)) {
@@ -140,19 +135,27 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
     if (classMapKeys.length) {
       classMapKeys.forEach((key) => {
         if (Object.keys(classMapValue).length) {
-          const _default = classMap[key]?._default || {}
-          const _media = classMap[key]?._media || []
+          let _default = classMap[key]?._default
+          let _media = classMap[key]?._media
           if (isMedia) {
+            // 当前是媒体查询
+            _default = _default || {}
+            _media = _media || []
             _media.push({
               options,
               value: classMapValue
             })
-          } else {
+            classMap[key] = {
+              _media,
+              _default
+            }
+          } else if (_default) {
+            // 已有媒体查询数据，此次非媒体查询
             Object.assign(_default, classMapValue)
-          }
-          classMap[key] = {
-            _media,
-            _default
+          } else {
+            // 无媒体查询
+            const val = classMap[key] || {}
+            classMap[key] = Object.assign(val, classMapValue)
           }
         }
       })

packages/webpack-plugin/lib/runtime/components/react/utils.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement, MutableRefObject } from 'react'
 import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
-import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
+import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, isEmptyObject } from '@mpxjs/utils'
 import { VarContext, ScrollViewContext, RouteContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
@@ -238,7 +238,7 @@ function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<s
       const resolved = resolveVar(value, varContext)
       if (resolved === undefined) {
         delete target[key]
-        error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
+        // error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
         return
       }
       target[key] = resolved
@@ -388,6 +388,14 @@ function transformBoxShadow (styleObj: Record<string, any>) {
   }, '')
 }
 
+function transformZIndex (styleObj: Record<string, any>) {
+  if (!styleObj.zIndex || typeof styleObj.zIndex === 'number') return
+  if (styleObj.zIndex === 'auto') {
+    error('Property [z-index] does not supported [auto], please check again!')
+    styleObj.zIndex = 0
+  }
+}
+
 interface TransformStyleConfig {
   enableVar?: boolean
   externalVarContext?: Record<string, any>
@@ -444,17 +452,20 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
     }
   }
 
-  function calcVisitor ({ value, keyPath }: VisitorArg) {
+  function calcVisitor ({ key, value, keyPath }: VisitorArg) {
     if (calcUseRegExp.test(value)) {
+      // calc translate & border-radius 的百分比计算
+      if (hasOwn(selfPercentRule, key) && /%/.test(value)) {
+        hasSelfPercent = true
+        percentKeyPaths.push(keyPath.slice())
+      }
       calcKeyPaths.push(keyPath.slice())
     }
   }
 
   function percentVisitor ({ key, value, keyPath }: VisitorArg) {
-    if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
-      hasSelfPercent = true
-      percentKeyPaths.push(keyPath.slice())
-    } else if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
+    // fixme 去掉 translate & border-radius 的百分比计算
+    if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
       percentKeyPaths.push(keyPath.slice())
     }
   }
@@ -464,10 +475,10 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
       [envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }))
     }
   }
-
+  // transform 字符串格式转化数组格式(先转数组再处理css var)
+  transformTransform(styleObj)
   // traverse var & generate normalStyle
   traverseStyle(styleObj, [varVisitor])
-
   hasVarDec = hasVarDec || !!externalVarContext
   enableVar = enableVar || hasVarDec || hasVarUse
   const enableVarRef = useRef(enableVar)
@@ -531,10 +542,11 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
   transformStringify(normalStyle)
   // transform rpx to px
   transformBoxShadow(normalStyle)
-
-  // transform 字符串格式转化数组格式
-  transformTransform(normalStyle)
-
+  // transform z-index auto to 0
+  transformZIndex(normalStyle)
+  if (Array.isArray(normalStyle.transform)) {
+    normalStyle.transform = normalStyle.transform.filter(item => !isEmptyObject(item))
+  }
   return {
     hasVarDec,
     varContextRef,

packages/webpack-plugin/test/platform/wx/style-helper-rn.spec.js

@@ -52,7 +52,7 @@ describe('React Native style validation for CSS variables', () => {
         ...config
       })
 
-      expect(result.text._default).toEqual({
+      expect(result.text).toEqual({
         letterSpacing: '"var(--x, 2px)"',
         lineHeight: '"var(--y, 1.5)"'
       })
@@ -69,7 +69,7 @@ describe('React Native style validation for CSS variables', () => {
         ...config
       })
 
-      expect(result.text._default).toEqual({
+      expect(result.text).toEqual({
         letterSpacing: '"var(--x)"',
         lineHeight: '"var(--y)"'
       })
@@ -102,7 +102,7 @@ describe('React Native style validation for CSS variables', () => {
         ...config
       })
 
-      expect(result.text._default).toEqual({
+      expect(result.text).toEqual({
         letterSpacing: '"var(--x, var(--y, 2px))"'
       })
       expect(config.error).not.toHaveBeenCalled()
@@ -119,7 +119,7 @@ describe('React Native style validation for CSS variables', () => {
         ...config
       })
 
-      expect(result.text._default).toEqual({
+      expect(result.text).toEqual({
         letterSpacing: '"var(--a, var(--b, var(--c, var(--d, var(--e, 2px)))))"'
       })
       expect(config.error).not.toHaveBeenCalled()
@@ -159,7 +159,7 @@ describe('React Native style validation for CSS variables', () => {
       })
 
       // 由于 var(--x) 没有 fallback，整个表达式是合法的，应该保留
-      expect(result.text._default).toEqual({
+      expect(result.text).toEqual({
         letterSpacing: '"var(--x, var(--x))"'
       })
       expect(config.error).not.toHaveBeenCalled()
@@ -181,7 +181,7 @@ describe('React Native style validation for CSS variables', () => {
       })
 
       // 应该成功解析，因为最终 fallback 是有效的 2px
-      expect(result.text._default).toEqual({
+      expect(result.text).toEqual({
         letterSpacing: '"var(--a, var(--b, var(--a, 2px)))"'
       })
       expect(config.error).not.toHaveBeenCalled()
@@ -215,7 +215,7 @@ describe('React Native style validation for CSS variables', () => {
         ...config
       })
 
-      expect(result.box._default).toHaveProperty('marginLeft')
+      expect(result.box).toHaveProperty('marginLeft')
       expect(config.error).not.toHaveBeenCalled()
     })
   })
@@ -245,7 +245,7 @@ describe('React Native style validation for CSS variables', () => {
         ...config
       })
 
-      expect(result.text._default).toEqual({
+      expect(result.text).toEqual({
         letterSpacing: '2'
       })
       expect(config.error).not.toHaveBeenCalled()