feat(rn): 增加css中对百分比单位的支持

[yinone]

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

[email protected]版本中已经支持了transform值为百分比单位的特性，这个PR也同步添加对该功能的支持

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

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

这个 PR 涉及以下平台:

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

Summary by CodeRabbit

• 测试

  • 增加了新测试用例，确保基于百分比的样式转换能正确执行。
  • 优化了错误信息格式和调用方式，提升了测试的清晰度和一致性。

• 重构

  • 改进了样式转换处理逻辑，实现了对混合数值类型（包括百分比）的更灵活支持。

[coderabbitai]

Walkthrough

此次提交主要增加了 transform 函数的测试覆盖面，新增了针对 CSS 中 translateX 和 translateY 百分比值转换的测试用例，并对部分现有测试进行了格式化和错误信息的改进。同时，对 transform.js 文件中的 token 类型处理进行了调整：新增了 PERCENT token 类型，并更新了相关函数（如 oneOfType 和 xyTransformFactory）以接受数组形式的 token 类型，从而使解析逻辑更加灵活。

Changes

文件路径	更改摘要
packages/css-to-react-native/**/tests/index.spec.js	新增对 CSS translateX 与 translateY 百分比值转换的测试用例；调整函数调用格式（使用括号包裹多行字符串）；更新错误信息格式，提高了一致性与可读性。
packages/css-to-react-native/**/transforms/transform.js	添加 PERCENT token 类型；更新 oneOfType 与 xyTransformFactory 以接受数组形式的 token 类型；修改常量定义（如 singleLength、xyNumber、xyLength、xyAngle）以支持多 token 类型解析。

Sequence Diagram(s)

sequenceDiagram
    participant TS as 测试套件
    participant TF as transform函数
    participant TP as Token解析器

    TS->>TF: 提供包含百分比值的CSS字符串
    TF->>TP: 调用 oneOfType([LENGTH, PERCENT]) 解析 translateX/Y 值
    TP-->>TF: 返回解析后的token
    TF-->>TS: 返回转换后的输出对象

Loading

Poem

我是一只快乐的小兔子，
跳跃在代码的花园里，
测试增新香气扑鼻，
错误信息变得优雅明晰，
转换逻辑仿若春风，轻拂每一字节！

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

Scope: all 2 workspace projects
 WARN  GET http://10.0.0.28:4873/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/prettier/-/prettier-2.8.8.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
Progress: resolved 0, reused 0, downloaded 1, added 0
 WARN  GET http://10.0.0.28:4873/eslint-config-standard/-/eslint-config-standard-14.1.1.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/@babel/eslint-parser/-/eslint-parser-7.24.6.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
 WARN  deprecated [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
Progress: resolved 20, reused 0, downloaded 20, added 0
 WARN  GET http://10.0.0.28:4873/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz error (ERR_PNPM_FETCH_500). Will retry in 1 minute. 1 retries left.
Progress: resolved 20, reused 0, downloaded 21, added 0
Progress: resolved 23, reused 0, downloaded 23, added 0
Progress: resolved 23, reused 0, downloaded 24, added 0
 WARN  GET http://10.0.0.28:4873/@typescript-eslint/typescript-estree/-/typescript-estree-7.11.0.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/eslint-utils/-/eslint-utils-1.4.3.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/@babel/parser/-/parser-7.24.6.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/@babel/types/-/types-7.24.0.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
Progress: resolved 164, reused 0, downloaded 148, added 0
 WARN  GET http://10.0.0.28:4873/is-string/-/is-string-1.0.7.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
 WARN  GET http://10.0.0.28:4873/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.6.tgz error (ERR_PNPM_FETCH_500). Will retry in 10 seconds. 2 retries left.
Progress: resolved 311, reused 0, downloaded 296, added 0
Progress: resolved 455, reused 0, downloaded 440, added 0
 ERR_PNPM_FETCH_404  GET http://10.0.0.28:4873/get-stdin/-/get-stdin-6.0.0.tgz: Not Found - 404

This error happened while installing the dependencies of [email protected]

No authorization header was set for the request.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8ae3f2d and 3f08e33.

📒 Files selected for processing (2)

• packages/css-to-react-native/__tests__/index.spec.js (16 hunks)
• packages/css-to-react-native/src/css-to-react-native/transforms/transform.js (2 hunks)

🔇 Additional comments (17)

packages/css-to-react-native/__tests__/index.spec.js (11)

8-48: 新增对百分比单位的变换测试用例

这些新增的测试用例验证了转换函数对百分比值的支持，涵盖了：

• 同时使用 translateX(100%) 和 translateY(100%) 的情况
• 单独使用 translateY(100%) 的情况
• 单独使用 translateX(100%) 的情况

这些变更增强了测试覆盖范围，确保百分比单位在 CSS 转换中能够正确处理。

---

1096-1114: 重构测试代码，增加可读性

通过将 transform 函数调用格式化为多行形式，并添加 { scalable: false } 参数，提高了代码的可读性和一致性。

---

1699-1699: 改进错误信息表达

将错误消息更新为更简洁的格式，保持了错误处理的一致性。

---

2225-2225: 统一错误信息格式

将错误消息格式与其他错误处理保持一致，有助于提高错误信息的可读性。

---

2473-2473: 统一错误信息格式

错误信息格式调整，与文件中其他错误处理保持一致。

---

2493-2493: 统一错误信息格式

错误信息格式调整，与文件中其他错误处理保持一致。

---

3556-3612: 新增 scalable 选项测试

增加了测试，验证 scalable: false 选项是否正确影响转换结果。这确保了当不需要对像素进行缩放时，转换函数能够正确工作。

---

3626-3626: 改进错误消息表达

将错误消息更新为更简洁的格式，保持了错误处理的一致性。

---

3640-3640: 统一错误信息格式

错误信息格式调整，与文件中其他错误处理保持一致。

---

3651-3651: 统一错误信息格式

错误信息格式调整，与文件中其他错误处理保持一致。

---

3666-3666: 统一错误信息格式

错误信息格式调整，与文件中其他错误处理保持一致。

packages/css-to-react-native/src/css-to-react-native/transforms/transform.js (6)

3-3: 添加对百分比单位的支持

从 tokens 对象中解构出 PERCENT 类型，使转换函数能够识别和处理百分比单位。这是支持 CSS 中百分比转换的基础。

---

6-6: 优化 oneOfType 函数接收多种类型

将 oneOfType 函数改为接收 token 类型数组，增强了函数的灵活性。这使得函数可以处理多种类型的值，而不仅限于单一类型。

---

11-13: 更新单值类型定义

将 singleNumber、singleLength 和 singleAngle 更新为使用类型数组，特别是 singleLength 现在同时接受 LENGTH 和 PERCENT 类型，实现了对百分比单位的支持。

---

14-15: 增强 xyTransformFactory 函数

修改 xyTransformFactory 函数接收 token 类型数组，使其能够处理 x 和 y 坐标的多种类型值。这样，transform 函数能够正确处理百分比和其他单位的组合。

---

20-20: 支持 y 坐标使用百分比单位

更新函数以接受 y 坐标的多种类型值，确保 y 坐标也能支持百分比单位。

---

33-35: 更新坐标转换函数

将 xyNumber、xyLength 和 xyAngle 更新为使用类型数组，确保这些函数能够处理多种类型的坐标值，特别是 xyLength 现在可以处理百分比单位。

✨ Finishing Touches

• 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.