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

feat(jsx-to-rn-stylesheet): 当开启 cssModule 时,支持在 className 中设置多个值 #12365

Merged
merged 5 commits into from
Aug 29, 2022

Conversation

biorz
Copy link
Member

@biorz biorz commented Aug 23, 2022

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

当开启 css Module 时,使用类似表达式 style.a,在 RN 中获取到的是 style 对象,而在其他端获取的是 className 的字符串,此处差异会导致在多种场景下需要对 RN 做额外处理,否则样式表现异常。

  1. 使用如 classnames 的开源库
import styles from 'index.module.scss'
import classnames from 'classnames'

// rn 中表现异常
const rootClassName = classnames('bar', styles.a)
  1. 设置多个 classname
import styles from 'index.module.scss'
import { View } from '@tarojs/components'
import classnames from 'classnames'

export default function () {
  // rn 中表现异常
  return <View className={`${styles.a} ${styles.b}`} />
}

解决方案
当识别到类似 import styles from 'xxx' 的语法时,将 styles 的默认取值处理成 {[classname]: classname} 的形式。并将原始 styles 合并到页面唯一的 styleSheet 集合中。
后续逻辑等同 String 类型的 className

可能的风险
由于 style.a 的值类型变成了 string,如果使用者按照非标的方式对 RN 做了特殊处理,此处可能引发问题。

后续优化

  • 编译过程中产生的模板函数迁移至 runtime-rn 中,优化体积
  • 生成 module classname 的过程迁移到 'rn-style-transform',避免运行时的性能损耗

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

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

这个 PR 涉及以下平台:

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

@biorz biorz requested a review from shinken008 August 23, 2022 11:20
@ZakaryCode ZakaryCode added the T-rn Target - 编译到 React Native label Aug 23, 2022
@biorz biorz added V-1 Version - 1.x V-3 Version - 3.x and removed V-1 Version - 1.x labels Aug 24, 2022
@shinken008
Copy link
Collaborator

  1. 补一下多个 module.css 并存的测试用例
  2. 我会发一个测试版本让测试回归下

@biorz
Copy link
Member Author

biorz commented Aug 25, 2022

  1. 补一下多个 module.css 并存的测试用例
  2. 我会发一个测试版本让测试回归下

已更新 @shinken008

@shinken008
Copy link
Collaborator

3.5.5-zeta.1

@iambool

@iambool
Copy link
Collaborator

iambool commented Aug 29, 2022

3.5.5-zeta.1

@iambool

3.5.5-zeta.2 验证通过

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

Successfully merging this pull request may close these issues.

4 participants