Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(rn): css-transform #10482

Merged
merged 6 commits into from
Nov 5, 2021
Merged

fix(rn): css-transform #10482

merged 6 commits into from
Nov 5, 2021

Conversation

ZakaryCode
Copy link
Contributor

这个 PR 做了什么? (简要描述所做更改)

优化 RN boxShadow 样式转换报错,并补齐测试用例

这个 PR 是什么类型? (至少选择一个)

  • 错误修复(Bugfix) issue id #
  • 新功能(Feature)
  • 代码重构(Refactor)
  • TypeScript 类型定义修改(Typings)
  • 文档修改(Docs)
  • 代码风格更新(Code style update)
  • 其他,请描述(Other, please describe): 测试用例

这个 PR 涉及以下平台:

  • 所有小程序
  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 字节跳动小程序
  • QQ 轻应用
  • 京东小程序
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)

@shinken008
Copy link
Collaborator

@ZakaryCode 希望在处理 blur-radius 的同级,接下来去处理 spread-radius,即忽略掉,兼容 web css 写法。
大概是这样:

if (
  typeof offsetX === 'undefined' &&
  tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
) {
  offsetX = tokenStream.lastValue
  if (
    tokenStream.matches(SPACE) &&
    tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
  ) {
    offsetY = tokenStream.lastValue
  } else {
    offsetY = offsetX
    tokenStream.rewind()
  }

  tokenStream.saveRewindPoint()
  if (
    tokenStream.matches(SPACE) &&
    tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
  ) {
    // blur-radius
    radius = tokenStream.lastValue
  } else {
    tokenStream.rewind()
  }
  tokenStream.saveRewindPoint()
  if (
    tokenStream.matches(SPACE) &&
    tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
  ) {
    // spread-radius
    // 兼容web写法,防止报错
  } else {
    tokenStream.rewind()
  }
} else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
  color = tokenStream.lastValue
} else {
  tokenStream.throw()
}

@ZakaryCode ZakaryCode changed the title Fix/css to rn fix(rn): css-transform Nov 1, 2021
@ZakaryCode
Copy link
Contributor Author

@ZakaryCode 希望在处理 blur-radius 的同级,接下来去处理 spread-radius,即忽略掉,兼容 web css 写法。 大概是这样:

if (
  typeof offsetX === 'undefined' &&
  tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
) {
  offsetX = tokenStream.lastValue
  if (
    tokenStream.matches(SPACE) &&
    tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
  ) {
    offsetY = tokenStream.lastValue
  } else {
    offsetY = offsetX
    tokenStream.rewind()
  }

  tokenStream.saveRewindPoint()
  if (
    tokenStream.matches(SPACE) &&
    tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
  ) {
    // blur-radius
    radius = tokenStream.lastValue
  } else {
    tokenStream.rewind()
  }
  tokenStream.saveRewindPoint()
  if (
    tokenStream.matches(SPACE) &&
    tokenStream.matches(LENGTH, UNSUPPORTED_LENGTH_UNIT)
  ) {
    // spread-radius
    // 兼容web写法,防止报错
  } else {
    tokenStream.rewind()
  }
} else if (typeof color === 'undefined' && tokenStream.matches(COLOR)) {
  color = tokenStream.lastValue
} else {
  tokenStream.throw()
}

可以的

@shinken008
Copy link
Collaborator

重跑下 ci,挂了

@ZakaryCode
Copy link
Contributor Author

重跑下 ci,挂了

ci 是正常的哦,测试也是通过了,最后这一个是证书相关,不影响合并

@shinken008 shinken008 added the T-rn Target - 编译到 React Native label Nov 5, 2021
color = tokenStream.lastValue
} else {
tokenStream.throw()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这行代码不应该去掉,我们得保证 shadow 的格式错了的话能提示报错信息

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
T-rn Target - 编译到 React Native
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants