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: Vue.js Runtime 下无法使用 vendor prefixed 样式属性 #8330

Closed
wants to merge 1 commit into from

Conversation

Leechael
Copy link
Contributor

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

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

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

这个 PR 满足以下需求:

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

这个 PR 涉及以下平台:

  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 头条小程序
  • QQ 轻应用
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)

其它需要 Reviewer 或社区知晓的内容:

相关 issue: #8109

当前 Style 的实现是白名单形式,但实际在使用中,我们偶尔会需要写入一些 vendor prefixed 的样式,这个事情在 React Runtime 那边可行,但在 Vue.js Runetime 这边不可行。

这个 PR 更像是一个 hotfix,希望能抛砖引玉,引来更合理的方案。

@Leechael Leechael force-pushed the fix-vue-vendor-prefixed-style branch from 3d9ee8e to 4ebf1f3 Compare December 21, 2020 06:49
@@ -477,6 +477,10 @@ export const styleProperties = [
'visibility',
'voiceFamily',
'volume',
'webkitTextFillColor',
Copy link
Contributor

Choose a reason for hiding this comment

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

vue 设置不成功,因为它会判断 Webkitxxx ,W 大写:

image

web 端大小写开头的 Webkitxxxwebkitxxx 都支持,这里需要兼容一下:

image

Copy link
Contributor

@Chen-jj Chen-jj left a comment

Choose a reason for hiding this comment

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

2 处需要修改

@Chen-jj Chen-jj added the V-3 Version - 3.x label Dec 21, 2020
@Leechael Leechael force-pushed the fix-vue-vendor-prefixed-style branch from 4ebf1f3 to 2af3207 Compare December 21, 2020 09:30
@Leechael
Copy link
Contributor Author

均根据意见修改了~

@yuche
Copy link
Contributor

yuche commented Dec 21, 2020

我感觉这不是最终解决方案,还没覆盖到 css property 还有很多,每次 PR 加几个是加不完的。

我能想到两个方案:

  1. 用 Proxy 重新实现 style runtime,如果不考虑兼容性,这应该是最优选择,性能也以前好。不过现在 Taro 的开发模式这样不兼容变动应该要走流程和变版本号,不能我们几个拍拍脑袋就定了,然后需要兼容老环境用户一升级版本,完犊子,没法用了。
  2. 写一个 webpack 插件给 vue 源码打 patch,或者直接 alias vue 直接替换掉某个我们修改过后的版本

@Chen-jj
Copy link
Contributor

Chen-jj commented Dec 21, 2020

均根据意见修改了~

第一点还没改:packages/taro-runtime/src/dom/style_properties.ts

@Chen-jj
Copy link
Contributor

Chen-jj commented Dec 21, 2020

我感觉这不是最终解决方案,还没覆盖到 css property 还有很多,每次 PR 加几个是加不完的。

我能想到两个方案:

  1. 用 Proxy 重新实现 style runtime,如果不考虑兼容性,这应该是最优选择,性能也以前好。不过现在 Taro 的开发模式这样不兼容变动应该要走流程和变版本号,不能我们几个拍拍脑袋就定了,然后需要兼容老环境用户一升级版本,完犊子,没法用了。
  2. 写一个 webpack 插件给 vue 源码打 patch,或者直接 alias vue 直接替换掉某个我们修改过后的版本

是的,这次先这样调整咯,之后考虑使用 Proxy 重构 Style

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

Successfully merging this pull request may close these issues.

微信端编译时组件中的style属性会丢失 -webkit-text-fill-color , -webkit-text-stroke 等样式
3 participants