Skip to content

Commit

Permalink
Merge pull request #1729 from didi/bugfix-style-1128
Browse files Browse the repository at this point in the history 
fix font-family 支持 css var
  • Loading branch information
@hiyuki
hiyuki authored Dec 18, 2024
2 parents e7988e0 + 969f73d commit f0d6535
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 55 deletions.
5 changes: 4 additions & 1 deletion packages/core/src/platform/builtInMixins/directiveHelperMixin.ios.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
export default function directiveHelperMixin () {
return {
methods: {
__getWxKey (item, key) {
__getWxKey (item, key, index) {
if (key === 'index') {
return index
}
return key === '*this' ? item : item[key]
}
}
Expand Down
73 changes: 35 additions & 38 deletions packages/webpack-plugin/lib/platform/style/wx/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,8 @@ module.exports = function getSpec ({ warn, error }) {

// transform 转换
const formatTransform = ({ prop, value, selector }, { mode }) => {
if (Array.isArray(value)) return { prop, value }
// css var & 数组直接返回
if (Array.isArray(value) || calcExp.test(value)) return { prop, value }
const values = parseValues(value)
const transform = []
values.forEach(item => {
Expand All @@ -398,7 +399,7 @@ module.exports = function getSpec ({ warn, error }) {
break
case 'matrix':
case 'matrix3d':
transform.push({ [key]: val.split(',').map(val => +val) })
transform.push({ [key]: parseValues(val, ',').map(val => +val) })
break
case 'translate':
case 'scale':
Expand All @@ -409,7 +410,7 @@ module.exports = function getSpec ({ warn, error }) {
{
// 2 个以上的值处理
key = key.replace('3d', '')
const vals = val.split(',', key === 'rotate' ? 4 : 3)
const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
// scale(.5) === scaleX(.5) scaleY(.5)
if (vals.length === 1 && key === 'scale') {
vals.push(vals[0])
Expand Down Expand Up @@ -455,14 +456,17 @@ module.exports = function getSpec ({ warn, error }) {

const formatFlex = ({ prop, value, selector }) => {
let values = parseValues(value)
// 值大于3 去前三
if (values.length > 3) {
error(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
warn(`Value of [flex] in ${selector} supports up to three values, received [${value}], please check again!`)
values = values.splice(0, 3)
}
const cssMap = []
const lastOne = values[values.length - 1]
const isAuto = lastOne === 'auto'
// 枚举值 none initial
// 单个css var 直接设置 flex 属性
if (values.length === 1 && cssVariableExp.test(value)) {
return { prop, value }
}
// 包含枚举值 none initial
if (values.includes('initial') || values.includes('none')) {
// css flex: initial ===> flex: 0 1 ===> rn flex 0 1
// css flex: none ===> css flex: 0 0 ===> rn flex 0 0
Expand All @@ -475,46 +479,39 @@ module.exports = function getSpec ({ warn, error }) {
}
return cssMap
}
// 最后一个值是flexBasis 的有效值（auto或者有单位百分比、px等）
// flex 0 1 auto flex auto flex 1 auto flex 1 30px flex 1 10% flex 1 1 auto
if (!isNumber(lastOne) || !cssVariableExp.test(value)) {
// 添加 grow 和 shrink
// 在设置 flex basis 有效值的场景下，如果没有设置 grow 和 shrink，则默认为1
// 单值 flex: 1 1 <flex-basis>
// 双值 flex: <flex-grow> 1 <flex-basis>
// 三值 flex: <flex-grow> <flex-shrink> <flex-basis>
for (let i = 0; i < 2; i++) {
const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: isNumber(values[i]) || cssVariableExp.test(value) ? values[i] : 1 })
// 只有1-2个值且最后的值是flexBasis 的有效值（auto或者有单位百分比、px等）
// 在设置 flex basis 有效值的场景下，如果没有设置 grow 和 shrink，则默认为1
// 单值 flex: 1 1 <flex-basis>
// 双值 flex: <flex-grow> 1 <flex-basis>
// 三值 flex: <flex-grow> <flex-shrink> <flex-basis>
for (let i = 0; i < 3; i++) {
if (i < 2) {
// 添加 grow 和 shrink
const isValid = isNumber(values[0]) || cssVariableExp.test(values[0])
// 兜底 1
const val = isValid ? values[0] : 1
const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: val, selector })
item && cssMap.push(item)
isValid && values.shift()
} else {
// 添加 flexBasis
// 有单位(百分比、px等) 的 value 赋值 flexBasis，auto 不处理，兜底 0
const val = values[0] || 0
if (val !== 'auto') {
cssMap.push({
prop: 'flexBasis',
value: val
})
}
}
if (!isAuto) {
// 有单位(百分比、px等) 的 value 赋值 flexBasis，auto 不处理
cssMap.push({
prop: 'flexBasis',
value: lastOne
})
}
return cssMap
}
// 纯数值：value 按flex-grow flex-shrink flex-basis 顺序赋值
// 兜底 shrink & basis
if (values.length === 1) {
values.push(...[1, 0])
} else if (values.length === 2) {
values.push(0)
}
// 循环赋值
for (let i = 0; i < values.length; i++) {
const item = getIntegersFlex({ prop: AbbreviationMap[prop][i], value: values[i] })
item && cssMap.push(item)
}
return cssMap
}

const formatFontFamily = ({ prop, value, selector }) => {
// 去掉引号 取逗号分隔后的第一个
const newVal = value.replace(/"|'/g, '').trim()
const values = newVal.split(',').filter(i => i)
const values = parseValues(newVal, ',')
if (!newVal || !values.length) {
error(`Value of [${prop}] is invalid in ${selector}, received [${value}], please check again!`)
return false
Expand Down
8 changes: 4 additions & 4 deletions packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -777,10 +777,10 @@ const _View = forwardRef<HandlerRef<View, _ViewProps>, _ViewProps>((viewProps, r
throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
}
const finalStyle = enableAnimation
? useAnimationHooks({
animation,
style: viewStyle
})
? [viewStyle, useAnimationHooks({
animation,
style: viewStyle
})]
: viewStyle
const innerProps = useInnerProps(
props,
Expand Down
47 changes: 36 additions & 11 deletions packages/webpack-plugin/lib/runtime/components/react/useAnimationHooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,31 @@ const InitialValue: ExtendedViewStyle = Object.assign({
const TransformOrigin = 'transformOrigin'
// transform
const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
// 多value解析
const parseValues = (str: string, char = ' ') => {
let stack = 0
let temp = ''
const result = []
for (let i = 0; i < str.length; i++) {
if (str[i] === '(') {
stack++
} else if (str[i] === ')') {
stack--
}
// 非括号内 或者 非分隔字符且非空
if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
temp += str[i]
}
if ((stack === 0 && str[i] === char) || i === str.length - 1) {
result.push(temp)
temp = ''
}
}
return result
}
// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
const parseTransform = (transformStr: string) => {
const values = transformStr.trim().split(/\s+/)
const values = parseValues(transformStr)
const transform: {[propName: string]: string|number|number[]}[] = []
values.forEach(item => {
const match = item.match(/([/\w]+)\(([^)]+)\)/)
Expand All @@ -109,7 +131,7 @@ const parseTransform = (transformStr: string) => {
break
case 'matrix':
case 'matrix3d':
transform.push({ [key]: val.split(',').map(val => +val) })
transform.push({ [key]: parseValues(val, ',').map(val => +val) })
break
case 'translate':
case 'scale':
Expand All @@ -120,8 +142,8 @@ const parseTransform = (transformStr: string) => {
{
// 2 个以上的值处理
key = key.replace('3d', '')
const vals = val.split(',', key === 'rotate' ? 4 : 3)
// scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3)
// scale(.5) === scaleX(.5) scaleY(.5)
if (vals.length === 1 && key === 'scale') {
vals.push(vals[0])
}
Expand Down Expand Up @@ -218,20 +240,23 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
}
// 添加每个key的多次step动画
animatedKeys.forEach(key => {
let toVal = (rules.get(key) || transform.get(key))
// key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
if (toVal === undefined) {
toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value
}
const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
const toVal = rules.get(key) !== undefined
? rules.get(key)
: transform.get(key) !== undefined
? transform.get(key)
: index > 0
? lastValueMap[key]
: shareValMap[key].value
const animation = getAnimation({ key, value: toVal! }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined)
needSetCallback = false
if (!sequence[key]) {
sequence[key] = [animation]
} else {
sequence[key].push(animation)
}
// 更新一下 lastValueMap
lastValueMap[key] = toVal
lastValueMap[key] = toVal!
})
// 赋值驱动动画
animatedKeys.forEach((key) => {
Expand Down Expand Up @@ -327,6 +352,6 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
styles[key] = shareValMap[key].value
}
return styles
}, Object.assign({}, originalStyle) as ExtendedViewStyle)
}, {} as ExtendedViewStyle)
})
}
2 changes: 1 addition & 1 deletion packages/webpack-plugin/lib/template-compiler/compiler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1928,7 +1928,7 @@ function postProcessFor (el) {
function postProcessForReact (el) {
if (el.for) {
if (el.for.key) {
addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key)})`, false, 'key')
addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key)}, ${el.for.index || 'index'})`, false, 'key')
addAttrs(el, [{
name: 'key',
value: el.for.key
Expand Down

0 comments on commit f0d6535

Please sign in to comment.