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

fix4288 针对快应用样式定制的样式转换系统 #4301

Merged
merged 4 commits into from
Aug 30, 2019

Conversation

Qiyu8
Copy link
Collaborator

@Qiyu8 Qiyu8 commented Aug 27, 2019

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

FIX #4288
快应用支持的通用样式有30多种,每个样式的取值也一定的限制,针对这些限制进行了样式转换规则定制,主要受益于Taroize之后的Taro代码,对于原生Taro也很有帮助,可大大减少快应用预览的错误数量。样式转换包含如下三类:
1.选择器:快应用不支持:after、:before等伪类选择器
2.普通样式:样式规则参考 https://doc.quickapp.cn/widgets/common-styles.html
3.尺寸:快应用只支持px和%,对于pt、rpx,em等进行转换
技术选型:
使用css构建AST,对每条样式规则使用css-what单独处理,最后转为字符串
Eg: Taro样式写法

.like-animate{
  position: absolute;
  left: 50%;
  bottom: 34rpx;
  margin: -16px;
  color: red;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  transform-origin:center center;
  -webkit-transform-origin:center center;
  animation:likeAnimate 0.5s 0s 1 ease-out normal ;
  -webkit-animation:likeAnimate 0.5s 0s 1 ease-out normal ;
}

转为快应用样式后:

.like-animate {
  left: 375px;
  bottom: 34px;
  margin: -32px;
  color: red;
  animation-name: likeAnimate;
  animation-duration: 0.5s;
  animation-duration: 0s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  /*position:absolute; Taro comment: unsupported style.[兼容写法参考](https://doc.quickapp.cn/widgets/common-styles.html)*/
  /*backface-visibility:visible; Taro comment: unsupported style.[兼容写法参考](https://doc.quickapp.cn/widgets/common-styles.html)*/
  /*transform-origin:center center; Taro comment: unsupported style.[兼容写法参考](https://doc.quickapp.cn/widgets/common-styles.html)*/
  /*animation:likeAnimate 0.5s 0s 1 ease-out normal; Taro comment: unsupported style.[兼容写法参考](https://doc.quickapp.cn/widgets/common-styles.html)*/
}

技术参考:
1.https://github.com/dcloudio/uni-migration
2.https://github.com/reworkcss/css
3.https://github.com/fb55/css-what

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

错误修复(Bugfix) issue id #4203
Y新功能(Feature)
代码重构(Refactor)
TypeScript 类型定义修改(Typings)
文档修改(Docs)
代码风格更新(Code style update)
其他,请描述(Other, please describe):
这个 PR 满足以下需求:

提交到 master 分支
Commit 信息遵循 Angular Style Commit Message Conventions
所有测试用例已经通过
代码遵循相关包中的 .eslintrc, .tslintrc, .stylelintrc 所规定的规范
在本地测试可用,不会影响到其它功能
这个 PR 涉及以下平台:

微信小程序
支付宝小程序
百度小程序
头条小程序
QQ 轻应用
Y快应用平台(QuickApp)
Web 平台(H5)
移动端(React-Native)
其它需要 Reviewer 或社区知晓的内容:

@luckyadam
Copy link
Member

碉堡了,收下我的膝盖

@zhengpengtao
Copy link

🐂B,服了大佬

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

【快应用】Taroize之后转快应用,大量样式报错
3 participants