@mpxjs/webpack-plugin 2.9.69-beta.0 → 2.9.69-beta.10

package/lib/runtime/components/react/useAnimationHooks.ts

@@ -13,6 +13,7 @@ import {
   WithTimingConfig,
   AnimationCallback
 } from 'react-native-reanimated'
+import { error } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -39,10 +40,10 @@ export type AnimationProp = {
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
   linear: Easing.linear,
-  ease: Easing.ease,
-  'ease-in': Easing.in(Easing.ease),
-  'ease-in-out': Easing.inOut(Easing.ease),
-  'ease-out': Easing.out(Easing.ease)
+  ease: Easing.inOut(Easing.ease),
+  'ease-in': Easing.in(Easing.poly(3)),
+  'ease-in-out': Easing.inOut(Easing.poly(3)),
+  'ease-out': Easing.out(Easing.poly(3))
   // 'step-start': '',
   // 'step-end': ''
 }
@@ -110,7 +111,7 @@ const parseTransform = (transformStr: string) => {
   const values = parseValues(transformStr)
   const transform: {[propName: string]: string|number|number[]}[] = []
   values.forEach(item => {
-    const match = item.match(/([/\w]+)\(([^)]+)\)/)
+    const match = item.match(/([/\w]+)\((.+)\)/)
     if (match && match.length >= 3) {
       let key = match[1]
       const val = match[2]
@@ -166,20 +167,32 @@ const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
   })
 }
 
-export default function useAnimationHooks<T, P> (props: _ViewProps) {
-  const { style = {}, animation } = props
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
+  const { style = {}, animation, enableAnimation } = props
+
+  const enableStyleAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableStyleAnimation)
+  if (enableAnimationRef.current !== enableStyleAnimation) {
+    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+
+  if (!enableAnimationRef.current) return { enableStyleAnimation: false }
+
   const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedStyleKeys = useSharedValue([] as (string|string[])[])
   // 记录动画key的style样式值 没有的话设置为false
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean})
   // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
   // ** 全量 style prop sharedValue
   // 不能做增量的原因：
   // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
   // 2 尝试用 useSharedValue，因为实际触发的 style prop 需要是 sharedValue 才能驱动动画，若外层 shareValMap 也是 sharedValue，动画无法驱动。
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const shareValMap = useMemo(() => {
     return Object.keys(InitialValue).reduce((valMap, key) => {
       const defaultVal = getInitialVal(key, isTransform(key))
@@ -188,6 +201,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     }, {} as { [propName: keyof ExtendedViewStyle]: SharedValue<string|number> })
   }, [])
   // ** 获取动画样式prop & 驱动动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     if (id === -1) return
     // 更新动画样式 key map
@@ -208,6 +222,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
   //   })
   // }, [style])
   // ** 清空动画
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     return () => {
       Object.values(shareValMap).forEach((value) => {
@@ -240,14 +255,13 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       }
       // 添加每个key的多次step动画
       animatedKeys.forEach(key => {
+        const ruleV = isTransform(key) ? transform.get(key) : rules.get(key)
         // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-        const toVal = rules.get(key) !== undefined
-          ? rules.get(key)
-          : transform.get(key) !== undefined
-            ? transform.get(key)
-            : index > 0
-              ? lastValueMap[key]
-              : shareValMap[key].value
+        const toVal = ruleV !== undefined
+          ? ruleV
+          : index > 0
+            ? lastValueMap[key]
+            : shareValMap[key].value
         const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
         needSetCallback = false
         if (!sequence[key]) {
@@ -336,7 +350,8 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     }, {} as { [propName: string]: string | number })
   }
   // ** 生成动画样式
-  return useAnimatedStyle(() => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const animationStyle = useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
     return animatedStyleKeys.value.reduce((styles, key) => {
       // console.info('getAnimationStyles', key, shareValMap[key].value)
@@ -354,4 +369,9 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       return styles
     }, {} as ExtendedViewStyle)
   })
+
+  return {
+    enableStyleAnimation: enableAnimationRef.current,
+    animationStyle
+  }
 }

