chore: add a new test case for test by PupilTong · Pull Request #2400 · lynx-family/lynx-stack

PupilTong · 2026-03-30T08:50:54Z

Summary by CodeRabbit

Tests
- Added validation tests to ensure CSS custom properties (variables) are correctly preserved in inline style color declarations, supporting both standard variables and fallback values.

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

changeset-bot · 2026-03-30T08:50:59Z

🦋 Changeset detected

Latest commit: acb2a75

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-03-30T08:51:11Z

📝 Walkthrough

Walkthrough

A Changesets markdown file was added with minimal content, and two unit tests were introduced to validate that inline style transformation correctly preserves CSS custom property expressions (with and without fallback values) in the color property.

Changes

Cohort / File(s)	Summary
Changesets metadata `.changeset/huge-breads-jam.md`	Added new Changesets file with YAML frontmatter delimiter and no content.
Test coverage `packages/web-platform/web-core/src/style_transformer/inline_style.rs`	Added two unit tests verifying that `transform_inline_style_string` preserves CSS custom property expressions: `color: var(--color)` and `color: var(--color, blue)`.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~4 minutes

Possibly related PRs

chore: isolate inline-style-parser #1309: Both PRs interact with the inline style transformation functionality—this PR adds test coverage for CSS custom property preservation while the referenced PR refactors the inline-style parser imports.

Suggested labels

platform:Web

Suggested reviewers

Sherry-hue

Poem

🐰 A changeset springs to life with pride,
Two tests for CSS vars to guide—
With var(--color) safe and sound,
Custom properties are homeward bound! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'chore: add a new test case for test' is vague and repetitive ('test case for test'), failing to clearly specify which functionality is being tested.	Revise the title to be more specific about what is being tested, such as 'chore: add test cases for CSS custom properties in inline styles' to clearly convey the test's purpose.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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 · 2026-03-30T08:53:45Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

coderabbitai

🧹 Nitpick comments (2)

packages/web-platform/web-core/src/style_transformer/inline_style.rs (2)
192-203: Consider adding edge case coverage for CSS variables.

The existing color transformation tests (lines 143-160) include variations for whitespace and !important modifiers. Consider adding similar coverage for CSS variables to ensure robust handling:

Whitespace: " color : var(--color) ;"

Important modifier: "color: var(--color) !important;"

Complex fallback: "color: var(--color, var(--fallback, blue));"
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/web-platform/web-core/src/style_transformer/inline_style.rs` around
lines 192 - 203, Add unit tests for CSS variable edge cases to the
inline_style.rs test suite to mirror existing color tests: create tests that
call transform_inline_style_string(source, &TransformerConfig::default()) with
inputs covering (1) whitespace variations like " color : var(--color) ;", (2)
important modifier "color: var(--color) !important;", and (3) nested fallbacks
"color: var(--color, var(--fallback, blue));" and assert the result contains the
normalized output (e.g., "color:var(--color)", "color:var(--color)!important",
and "color:var(--color,var(--fallback,blue))" respectively) so
transform_inline_style_string and TransformerConfig are exercised for these
cases.
192-203: Strengthen test assertions to match existing patterns.

The new tests use assert!(result.contains(...)), which only verifies substring presence rather than the complete transformation output. This is weaker than the existing test pattern in this file (e.g., lines 136-139, 147-148) that use assert_eq! to verify exact results.

Color transformations add additional CSS properties like --lynx-text-bg-color, -webkit-background-clip, and background-clip. The contains assertion won't catch if these are missing or incorrect when CSS variables are used.
🔍 Proposed fix: Use exact output assertions

First, verify the actual transformation output by running these tests with debug printing, then replace with exact assertions:
  #[test]
  fn transform_color_with_css_var() {
    let source = "color: var(--color)";
    let result = transform_inline_style_string(source, &TransformerConfig::default());
-    assert!(result.contains("color:var(--color)"));
+    assert_eq!(
+      result,
+      "--lynx-text-bg-color:initial;-webkit-background-clip:initial;background-clip:initial;color:var(--color);"
+    );
  }
  #[test]
  fn transform_color_with_css_var_and_fallback() {
    let source = "color: var(--color, blue)";
    let result = transform_inline_style_string(source, &TransformerConfig::default());
-    assert!(result.contains("color:var(--color, blue)"));
+    assert_eq!(
+      result,
+      "--lynx-text-bg-color:initial;-webkit-background-clip:initial;background-clip:initial;color:var(--color, blue);"
+    );
  }
Note: Adjust the expected output based on actual transformation behavior if different.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/web-platform/web-core/src/style_transformer/inline_style.rs` around
lines 192 - 203, Replace the weak substring assertions in tests
transform_color_with_css_var and transform_color_with_css_var_and_fallback with
exact equality checks: call transform_inline_style_string(source,
&TransformerConfig::default()) and assert_eq! the result to the full expected
transformed output (including added properties such as --lynx-text-bg-color,
-webkit-background-clip, background-clip, and any normalized
spacing/punctuation) so the tests validate the complete transformation; update
the expected strings to match the actual output produced by
transform_inline_style_string and TransformerConfig::default() before
committing.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/web-platform/web-core/src/style_transformer/inline_style.rs`:
- Around line 192-203: Add unit tests for CSS variable edge cases to the
inline_style.rs test suite to mirror existing color tests: create tests that
call transform_inline_style_string(source, &TransformerConfig::default()) with
inputs covering (1) whitespace variations like " color : var(--color) ;", (2)
important modifier "color: var(--color) !important;", and (3) nested fallbacks
"color: var(--color, var(--fallback, blue));" and assert the result contains the
normalized output (e.g., "color:var(--color)", "color:var(--color)!important",
and "color:var(--color,var(--fallback,blue))" respectively) so
transform_inline_style_string and TransformerConfig are exercised for these
cases.
- Around line 192-203: Replace the weak substring assertions in tests
transform_color_with_css_var and transform_color_with_css_var_and_fallback with
exact equality checks: call transform_inline_style_string(source,
&TransformerConfig::default()) and assert_eq! the result to the full expected
transformed output (including added properties such as --lynx-text-bg-color,
-webkit-background-clip, background-clip, and any normalized
spacing/punctuation) so the tests validate the complete transformation; update
the expected strings to match the actual output produced by
transform_inline_style_string and TransformerConfig::default() before
committing.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 22c5e67e-6103-4d0c-88e0-857dda11430c

📥 Commits

Reviewing files that changed from the base of the PR and between 78493b4 and acb2a75.

📒 Files selected for processing (2)

.changeset/huge-breads-jam.md
packages/web-platform/web-core/src/style_transformer/inline_style.rs

codspeed-hq · 2026-03-30T09:11:44Z

Merging this PR will improve performance by 26.99%

⚡ 1 improved benchmark
✅ 71 untouched benchmarks
⏩ 21 skipped benchmarks¹

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
⚡	`002-hello-reactLynx-destroyBackground`	861.5 µs	678.4 µs	+26.99%

_{Comparing PupilTong:p/hw/chore-add-test-case-for-color-transform (acb2a75) with main (78493b4)}

21 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

relativeci · 2026-03-30T09:13:26Z

Web Explorer

#8536 Bundle Size — 728.6KiB (0%).

acb2a75(current) vs 78493b4 main#8520(baseline)

Bundle metrics

2 changes

	Current #8536	Baseline #8520
Initial JS	`43.3KiB`	`43.3KiB`
Initial CSS	`2.16KiB`	`2.16KiB`
Cache Invalidation	`0%`	`0%`
Chunks	`8`	`8`
Assets	`10`	`10`
Modules	`150`(`+1.35%`)	`148`
Duplicate Modules	`11`	`11`
Duplicate Code	`34.68%`(`-0.06%`)	`34.7%`
Packages	`3`	`3`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #8536	Baseline #8520
Other	`384.4KiB`	`384.4KiB`
JS	`342.04KiB`	`342.04KiB`
CSS	`2.16KiB`	`2.16KiB`

Bundle analysis report Branch PupilTong:p/hw/chore-add-test-ca... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-03-30T09:13:28Z

React MTF Example

#92 Bundle Size — 207.47KiB (0%).

acb2a75(current) vs 78493b4 main#76(baseline)

Bundle metrics no changes

	Current #92	Baseline #76
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`3`	`3`
Modules	`174`	`174`
Duplicate Modules	`68`	`68`
Duplicate Code	`46.09%`	`46.09%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #92	Baseline #76
IMG	`111.23KiB`	`111.23KiB`
Other	`96.24KiB`	`96.24KiB`

