feat(px2rem): add mediaQuery config

[stormslowly]

close #1322

if mediaQuery not allowed, skip the visit.

Summary by CodeRabbit

• 新功能

  • 在构建参数中添加了可选字段 mediaQuery，允许用户指定在构建过程中是否考虑媒体查询，从而增强配置灵活性。
  • 新增配置选项以支持 CSS 媒体查询处理，改进响应式设计的控制。

• 文档

  • 更新了文档，添加了关于 mediaQuery 的新配置属性，提供了更好的使用灵活性和可控性。
  • 在中文文档中新增了 mediaQuery 的配置介绍，默认设置为 false。

• 测试

  • 增强了对媒体查询处理的测试，确保在不同配置下的正确性。

[coderabbitai]

Walkthrough

此次更改为 BuildParams 和 Px2RemConfig 结构添加了 mediaQuery 字段，提升了配置灵活性，允许构建过程考虑媒体查询。此外，CSS 处理模块中的方法也进行了重构，以增强对媒体查询的支持。这些修改旨在改进响应式设计的处理，确保在不同屏幕宽度下样式效果的一致性。

Changes

文件路径	更改摘要
crates/binding/src/lib.rs	在 BuildParams 结构中添加可选字段 mediaQuery?: boolean。
crates/mako/src/config/config.rs	在 Px2RemConfig 结构中添加字段 media_query: bool，并修改默认值。
crates/mako/src/visitors/css_px2rem.rs	新增方法 visit_mut_media_query_list，重构了 CSS 处理相关的方法。
docs/config.md	在 px2rem 配置文档中添加可选属性 mediaQuery?: boolean。
e2e/fixtures/config.px2rem/mako.config.json	在 px2rem 配置中新增 mediaQuery: true。
e2e/fixtures/css.px_2_rem/src/index.css	增加一个新的媒体查询，增强响应式设计。
e2e/fixtures/css.px_2_rem/mako.config.json	新增项目配置，包括 px2rem 媒体查询设置。
packages/mako/binding.d.ts	删除 TransformOutput 接口，新增 mediaQuery 属性于 BuildParams 接口。

Assessment against linked issues

Objective	Addressed	Explanation
支持 mediaQuery 子配置项 (#[1322])	✅

🐇 在草地上跳跃，春风轻拂，
媒体查询来临，样式更柔和。
配置灵活如兔子，响应式更出色，
代码欢舞，功能齐欢合！ 🌼

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

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>.
  • 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 generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @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 as 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 resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

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.

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 5bc76e9 and c1644cb.

Files selected for processing (11)

• crates/binding/src/lib.rs (1 hunks)
• crates/mako/src/config/config.rs (2 hunks)
• crates/mako/src/visitors/css_px2rem.rs (5 hunks)
• docs/config.md (2 hunks)
• e2e/fixtures/config.px2rem/mako.config.json (1 hunks)
• e2e/fixtures/css.px_2_rem/config.ts (1 hunks)
• e2e/fixtures/css.px_2_rem/expect.js (1 hunks)
• e2e/fixtures/css.px_2_rem/mako.config.json (1 hunks)
• e2e/fixtures/css.px_2_rem/src/index.css (1 hunks)
• e2e/fixtures/css.px_2_rem/src/index.tsx (1 hunks)
• packages/mako/binding.d.ts (2 hunks)

Files skipped from review due to trivial changes (4)

• e2e/fixtures/css.px_2_rem/config.ts
• e2e/fixtures/css.px_2_rem/mako.config.json
• e2e/fixtures/css.px_2_rem/src/index.css
• e2e/fixtures/css.px_2_rem/src/index.tsx

Additional comments not posted (13)

e2e/fixtures/config.px2rem/mako.config.json (1)

1-3: 新增配置项 mediaQuery

在 px2rem 配置中新增了 mediaQuery 属性，允许在转换过程中考虑媒体查询。这将增强配置的灵活性，确保响应式设计的有效性。

e2e/fixtures/css.px_2_rem/expect.js (1)

1-15: 测试用例验证 px2rem 转换结果

该文件包含了对 px2rem 转换结果的测试断言，包括媒体查询内的转换。测试用例确保了在媒体查询中像素单位正确转换为 rem 单位。

packages/mako/binding.d.ts (1)

108-108: 在 BuildParams 中新增 mediaQuery 属性

在 BuildParams 接口中新增了 mediaQuery 属性，类型为 boolean。这增强了构建过程中的配置选项，允许更细粒度地控制媒体查询的处理。

crates/binding/src/lib.rs (1)

121-121: 新增字段 mediaQuery 的配置项

新增的 mediaQuery 字段为可选布尔值，允许在媒体查询中进行 px 到 rem 的转换。该字段默认值为 false，文档说明清晰。

docs/config.md (2)

544-545: 更新 px2rem 配置文档

文档中新增了 mediaQuery 字段，类型为布尔值，允许在媒体查询中进行 px 到 rem 的转换，默认值为 false。描述清晰且与实现一致。

---

557-557: 新增字段 mediaQuery 的默认值说明

新增字段 mediaQuery 的默认值为 false，文档说明清晰且与实现一致。

crates/mako/src/visitors/css_px2rem.rs (5)

113-117: 新增方法 visit_mut_media_query_list

该方法根据配置项 mediaQuery 来处理媒体查询。如果 mediaQuery 为真，则处理媒体查询的子节点。逻辑清晰且与配置项一致。

---

84-88: 方法 visit_mut_complex_selector 的重定义

该方法保留了原有的解析复杂选择器的功能，并将选择器推入 current_selectors 栈中。逻辑正确且一致。

---

119-122: 方法 visit_mut_qualified_rule 的重定义

该方法在访问子节点之前重置 current_selectors，确保选择器管理的正确性。逻辑正确且一致。

---

292-301: 重命名测试 test_media_query_off

该测试验证了当媒体查询处理被禁用时的行为。测试全面且准确。

---

304-315: 新增测试 test_media_query_on

该测试验证了当媒体查询处理被启用时的行为。测试全面且准确。

crates/mako/src/config/config.rs (2)

253-254: 新增字段 media_query 的实现正确。

新字段 media_query 已正确添加到 Px2RemConfig 结构体中，并使用 #[serde(rename = "mediaQuery", default)] 注解，确保在序列化和反序列化时使用正确的名称和默认值。

---

267-267: Default 实现中 media_query 字段的默认值设置正确。

在 Px2RemConfig 的 Default 实现中，media_query 字段的默认值已正确设置为 false。

[sorrycc]

1、默认 mediaQuery: false 会引入 break change，感觉默认 true 比较好
2、config.zh-CN.md 需要同步更新

[stormslowly]

default false 对齐 https://www.npmjs.com/package/postcss-plugin-px2rem#configuration
对齐社区，不给切换到 mako 的用户惊喜

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between c1644cb and 02afd63.

Files selected for processing (1)

• docs/config.zh-CN.md (1 hunks)

Additional comments not posted (1)

docs/config.zh-CN.md (1)

557-557: 新增的 mediaQuery 配置项描述清晰。

新增的 mediaQuery 配置项描述清晰，位置合理，符合现有文档结构。

[sorrycc]

那下个版本发 0.8.0 。