package/lib/runtime/components/react/utils.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement } from 'react'
-import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
+import { LayoutChangeEvent, TextStyle, ImageProps, Image, Platform } from 'react-native'
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils'
-import { VarContext } from './context'
+import { VarContext, ScrollViewContext } from './context'
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
-import type { AnyFunc, ExtendedFunctionComponent } from './types/common'
+import type { AnyFunc, ExtendedFunctionComponent, ExtendedViewStyle } from './types/common'
+import { runOnJS } from 'react-native-reanimated'
+import { Gesture } from 'react-native-gesture-handler'
 
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/
@@ -18,6 +20,9 @@ export const HIDDEN_STYLE = {
   opacity: 0
 }
 
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
+
 const varDecRegExp = /^--.*/
 const varUseRegExp = /var\(/
 const calcUseRegExp = /calc\(/
@@ -497,6 +502,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
       props.onLayout && props.onLayout(e)
     }
   }
+
   return {
     layoutRef,
     layoutStyle,
@@ -534,13 +540,14 @@ export const debounce = <T extends AnyFunc> (
 ): ((...args: Parameters<T>) => void) & { clear: () => void } => {
   let timer: any
   const wrapper = (...args: ReadonlyArray<any>) => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
     timer = setTimeout(() => {
       func(...args)
     }, delay)
   }
   wrapper.clear = () => {
-    clearTimeout(timer)
+    timer && clearTimeout(timer)
+    timer = null
   }
   return wrapper
 }
@@ -610,3 +617,130 @@ export function pickStyle (styleObj: Record<string, any> = {}, pickedKeys: Array
     return acc
   }, {})
 }
+
+export function useHoverStyle ({ hoverStyle, hoverStartTime, hoverStayTime, disabled } : { hoverStyle?: ExtendedViewStyle, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+  const enableHoverStyle = !!hoverStyle
+  const enableHoverStyleRef = useRef(enableHoverStyle)
+  if (enableHoverStyleRef.current !== enableHoverStyle) {
+    throw new Error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
+  }
+
+  if (!enableHoverStyle) return { enableHoverStyle }
+
+  const gestureRef = useContext(ScrollViewContext).gestureRef
+  const [isHover, setIsHover] = useState(false)
+  const dataRef = useRef<{
+    startTimer?: ReturnType<typeof setTimeout>
+    stayTimer?: ReturnType<typeof setTimeout>
+  }>({})
+
+  useEffect(() => {
+    return () => {
+      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    }
+  }, [])
+
+  const setStartTimer = () => {
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.startTimer = setTimeout(() => {
+      setIsHover(true)
+    }, +hoverStartTime)
+  }
+
+  const setStayTimer = () => {
+    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.stayTimer = setTimeout(() => {
+      setIsHover(false)
+    }, +hoverStayTime)
+  }
+
+  const gesture = useMemo(() => {
+    return Gesture.Pan()
+      .onTouchesDown(() => {
+        'worklet'
+        if (disabled) return
+        runOnJS(setStartTimer)()
+      })
+      .onTouchesUp(() => {
+        'worklet'
+        if (disabled) return
+        runOnJS(setStayTimer)()
+      })
+  }, [disabled])
+
+  if (gestureRef) {
+    gesture.simultaneousWithExternalGesture(gestureRef)
+  }
+
+  return {
+    isHover,
+    gesture,
+    enableHoverStyle
+  }
+}
+
+export function useHover ({ enableHover, hoverStartTime, hoverStayTime, disabled } : { enableHover: boolean, hoverStartTime: number, hoverStayTime: number, disabled?: boolean }) {
+  const enableHoverRef = useRef(enableHover)
+  if (enableHoverRef.current !== enableHover) {
+    error('[Mpx runtime error]: hover-class use should be stable in the component lifecycle.')
+  }
+
+  if (!enableHoverRef.current) return { isHover: false }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const gestureRef = useContext(ScrollViewContext).gestureRef
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [isHover, setIsHover] = useState(false)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dataRef = useRef<{
+    startTimer?: ReturnType<typeof setTimeout>
+    stayTimer?: ReturnType<typeof setTimeout>
+  }>({})
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    return () => {
+      dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+      dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    }
+  }, [])
+
+  const setStartTimer = () => {
+    if (disabled) return
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.startTimer = setTimeout(() => {
+      setIsHover(true)
+    }, +hoverStartTime)
+  }
+
+  const setStayTimer = () => {
+    if (disabled) return
+    dataRef.current.stayTimer && clearTimeout(dataRef.current.stayTimer)
+    dataRef.current.startTimer && clearTimeout(dataRef.current.startTimer)
+    dataRef.current.stayTimer = setTimeout(() => {
+      setIsHover(false)
+    }, +hoverStayTime)
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const gesture = useMemo(() => {
+    return Gesture.Pan()
+      .onTouchesDown(() => {
+        'worklet'
+        runOnJS(setStartTimer)()
+      })
+      .onTouchesUp(() => {
+        'worklet'
+        runOnJS(setStayTimer)()
+      })
+  }, [])
+
+  if (gestureRef) {
+    gesture.simultaneousWithExternalGesture(gestureRef)
+  }
+
+  return {
+    isHover,
+    gesture
+  }
+}

package/lib/style-compiler/index.js

@@ -4,7 +4,6 @@ const loadPostcssConfig = require('./load-postcss-config')
 const { MPX_ROOT_VIEW, MPX_DISABLE_EXTRACTOR_CACHE } = require('../utils/const')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
-const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
 const cssArrayList = require('./plugins/css-array-list')
@@ -58,9 +57,9 @@ module.exports = function (css, map) {
       plugins.push(transSpecial({ id }))
     }
 
-    plugins.push(pluginCondStrip({
-      defs
-    }))
+    // plugins.push(pluginCondStrip({
+    //   defs
+    // }))
 
     for (const item of transRpxRules) {
       const {

package/lib/style-compiler/strip-conditional-loader.js

@@ -0,0 +1,118 @@
+const MagicString = require('magic-string')
+
+function cssConditionalStrip (cssContent, defs) {
+  const ms = new MagicString(cssContent)
+
+  // 正则匹配 @mpx-if, @mpx-elif, @mpx-else, @mpx-endif 的模式
+  const ifPattern = /\/\*\s*@mpx-if\s*\((.*?)\)\s*\*\//gs
+  const elifPattern = /\/\*\s*@mpx-elif\s*\((.*?)\)\s*\*\//gs
+  const elsePattern = /\/\*\s*@mpx-else\s*\*\//gs
+  const endifPattern = /\/\*\s*@mpx-endif\s*\*\//gs
+
+  function evaluateCondition (condition) {
+    // 替换变量
+    for (const key in defs) {
+      condition = condition.replace(new RegExp(`\\b${key}\\b`, 'g'), JSON.stringify(defs[key]))
+    }
+
+    // 解析条件表达式
+    try {
+      // eslint-disable-next-line no-new-func
+      return Function('"use strict";return (' + condition + ')')()
+    } catch (e) {
+      throw new Error(`Failed to evaluate condition: ${condition}`)
+    }
+  }
+
+  let currentStart = 0
+  function processCondition (start, end, condition) {
+    const conditionResult = evaluateCondition(condition)
+    let hasElse = false
+    let elseStart = -1
+    let elseLen = 0
+    currentStart = end + 1
+
+    while (currentStart < ms.original.length) {
+      elsePattern.lastIndex = currentStart
+      const elseMatch = elsePattern.exec(ms.original)
+      if (elseMatch) {
+        elseLen = elseMatch[0].length
+      }
+
+      ifPattern.lastIndex = currentStart
+      const ifMatch = ifPattern.exec(ms.original)
+
+      elifPattern.lastIndex = currentStart
+      const elseIfMatch = elifPattern.exec(ms.original)
+
+      endifPattern.lastIndex = currentStart
+      const endifMatch = endifPattern.exec(ms.original)
+
+      const nextIf = ifMatch ? ifMatch.index : Infinity
+      const nextElseIf = elseIfMatch ? elseIfMatch.index : Infinity
+      const nextElse = elseMatch ? elseMatch.index : Infinity
+      const nextEndif = endifMatch ? endifMatch.index : Infinity
+
+      const nextMarker = Math.min(nextIf, nextElseIf, nextElse, nextEndif)
+
+      if (nextMarker === Infinity) break
+
+      if (nextMarker === nextElse) {
+        // 处理 @mpx-else
+        hasElse = true
+        elseStart = nextElse
+        currentStart = elseMatch.index + elseLen
+        ms.remove(elseStart, elseStart + elseLen) // 移除 @mpx-else 注释
+      } else if (nextMarker === nextElseIf) {
+        // 处理 @mpx-elif
+        if (!conditionResult) {
+          // 前边的if为false，则直接移除前边代码
+          ms.remove(start, nextElseIf)
+        }
+        currentStart = nextElseIf + elseIfMatch[0].length
+        ms.remove(nextElseIf, nextElseIf + elseIfMatch[0].length) // 移除 @mpx-elif 注释
+        processCondition(nextElseIf, nextElseIf + elseIfMatch[0].length, elseIfMatch[1])
+      } else if (nextMarker === nextIf) {
+        // 处理嵌套的 @mpx-if
+        // 如果遇到了新的 @mpx-if，则递归处理
+        currentStart = nextIf + ifMatch[0].length
+        ms.remove(nextIf, nextIf + ifMatch[0].length) // 移除 @mpx-if 注释
+        processCondition(nextIf, nextIf + ifMatch[0].length, ifMatch[1])
+      } else if (nextMarker === nextEndif) {
+        // 处理 @mpx-endif block块
+        if (conditionResult && hasElse) {
+          // 移除 @mpx-else 至 @mpx-endif 代码
+          ms.remove(elseStart, endifMatch.index + endifMatch[0].length)
+        } else if (!conditionResult && hasElse) {
+          ms.remove(start, elseStart + elseLen)
+        } else if (!conditionResult) {
+          ms.remove(start, endifMatch.index + endifMatch[0].length)
+        }
+        ms.remove(endifMatch.index, endifMatch.index + endifMatch[0].length) // 移除 @mpx-endif 注释
+        currentStart = endifMatch.index + endifMatch[0].length
+        break
+      }
+      // 兜底更新当前开始位置
+      if (currentStart < nextMarker) {
+        currentStart = nextMarker + 1
+      }
+    }
+  }
+
+  let match
+  while ((match = ifPattern.exec(ms.original)) !== null) {
+    processCondition(match.index, ifPattern.lastIndex, match[1])
+    // 移除匹配到的 @mpx-if 注释
+    ms.remove(match.index, match.index + match[0].length)
+    ifPattern.lastIndex = currentStart
+  }
+
+  return ms.toString()
+}
+
+module.exports = function (css) {
+  this.cacheable()
+  const mpx = this.getMpx()
+  const defs = mpx.defs
+  return cssConditionalStrip(css, defs)
+}

package/lib/template-compiler/compiler.js

@@ -117,7 +117,6 @@ let hasOptionalChaining = false
 let processingTemplate = false
 const rulesResultMap = new Map()
 let usingComponents = []
-let usingComponentsInfo = {}
 
 function updateForScopesMap () {
   forScopesMap = {}
@@ -637,7 +636,6 @@ function parse (template, options) {
 
   if (typeof options.usingComponentsInfo === 'string') options.usingComponentsInfo = JSON.parse(options.usingComponentsInfo)
   usingComponents = Object.keys(options.usingComponentsInfo)
-  usingComponentsInfo = options.usingComponentsInfo
 
   const _warn = content => {
     const currentElementRuleResult = rulesResultMap.get(currentEl) || rulesResultMap.set(currentEl, {
@@ -1209,7 +1207,7 @@ function processEventReact (el) {
   for (const type in eventConfigMap) {
     const { configs } = eventConfigMap[type]
     if (!configs.length) continue
-    const needBind = configs.length > 1 || configs[0].hasArgs
+    const needBind = configs.length > 1 || configs[0].hasArgs || tagRE.test(configs[0].value)
     if (needBind) {
       configs.forEach(({ name }) => {
         if (name) {
@@ -1773,7 +1771,7 @@ function processRefReact (el, meta) {
     const selectorsConf = selectors.map(item => `["${item.prefix}", ${item.selector}]`)
     addAttrs(el, [{
       name: 'ref',
-      value: `{{ this.__getRefVal('${type}', [${selectorsConf}]) }}`
+      value: `{{ this.__getRefVal('${type}', [${selectorsConf}], 'ref_fn_${++refId}') }}`
     }])
   }
 
@@ -2187,20 +2185,16 @@ function isRealNode (el) {
   return !virtualNodeTagMap[el.tag]
 }
 
-function isComponentNode (el) {
+function isComponentNode (el, options) {
   return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
 }
 
-function getComponentInfo (el) {
-  return usingComponentsInfo[el.tag] || {}
-}
-
-function isReactComponent (el) {
-  return !isComponentNode(el) && isRealNode(el) && !el.isBuiltIn
+function isReactComponent (el, options) {
+  return !isComponentNode(el, options) && isRealNode(el) && !el.isBuiltIn
 }
 
 function processExternalClasses (el, options) {
-  const isComponent = isComponentNode(el)
+  const isComponent = isComponentNode(el, options)
   const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class']
 
   classLikeAttrNames.forEach((classLikeAttrName) => {
@@ -2314,7 +2308,8 @@ function postProcessAliComponentRootView (el, options, meta) {
     { condition: /^style$/, action: 'move' },
     { condition: /^slot$/, action: 'move' }
   ]
-  const mid = getComponentInfo(el).mid
+  const tagName = el.tag
+  const mid = options.usingComponentsInfo[tagName]?.mid || moduleId
   const processAppendAttrsRules = [
     { name: 'class', value: `${MPX_ROOT_VIEW} host-${mid}` }
   ]
@@ -2421,7 +2416,7 @@ function processShow (el, options, root) {
     show = has ? `{{${parseMustacheWithContext(show).result}&&mpxShow}}` : '{{mpxShow}}'
   }
   if (show === undefined) return
-  if (isComponentNode(el) && getComponentInfo(el).hasVirtualHost) {
+  if (isComponentNode(el, options)) {
     if (show === '') {
       show = '{{false}}'
     }
@@ -2720,7 +2715,7 @@ function closeElement (el, options, meta) {
         }
       })
     }
-    if (isComponentNode(el) && !hasVirtualHost && mode === 'ali' && el.tag !== 'component') {
+    if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali' && el.tag !== 'component') {
       postProcessAliComponentRootView(el, options, meta)
     }
   }

package/lib/utils/pre-process-json.js

@@ -6,7 +6,6 @@ const addQuery = require('./add-query')
 const resolve = require('./resolve')
 const getJSONContent = require('./get-json-content')
 const getRulesRunner = require('../platform')
-const { matchCondition } = require('./match-condition')
 const async = require('async')
 
 module.exports = function ({
@@ -20,7 +19,8 @@ module.exports = function ({
 }, callback) {
   const mpx = loaderContext.getMpx()
   const context = loaderContext.context
-  const { mode, pagesMap, autoVirtualHostRules } = mpx
+  const mode = mpx.mode
+  const pagesMap = mpx.pagesMap
   async.waterfall([
     (callback) => {
       getJSONContent(json, null, loaderContext, callback)
@@ -78,8 +78,8 @@ module.exports = function ({
           componentGenerics = Object.assign({}, ret.componentGenerics)
         }
         if (usingComponents) {
-          const setUsingComponentInfo = (name, info) => {
-            usingComponentsInfo[name] = info
+          const setUsingComponentInfo = (name, moduleId) => {
+            usingComponentsInfo[name] = { mid: moduleId }
           }
           async.eachOf(usingComponents, (component, name, callback) => {
             if (ctorType === 'app') {
@@ -96,11 +96,7 @@ module.exports = function ({
               if (err) return callback(err)
               const { rawResourcePath } = parseRequest(resource)
               const moduleId = mpx.getModuleId(rawResourcePath, ctorType === 'app')
-              const hasVirtualHost = matchCondition(rawResourcePath, autoVirtualHostRules)
-              setUsingComponentInfo(name, {
-                mid: moduleId,
-                hasVirtualHost
-              })
+              setUsingComponentInfo(name, moduleId)
               callback()
             })
           }, (err) => {

package/lib/wxss/loader.js

@@ -32,6 +32,13 @@ const {
 } = require('./utils')
 const createHelpers = require('../helpers')
 
+const RN_PRESET_OPTIMISATION = {
+  reduceInitial: false,
+  normalizeWhitespace: false,
+  minifyFontValues: false,
+  convertValues: false
+}
+
 module.exports = async function loader (content, map, meta) {
   const rawOptions = this.getOptions(schema)
   const plugins = []
@@ -41,6 +48,7 @@ module.exports = async function loader (content, map, meta) {
   const externals = mpx.externals
   const root = mpx.projectRoot
   const sourceMap = mpx.cssSourceMap || false
+  const isRN = ['ios', 'android', 'harmony'].includes(mpx.mode)
 
   let options
 
@@ -152,12 +160,17 @@ module.exports = async function loader (content, map, meta) {
   if (this.minimize) {
     const cssnano = require('cssnano')
     const minimizeOptions = rawOptions.minimize || {}
+    const presetOptimisation = Object.assign(
+      {},
+      isRN ? RN_PRESET_OPTIMISATION : {},
+      minimizeOptions.optimisation
+    )
     let cssnanoConfig = {
-      preset: ['cssnano-preset-default', minimizeOptions.optimisation || {}]
+      preset: ['cssnano-preset-default', presetOptimisation]
     }
     if (minimizeOptions.advanced) {
       cssnanoConfig = {
-        preset: ['cssnano-preset-advanced', minimizeOptions.optimisation || {}]
+        preset: ['cssnano-preset-advanced', presetOptimisation]
       }
     }
     plugins.push(cssnano(cssnanoConfig))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.69-beta.0",
+  "version": "2.9.69-beta.10",
   "description": "mpx compile core",
   "keywords": [
     "mpx"