Bundle analysis report Branch PupilTong:p/hw/chore-add-test-ca... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

relativeci · 2026-03-30T09:13:28Z

React Example

#6958 Bundle Size — 237.89KiB (0%).

acb2a75(current) vs 78493b4 main#6942(baseline)

Bundle metrics no changes

	Current #6958	Baseline #6942
Initial JS	`0B`	`0B`
Initial CSS	`0B`	`0B`
Cache Invalidation	`0%`	`0%`
Chunks	`0`	`0`
Assets	`4`	`4`
Modules	`180`	`180`
Duplicate Modules	`71`	`71`
Duplicate Code	`46.4%`	`46.4%`
Packages	`2`	`2`
Duplicate Packages	`0`	`0`

Bundle size by type no changes

	Current #6958	Baseline #6942
IMG	`145.76KiB`	`145.76KiB`
Other	`92.13KiB`	`92.13KiB`

Bundle analysis report Branch PupilTong:p/hw/chore-add-test-ca... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

chore: add a new test case for test

acb2a75

PupilTong requested a review from Sherry-hue as a code owner March 30, 2026 08:50

PupilTong self-assigned this Mar 30, 2026

coderabbitai bot added the platform:Web label Mar 30, 2026

coderabbitai bot reviewed Mar 30, 2026

View reviewed changes

Sherry-hue approved these changes Mar 30, 2026

View reviewed changes

PupilTong merged commit 33b6156 into lynx-family:main Mar 30, 2026
131 of 137 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: add a new test case for test#2400

chore: add a new test case for test#2400
PupilTong merged 1 commit intolynx-family:mainfrom
PupilTong:p/hw/chore-add-test-case-for-color-transform

PupilTong commented Mar 30, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Mar 30, 2026

Uh oh!

coderabbitai bot commented Mar 30, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 inconclusive)

Uh oh!

codecov bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

codspeed-hq bot commented Mar 30, 2026

Uh oh!

relativeci bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

relativeci bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

relativeci bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

PupilTong commented Mar 30, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

changeset-bot bot commented Mar 30, 2026

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 inconclusive)

Uh oh!

codecov bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

codspeed-hq bot commented Mar 30, 2026

Merging this PR will improve performance by 26.99%

Performance Changes

Footnotes

Uh oh!

relativeci bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#8536 Bundle Size — 728.6KiB (0%).

Uh oh!

relativeci bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React MTF Example

#92 Bundle Size — 207.47KiB (0%).

Uh oh!

relativeci bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

React Example

#6958 Bundle Size — 237.89KiB (0%).

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

PupilTong commented Mar 30, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 30, 2026 •

edited

Loading

codecov bot commented Mar 30, 2026 •

edited

Loading

relativeci bot commented Mar 30, 2026 •

edited

Loading

relativeci bot commented Mar 30, 2026 •

edited

Loading

relativeci bot commented Mar 30, 2026 •

edited

Loading