fix: update rpx unit calculation and support container-based viewport…

[PupilTong]

… units for transformVH

Summary by CodeRabbit

• Bug Fixes

  • Fixed sizing behavior when using container-based length units so transforms produce correct dimensions.
  • Corrected the default responsive-pixel (rpx) scale.

• Style

  • Updated default measurement unit values and container sizing behavior for more consistent layouts.

• Tests

  • Strengthened end-to-end tests to validate updated sizing and unit behaviors.

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]

🦋 Changeset detected

Latest commit: c792e40

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

This PR includes changesets to release 9 packages

Name	Type
@lynx-js/web-core	Patch
upgrade-rspeedy	Patch
@lynx-js/web-rsbuild-server-middleware	Patch
@lynx-js/template-webpack-plugin	Patch
@lynx-js/react-rsbuild-plugin	Patch
create-rspeedy	Patch
@lynx-js/web-worker-rpc	Patch
@lynx-js/react-alias-rsbuild-plugin	Patch
@lynx-js/rspeedy	Patch

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]

📝 Walkthrough

Walkthrough

Updated CSS unit defaults to container-query units (cqw/cqh), removed several CSS @property registrations, added a lynx-view[transform-vh] container sizing rule, extended E2E tests to exercise these unit/transform behaviors, and added two patch changeset files.

Changes

Cohort / File(s)	Summary
Changesets \.changeset/red-pears-kiss.md, \.changeset/warm-zoos-prove.md	Added two patch changeset files: one records a fix for transformVH with cqw base unit; the other documents rpx default value change.
E2E Tests packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts	Adjusted tests to set --rpx-unit to 1cqw, added flows that re-enable transformVW/transformVH, set --vh-unit/--vw-unit to 1cqh/1cqw, reload and assert computed sizes.
Core CSS packages/web-platform/web-core/css/index.css	Changed unit defaults (--vw-unit → 1cqw, --vh-unit → 1cqh, --rpx-unit adjusted), added lynx-view[transform-vh] { container-type: size; }, and removed several CSS @property registrations for unit variables.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• chore: remove web-core json tests #2362 — modifies the same E2E test file and adjusts unit/transform test behavior.

Suggested reviewers

• Sherry-hue
• colinaaa

Poem

🐰 I hopped through styles and tiny quirks,
cqw and cqh remapped the works,
rpx tuned neat and tests rehearse,
transforms hum and sizes converse,
a rabbit cheers this little perks!

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: update rpx unit calculation and support container-based viewport…' clearly summarizes the main changes: updating rpx unit calculation and adding container-based viewport support for transformVH.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

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]

Actionable comments posted: 3

🧹 Nitpick comments (1)

packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts (1)

395-398: These assertions no longer cover the new default --rpx-unit.

Overriding --rpx-unit to 1cqw in both cases only tests the manual override path; it no longer exercises the default calc(1cqw / 750) introduced in packages/web-platform/web-core/css/index.css Lines 13-16. Please keep at least one case on the default path so this regression stays covered.

Also applies to: 408-410

🤖 Prompt for AI Agents

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

In `@packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts` around lines 395
- 398, The test currently overrides the CSS variable using lynxView.evaluate and
node.style.setProperty('--rpx-unit', '1cqw'), which means it only exercises the
manual override path; change one of the test cases so it does not set --rpx-unit
(remove the node.style.setProperty call) or add a separate evaluation that
leaves the variable unset so the default calc(1cqw / 750) path in
packages/web-platform/web-core/css/index.css is exercised; keep the other case
that explicitly sets '--rpx-unit' to verify the override behavior, referencing
the lynxView.evaluate block and the node.style.width assignment to locate where
to change.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In @.changeset/red-pears-kiss.md:
- Line 5: Update the user-facing release note text so it uses proper grammar:
change the sentence "transformVH not work with cqw unit as the base length" to a
clearer phrasing such as "transformVH does not work with cqw unit as the base
length" (or similar) in the generated changelog entry for transformVH so the
changelog reads correctly.

In `@packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts`:
- Around line 460-463: The test sets CSS on a DOM node using node.style.weight
which is invalid; update the styling to use node.style.width instead so the
intended width is applied (keep the other properties node.style.height,
node.style.minHeight, node.style.minWidth unchanged) in the reactlynx.spec.ts
test where the styles are assigned.

In `@packages/web-platform/web-core/css/index.css`:
- Around line 19-20: The new rule setting container-type: size on
lynx-view[transform-vh] forces size containment and prevents contain: content
from acting as an escape hatch; update the CSS so transform-vh does not apply
size containment when the element is intended to auto-size (e.g., change the
selector to lynx-view[transform-vh]:not([height="auto"]):not([width="auto"]) or
add an alternative rule that omits container-type for
lynx-view[height="auto"][transform-vh] and
lynx-view[width="auto"][transform-vh]), and add a regression test that verifies
lynx-view[height="auto"][transform-vh] can grow with its contents.

