Skip to content

refactor: 处理scss引入方式#3476

Open
xiaoyatong wants to merge 2 commits into
feat_v4.xfrom
fix/issue-3430
Open

refactor: 处理scss引入方式#3476
xiaoyatong wants to merge 2 commits into
feat_v4.xfrom
fix/issue-3430

Conversation

@xiaoyatong
Copy link
Copy Markdown
Collaborator

@xiaoyatong xiaoyatong commented Jun 3, 2026

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • fork仓库代码是否为最新避免文件冲突
  • Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

发布说明

  • Bug Fixes

    • 改进了滑动(Swipe)组件在边缘检测和开合阈值计算中的逻辑准确性。
  • Refactor

    • 优化了滑动组件的性能,减少了不必要的状态更新。
    • 改进了样式构建流程。

xiaoyatong and others added 2 commits June 3, 2026 23:54
- Fix useCallback refs with unstable deps (props.leftAction/rightAction)
  that triggered setActionWidth on every render, causing an infinite loop
- Add width equality check before updating state to break the cycle
- Fix `opened` ref accessed without `.current` in both H5 and Taro versions

Closes #3433

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The Taro build script's PostCSS plugin only handled @import rules but
the source scss files had already been migrated to @use syntax. This
caused the output dist scss files to retain deprecated @import rules,
triggering Dart Sass deprecation warnings for downstream consumers.

Align the Taro build (buildCSS, buildHarmonyCSS) with the H5 build by
handling both @import and @use at-rules and ensuring @use with 'as *'
in the output. Also fix sass compilation to place @use statements
before variable definitions as required by the Sass spec.

Closes #3430

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@github-actions github-actions Bot added the action:review This PR needs more reviews (less than 2 approvals) label Jun 3, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Jun 3, 2026

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 5ee0d048-2671-43de-8c31-9dd5d06cb703

📥 Commits

Reviewing files that changed from the base of the PR and between 5cc31d1 and 9a54f3f.

📒 Files selected for processing (3)
  • scripts/build-taro.mjs
  • src/packages/swipe/swipe.taro.tsx
  • src/packages/swipe/swipe.tsx

总览

该 PR 将构建脚本中的 SCSS @import 改为 @use 模块化语法,并优化了 Swipe 组件的触摸事件处理,通过使用 ref 状态和条件更新来减少不必要的状态变化。

改动详情

构建脚本 SCSS @use 模块化改造

层级 / 文件 摘要
buildAllCSS 全量样式表生成改造
scripts/build-taro.mjs
generateAllStyles 中的 @import 改为 @use 语句,遍历主题 SCSS 文件时调整相对路径与 as * 形式。
buildCSS PostCSS 处理与输入重组
scripts/build-taro.mjs
PostCSS remove-atrule 插件扩展为同时处理 importuse at-rule;将编译后的 CSS 按行拆分,提取所有 @use 语句后重新组装为"use 语句 + variables + 其余行"的格式进行 SCSS 编译。
buildHarmonyCSS PostCSS 处理与输入重组
scripts/build-taro.mjs
鸿蒙样式构建的 PostCSS 和 SCSS 编译逻辑与 buildCSS 对齐,采用相同的 at-rule 处理和行级拆分重组方式。

Swipe 组件触摸状态与宽度同步优化

层级 / 文件 摘要
触摸判断与阈值计算改用 opened.current
src/packages/swipe/swipe.tsx, src/packages/swipe/swipe.taro.tsx
isEdge 和 baseNum 计算从使用 opened 改为使用 opened.current,确保边缘判定和开合阈值基于当前 ref 状态。
actionWidth 同步与 Ref 宽度回调优化
src/packages/swipe/swipe.tsx
新增 actionWidthRef 在每次渲染时同步 actionWidth;重写 leftRef 和 rightRef 为无依赖的 useCallback,仅在测得宽度与缓存值不同时触发 setActionWidth 更新。

预估审查工作量

🎯 3 (中等) | ⏱️ ~25 分钟

可能相关的 PR

建议审查人

  • oasis-cloud

🐰 构建脚本巧改 @use
Swipe 组件用 ref 来助;
状态更新更精准,
触摸滑动如丝绸,
性能优化在路上!✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning PR描述完全未填充,仅包含空白的模板,未勾选任何变动性质、未提供相关Issue链接、未说明需求背景和解决方案、未完成自查清单。 请填充PR描述:勾选'重构'选项,提供Issue链接或变更背景说明,说明解决的具体问题和方案,完成自查清单的全部勾选。
Docstring Coverage ⚠️ Warning Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed 标题准确总结了主要变更内容:重构SCSS引入方式,这是代码库中大部分文件改动的核心内容。
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/issue-3430

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link
Copy Markdown

codecov Bot commented Jun 3, 2026

Codecov Report

❌ Patch coverage is 73.68421% with 5 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (feat_v4.x@5cc31d1). Learn more about missing BASE report.

Files with missing lines Patch % Lines
src/packages/swipe/swipe.tsx 73.68% 5 Missing ⚠️

❌ Your patch check has failed because the patch coverage (73.68%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files
@@             Coverage Diff              @@
##             feat_v4.x    #3476   +/-   ##
============================================
  Coverage             ?   87.87%           
============================================
  Files                ?      295           
  Lines                ?    19747           
  Branches             ?     3079           
============================================
  Hits                 ?    17352           
  Misses               ?     2389           
  Partials             ?        6           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

action:review This PR needs more reviews (less than 2 approvals) size/L

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant