Skip to content

Commit 4eb6adf

Browse files
wenwenhuawenwenhua
committed
回滚fix drn
2 parents b9f374c + dabdba6 commit 4eb6adf

File tree

5 files changed

+38
-36
lines changed

5 files changed

+38
-36
lines changed

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn, getFocusedNavigation, noop } from '@mpxjs/utils'
1+
import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn, getFocusedNavigation } from '@mpxjs/utils'
22
import { StyleSheet, Dimensions } from 'react-native'
33
import { reactive } from '../../observer/reactive'
44
import Mpx from '../../index'
@@ -13,7 +13,7 @@ global.__mpxPageSizeCountMap = reactive({})
1313

1414
global.__GCC = function (className, classMap, classMapValueCache) {
1515
if (!classMapValueCache.has(className)) {
16-
const styleObj = classMap[className]?.()
16+
const styleObj = classMap[className]?.(global.__formatValue)
1717
styleObj && classMapValueCache.set(className, styleObj)
1818
}
1919
return classMapValueCache.get(className)
@@ -267,14 +267,13 @@ export default function styleHelperMixin () {
267267

268268
classString.split(/\s+/).forEach((className) => {
269269
let localStyle, appStyle
270-
const getAppClassStyle = global.__getAppClassStyle || noop
271-
if (localStyle = this.__getClassStyle(className)) {
270+
if (localStyle = this.__getClassStyle?.(className)) {
272271
if (localStyle._media?.length) {
273272
mergeResult(localStyle._default, getMediaStyle(localStyle._media))
274273
} else {
275274
mergeResult(localStyle)
276275
}
277-
} else if (appStyle = getAppClassStyle(className)) {
276+
} else if (appStyle = global.__getAppClassStyle?.(className)) {
278277
if (appStyle._media?.length) {
279278
mergeResult(appStyle._default, getMediaStyle(appStyle._media))
280279
} else {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ module.exports = function (styles, {
4949
if (err) return callback(err)
5050
try {
5151
output += `
52-
var _f = global.__formatValue
5352
global.__classCaches = global.__classCaches || []
5453
var __classCache = new Map()
5554
global.__classCaches.push(__classCache)`
55+
const formatValueName = '_f'
5656
const classMap = getClassMap({
5757
content,
5858
filename: loaderContext.resourcePath,
@@ -61,11 +61,11 @@ module.exports = function (styles, {
6161
ctorType,
6262
warn,
6363
error,
64-
formatValueName: '_f'
64+
formatValueName
6565
})
6666
const classMapCode = Object.entries(classMap).reduce((result, [key, value]) => {
6767
result !== '' && (result += ',')
68-
result += `${isValidIdentifierStr(key) ? `${key}` : `['${key}']`}: () => (${shallowStringify(value)})`
68+
result += `${isValidIdentifierStr(key) ? `${key}` : `['${key}']`}: function(${formatValueName}){return ${shallowStringify(value)};}`
6969
return result
7070
}, '')
7171
if (ctorType === 'app') {

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
2828
value = matched[1]
2929
needStringify = false
3030
} else {
31-
value = `${formatValueName || 'global.__formatValue'}(${+matched[1]}, '${matched[2]}')`
31+
value = `${formatValueName}(${+matched[1]}, '${matched[2]}')`
3232
needStringify = false
3333
}
3434
}
3535
if (hairlineRegExp.test(value)) {
36-
value = `${formatValueName || 'global.__formatValue'}(${JSON.stringify(value)}, 'hairlineWidth')`
36+
value = `${formatValueName}(${JSON.stringify(value)}, 'hairlineWidth')`
3737
needStringify = false
3838
}
3939
return needStringify ? JSON.stringify(value) : value
@@ -82,7 +82,7 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
8282
function walkRule ({ rule, classMap, ruleName = '', options }) {
8383
const classMapValue = {}
8484
rule.walkDecls(({ prop, value }) => {
85-
if (cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
85+
if (value === 'undefined' || cssPrefixExp.test(prop) || cssPrefixExp.test(value)) return
8686
let newData = rulesRunner({ prop, value, selector: rule.selector })
8787
if (!newData) return
8888
if (!Array.isArray(newData)) {
@@ -141,10 +141,12 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
141141
if (classMapKeys.length) {
142142
classMapKeys.forEach((key) => {
143143
if (Object.keys(classMapValue).length) {
144+
let _default = classMap[key]?._default
145+
let _media = classMap[key]?._media
144146
if (ruleName === 'media' && options && (options.minWidth || options.maxWidth)) {
145147
// 当前是媒体查询
146-
const _default = classMap[key]?._default || classMap[key] || {}
147-
const _media = classMap[key]?._media || []
148+
_default = _default || {}
149+
_media = _media || []
148150
_media.push({
149151
options,
150152
value: classMapValue
@@ -153,10 +155,9 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, formatValueN
153155
_default,
154156
_media
155157
}
156-
} else if (classMap[key]?._default) {
158+
} else if (_default) {
157159
// 已有媒体查询数据，此次非媒体查询
158-
const _default = classMap[key]?._default || {}
159-
classMap[key]._default = Object.assign(_default, classMapValue)
160+
Object.assign(_default, classMapValue)
160161
} else {
161162
// 无媒体查询
162163
const val = classMap[key] || {}

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement, MutableRefObject } from 'react'
22
import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native'
3-
import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils'
3+
import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn, isEmptyObject } from '@mpxjs/utils'
44
import { VarContext, ScrollViewContext, RouteContext } from './context'
55
import { ExpressionParser, parseFunc, ReplaceSource } from './parser'
66
import { initialWindowMetrics } from 'react-native-safe-area-context'
@@ -238,7 +238,7 @@ function transformVar (styleObj: Record<string, any>, varKeyPaths: Array<Array<s
238238
const resolved = resolveVar(value, varContext)
239239
if (resolved === undefined) {
240240
delete target[key]
241-
error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
241+
// error(`Can not resolve css var at ${varKeyPath.join('.')}:${value}.`)
242242
return
243243
}
244244
target[key] = resolved
@@ -412,7 +412,7 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
412412
const normalStyle: Record<string, any> = {}
413413
let hasVarDec = false
414414
let hasVarUse = false
415-
const hasSelfPercent = false
415+
let hasSelfPercent = false
416416
const varKeyPaths: Array<Array<string>> = []
417417
const unoVarKeyPaths: Array<Array<string>> = []
418418
const percentKeyPaths: Array<Array<string>> = []
@@ -454,18 +454,19 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
454454
}
455455
}
456456

457-
function calcVisitor ({ value, keyPath }: VisitorArg) {
457+
function calcVisitor ({ key, value, keyPath }: VisitorArg) {
458458
if (calcUseRegExp.test(value)) {
459+
// calc translate & border-radius 的百分比计算
460+
if (hasOwn(selfPercentRule, key) && /%/.test(value)) {
461+
hasSelfPercent = true
462+
percentKeyPaths.push(keyPath.slice())
463+
}
459464
calcKeyPaths.push(keyPath.slice())
460465
}
461466
}
462467

463468
function percentVisitor ({ key, value, keyPath }: VisitorArg) {
464469
// fixme 去掉 translate & border-radius 的百分比计算
465-
// if (hasOwn(selfPercentRule, key) && PERCENT_REGEX.test(value)) {
466-
// hasSelfPercent = true
467-
// percentKeyPaths.push(keyPath.slice())
468-
// } else
469470
if ((key === 'fontSize' || key === 'lineHeight') && PERCENT_REGEX.test(value)) {
470471
percentKeyPaths.push(keyPath.slice())
471472
}
@@ -476,10 +477,10 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
476477
[envVisitor, percentVisitor, calcVisitor].forEach(visitor => visitor({ target, key, value, keyPath }))
477478
}
478479
}
479-
480+
// transform 字符串格式转化数组格式(先转数组再处理css var)
481+
transformTransform(styleObj)
480482
// traverse var & generate normalStyle
481483
traverseStyle(styleObj, [varVisitor])
482-
483484
hasVarDec = hasVarDec || !!externalVarContext
484485
enableVar = enableVar || hasVarDec || hasVarUse
485486
const enableVarRef = useRef(enableVar)
@@ -543,10 +544,11 @@ export function useTransformStyle (styleObj: Record<string, any> = {}, { enableV
543544
transformStringify(normalStyle)
544545
// transform rpx to px
545546
transformBoxShadow(normalStyle)
546-
// transform 字符串格式转化数组格式
547-
transformTransform(normalStyle)
548547
// transform z-index auto to 0
549548
transformZIndex(normalStyle)
549+
if (Array.isArray(normalStyle.transform)) {
550+
normalStyle.transform = normalStyle.transform.filter(item => !isEmptyObject(item))
551+
}
550552
return {
551553
hasVarDec,
552554
varContextRef,

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ describe('React Native style validation for CSS variables', () => {
5252
...config
5353
})
5454

55-
expect(result.text._default).toEqual({
55+
expect(result.text).toEqual({
5656
letterSpacing: '"var(--x, 2px)"',
5757
lineHeight: '"var(--y, 1.5)"'
5858
})
@@ -69,7 +69,7 @@ describe('React Native style validation for CSS variables', () => {
6969
...config
7070
})
7171

72-
expect(result.text._default).toEqual({
72+
expect(result.text).toEqual({
7373
letterSpacing: '"var(--x)"',
7474
lineHeight: '"var(--y)"'
7575
})
@@ -102,7 +102,7 @@ describe('React Native style validation for CSS variables', () => {
102102
...config
103103
})
104104

105-
expect(result.text._default).toEqual({
105+
expect(result.text).toEqual({
106106
letterSpacing: '"var(--x, var(--y, 2px))"'
107107
})
108108
expect(config.error).not.toHaveBeenCalled()
@@ -119,7 +119,7 @@ describe('React Native style validation for CSS variables', () => {
119119
...config
120120
})
121121

122-
expect(result.text._default).toEqual({
122+
expect(result.text).toEqual({
123123
letterSpacing: '"var(--a, var(--b, var(--c, var(--d, var(--e, 2px)))))"'
124124
})
125125
expect(config.error).not.toHaveBeenCalled()
@@ -159,7 +159,7 @@ describe('React Native style validation for CSS variables', () => {
159159
})
160160

161161
// 由于 var(--x) 没有 fallback，整个表达式是合法的，应该保留
162-
expect(result.text._default).toEqual({
162+
expect(result.text).toEqual({
163163
letterSpacing: '"var(--x, var(--x))"'
164164
})
165165
expect(config.error).not.toHaveBeenCalled()
@@ -181,7 +181,7 @@ describe('React Native style validation for CSS variables', () => {
181181
})
182182

183183
// 应该成功解析，因为最终 fallback 是有效的 2px
184-
expect(result.text._default).toEqual({
184+
expect(result.text).toEqual({
185185
letterSpacing: '"var(--a, var(--b, var(--a, 2px)))"'
186186
})
187187
expect(config.error).not.toHaveBeenCalled()
@@ -215,7 +215,7 @@ describe('React Native style validation for CSS variables', () => {
215215
...config
216216
})
217217

218-
expect(result.box._default).toHaveProperty('marginLeft')
218+
expect(result.box).toHaveProperty('marginLeft')
219219
expect(config.error).not.toHaveBeenCalled()
220220
})
221221
})
@@ -245,7 +245,7 @@ describe('React Native style validation for CSS variables', () => {
245245
...config
246246
})
247247

248-
expect(result.text._default).toEqual({
248+
expect(result.text).toEqual({
249249
letterSpacing: '2'
250250
})
251251
expect(config.error).not.toHaveBeenCalled()

0 commit comments

Comments
 (0)