---

Nitpick comments:
In `@packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts`:
- Around line 395-398: The test currently overrides the CSS variable using
lynxView.evaluate and node.style.setProperty('--rpx-unit', '1cqw'), which means
it only exercises the manual override path; change one of the test cases so it
does not set --rpx-unit (remove the node.style.setProperty call) or add a
separate evaluation that leaves the variable unset so the default calc(1cqw /
750) path in packages/web-platform/web-core/css/index.css is exercised; keep the
other case that explicitly sets '--rpx-unit' to verify the override behavior,
referencing the lynxView.evaluate block and the node.style.width assignment to
locate where to change.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a4c499dd-359c-4e43-bec0-8ff2e47fab46

📥 Commits

Reviewing files that changed from the base of the PR and between 5c39654 and 4931feb.

📒 Files selected for processing (4)

• .changeset/red-pears-kiss.md
• .changeset/warm-zoos-prove.md
• packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
• packages/web-platform/web-core/css/index.css

[relativeci]

React External

#531 Bundle Size — 580.35KiB (0%).

c792e40(current) vs 3118b10 main#524(baseline)

Bundle metrics  no changes

	Current #531	Baseline #524
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	3	3
Modules	17	17
Duplicate Modules	5	5
Duplicate Code	8.59%	8.59%
Packages	0	0
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #531	Baseline #524
Other	580.35KiB	580.35KiB

Bundle analysis report Branch PupilTong:p/hw/fix-cqh-vh Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React MTF Example

#547 Bundle Size — 193.94KiB (0%).

c792e40(current) vs 3118b10 main#540(baseline)

Bundle metrics  no changes

	Current #547	Baseline #540
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	3	3
Modules	173	173
Duplicate Modules	66	66
Duplicate Code	43.94%	43.94%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #547	Baseline #540
IMG	111.23KiB	111.23KiB
Other	82.71KiB	82.71KiB

Bundle analysis report Branch PupilTong:p/hw/fix-cqh-vh Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

Web Explorer

#8988 Bundle Size — 898.4KiB (~+0.01%).

c792e40(current) vs 3118b10 main#8981(baseline)

Bundle metrics   3 changes 1 regression

	Current #8988	Baseline #8981
Initial JS	44.47KiB	44.47KiB
Initial CSS	2.22KiB(+2.53%)	2.16KiB
Cache Invalidation	0.24%	0%
Chunks	9	9
Assets	11	11
Modules	230(-0.43%)	231
Duplicate Modules	11	11
Duplicate Code	27.2%	27.2%
Packages	10	10
Duplicate Packages	0	0

Bundle size by type   1 change 1 regression

	Current #8988	Baseline #8981
JS	494.55KiB	494.55KiB
Other	401.63KiB	401.63KiB
CSS	2.22KiB (+2.53%)	2.16KiB

Bundle analysis report Branch PupilTong:p/hw/fix-cqh-vh Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

React Example

#7414 Bundle Size — 223.33KiB (0%).

c792e40(current) vs 3118b10 main#7407(baseline)

Bundle metrics  no changes

	Current #7414	Baseline #7407
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	4	4
Modules	179	179
Duplicate Modules	69	69
Duplicate Code	44.48%	44.48%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #7414	Baseline #7407
IMG	145.76KiB	145.76KiB
Other	77.58KiB	77.58KiB

Bundle analysis report Branch PupilTong:p/hw/fix-cqh-vh Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[coderabbitai]

♻️ Duplicate comments (1)

packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts (1)

457-463: ⚠️ Potential issue | 🟠 Major

Use width instead of invalid style.weight.

Line 461 assigns node.style.weight, which is ignored by CSSStyleDeclaration. That can leave width uncontrolled and make the 250px assertions unstable.

Proposed fix

       await lynxView.evaluate((node: any) => {
         node.transformVW = true;
         node.transformVH = true;
         node.style.height = '500px';
-        node.style.weight = '500px';
+        node.style.width = '500px';
         node.style.minHeight = '500px';
         node.style.minWidth = '500px';
         node.style.setProperty('--vh-unit', '1cqh');
         node.style.setProperty('--vw-unit', '1cqw');
         node.reload();
       });

#!/bin/bash
# Verify no invalid CSSStyleDeclaration `style.weight` writes remain in this test file
rg -nP '\bstyle\.weight\s*=' packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts

# Expected result after fix:
# - no matches

🤖 Prompt for AI Agents

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

In `@packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts` around lines 457
- 463, The test mistakenly sets an invalid CSS property node.style.weight inside
the lynxView.evaluate block; replace any assignments to node.style.weight with
node.style.width (e.g., in the evaluate callback where transformVW/VH are set
and height/minHeight/minWidth are assigned) so the test actually controls
element width and removes the invalid CSS write that breaks assertions.

🤖 Prompt for all review comments with AI agents

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

Duplicate comments:
In `@packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts`:
- Around line 457-463: The test mistakenly sets an invalid CSS property
node.style.weight inside the lynxView.evaluate block; replace any assignments to
node.style.weight with node.style.width (e.g., in the evaluate callback where
transformVW/VH are set and height/minHeight/minWidth are assigned) so the test
actually controls element width and removes the invalid CSS write that breaks
assertions.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 40741142-6f7b-4e5a-aff8-90f77df19b3f

📥 Commits

Reviewing files that changed from the base of the PR and between 4931feb and 68029ae.

📒 Files selected for processing (4)

• .changeset/red-pears-kiss.md
• .changeset/warm-zoos-prove.md
• packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
• packages/web-platform/web-core/css/index.css

✅ Files skipped from review due to trivial changes (2)

• .changeset/red-pears-kiss.md
• .changeset/warm-zoos-prove.md

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/web-platform/web-core/css/index.css

[codspeed-hq]

Merging this PR will improve performance by 16.81%

⚡ 1 improved benchmark
✅ 80 untouched benchmarks
⏩ 26 skipped benchmarks¹

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	transform 1000 view elements	47.7 ms	40.8 ms	+16.81%

---

_{Comparing PupilTong:p/hw/fix-cqh-vh (c792e40) with main (3118b10)}

Footnotes

1. 26 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. ↩

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts (1)

395-410: ⚠️ Potential issue | 🟡 Minor

Keep one rpx assertion on the default unit value.

Both updated rpx cases override --rpx-unit to 1cqw, so they no longer catch regressions in the new default --rpx-unit: calc(1cqw / 7.5) from packages/web-platform/web-core/css/index.css. Please leave at least one case using the default, or add a separate default-coverage assertion.

Example adjustment for a default-unit assertion

       const lynxView = await page.locator('lynx-view');
       await lynxView.evaluate((node) => {
-        node.style.width = '50px';
-        node.style.setProperty('--rpx-unit', '1cqw');
+        node.style.width = '750px';
       });
       const target = await page.locator('#target');
-      await expect(target).toHaveCSS('height', '10px'); // 20cqw, 50 / 100 * 20 = 10px
-      await expect(target).toHaveCSS('width', '10px');
+      await expect(target).toHaveCSS('height', '20px'); // 20rpx with default calc(1cqw / 7.5)
+      await expect(target).toHaveCSS('width', '20px');

🤖 Prompt for AI Agents

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

In `@packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts` around lines 395
- 410, The two rpx tests both set --rpx-unit to '1cqw', so they no longer
validate the default unit; update the tests so at least one assertion checks
behavior with the default --rpx-unit (either remove the
node.style.setProperty('--rpx-unit', ...) call from one of the tests like
'basic-rpx-unit-js-value' or add a new assertion/test that leaves --rpx-unit
untouched), then assert the expected height/width on the same locator (target)
to cover the default calc(1cqw / 7.5) value; adjust only the test setup for
lynxView.evaluate and keep the existing expect(target).toHaveCSS checks for that
default-case.

🤖 Prompt for all review comments with AI agents

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

Outside diff comments:
In `@packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts`:
- Around line 395-410: The two rpx tests both set --rpx-unit to '1cqw', so they
no longer validate the default unit; update the tests so at least one assertion
checks behavior with the default --rpx-unit (either remove the
node.style.setProperty('--rpx-unit', ...) call from one of the tests like
'basic-rpx-unit-js-value' or add a new assertion/test that leaves --rpx-unit
untouched), then assert the expected height/width on the same locator (target)
to cover the default calc(1cqw / 7.5) value; adjust only the test setup for
lynxView.evaluate and keep the existing expect(target).toHaveCSS checks for that
default-case.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dcb7173b-f685-4260-b701-de965687cec4

📥 Commits

Reviewing files that changed from the base of the PR and between 68029ae and c792e40.

📒 Files selected for processing (4)

• .changeset/red-pears-kiss.md
• .changeset/warm-zoos-prove.md
• packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
• packages/web-platform/web-core/css/index.css

✅ Files skipped from review due to trivial changes (2)

• .changeset/warm-zoos-prove.md
• .changeset/red-pears-kiss.md

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/web-platform/web-core/css/index.css