fix(example-preview): make lynx-view rpx/vh/vw container-relative#38
fix(example-preview): make lynx-view rpx/vh/vw container-relative#38
Conversation
✅ Deploy Preview for lynx-go-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🦋 Changeset detectedLatest commit: 75be5be The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
There was a problem hiding this comment.
Pull request overview
This PR updates the web example preview’s <lynx-view> host styling so unit conversion for rpx/vh/vw becomes container-relative (preview-container-based) rather than browser-viewport-based, aiming to better match mobile layout expectations.
Changes:
- Adds container query sizing (
containerType: 'size') and host CSS custom properties for container-relative units (--vh-unit,--vw-unit,--rpx-unit). - Removes the previous resize-driven injection of
--lynx-vh/--lynx-vwcustom properties. - Adds additional
<lynx-view>attributes (lynx-group-id,transform-vh,transform-vw) and hoists the style object to a module-level constant.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Huxpro
left a comment
Huxpro
left a comment
There was a problem hiding this comment.
Review: fix(example-preview): make lynx-view rpx/vh/vw container-relative
Summary
Good direction — switching from absolute pixel-based --lynx-vh/--lynx-vw to CSS container query units (cqh/cqw) is the right move for making the preview container-relative. The module-level style constant and the CSSVarProperties helper type are clean improvements.
Blocking Issue
rewriteViewportUnits() is broken by this change. The function still rewrites template CSS to reference var(--lynx-vh) / var(--lynx-vw), but those custom properties are no longer defined anywhere. The fallback values (100vh/100vw) will be used, making units browser-viewport-relative again. This needs to be reconciled — either update the rewrite function, bridge the old and new property names, or remove rewriteViewportUnits if transform-vh/transform-vw make it redundant.
Other Issues
- TypeScript:
lynx-group-id,transform-vh,transform-vware not in theJSX.IntrinsicElements['lynx-view']declaration — strict TS will reject these props. - Magic number:
lynx-group-id={2}is unexplained. contain: 'strict'adds layout+paint containment on top of the size containment already implied bycontainerType: 'size'. Fine if intentional, but worth a comment.
What looks good
CSSVarPropertiestype is a clean way to allow CSS custom properties without@ts-ignore.- Hoisting the style object to a module-level constant avoids re-allocation on every render.
- The
--rpx-unit: calc(100cqw / 750)formula correctly implements the 750-wide design baseline. - Changeset is included and correctly scoped as a patch.
Generated by Claude Code
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Dugyu
force-pushed
the
fix/lynx-view-rpx-vh-vw
branch
from
247b0b7 to
75be5be
Compare
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or [setup this action to publish automatically](https://github.com/changesets/action#with-publishing). If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/go-web@0.2.1 ### Patch Changes - Fix `<lynx-view>` unit scaling so `rpx`/`vh`/`vw` match mobile behavior in embedded contexts. ([#38](#38)) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Problem
The web example preview embeds Lynx content inside a
<lynx-view>container. Unit conversion forrpx/vh/vwcould end up behaving like “browser viewport based” instead of “preview container based”, causing layout/scale differences compared to mobile expectations.What changed
<lynx-view>host viacontainerType: 'size'.--vh-unit: 1cqh--vw-unit: 1cqw--rpx-unit: calc(100cqw / 750)(750 design width baseline)--*custom properties onstylewithout errors, and moved the style object to a module-level constant to avoid re-creating it on each render.Result
Web preview sizing becomes container-relative and closer to mobile behavior for
rpxscaling andvh/vw-driven layouts.Verification
pnpm -s typecheckRelated