fix: firefox @supports(width:1rex)#2288
Merged
PupilTong merged 2 commits intolynx-family:mainfrom Mar 3, 2026
Merged
Conversation
🦋 Changeset detectedLatest commit: 94c3b74 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
Contributor
📝 WalkthroughWalkthroughThis PR updates CSS feature detection from Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the feature-detection used to enable the @container style(...)-based linear/flex toggle logic so that Firefox does not accidentally match the @supports gate.
Changes:
- Replace
@supports (width: 1rex)gating with@supports (-webkit-box-reflect: above)to exclude Firefox. - Simplify nested
var(...)formatting forflex-wrap,flex-direction, andflexdeclarations. - Add a patch changeset for
@lynx-js/web-elements.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/web-platform/web-elements/src/elements/common-css/linear.css | Switches the @supports gate to -webkit-box-reflect and simplifies var(...) usage. |
| packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css | Mirrors the updated @supports not (...) condition for the fallback compat rules. |
| .changeset/crazy-views-sit.md | Adds a patch changeset describing the fix. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css
Show resolved
Hide resolved
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
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-elements/src/compat/LinearContainer/linear-compat.css (1)
103-123:⚠️ Potential issue | 🟡 MinorMissing
> *child combinator on reverse orientation selectors.Lines 104 and 115 are missing the
> *suffix, causingalign-selfto be applied to the container instead of its children. Thealign-selfproperty should target flex items (children), not the flex container.🐛 Proposed fix
[lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *, - [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"], + [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] > *, [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > lynx-wrapper > *, [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] > lynx-wrapper > * { align-self: var(--align-self-column); } [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *, - [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"], + [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] > *, [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > lynx-wrapper > *, [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] > lynx-wrapper > * { align-self: var(--align-self-row); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.css` around lines 103 - 123, The selectors for vertical-reverse and horizontal-reverse (e.g., [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] and [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]) are missing the child combinator suffix "> *", causing align-self to apply to the container instead of its children; update those reverse-orientation selectors so they target the children (including the lynx-wrapper > * variant) and use align-self: var(--align-self-column) or var(--align-self-row) respectively to match the non-reverse selectors.
🤖 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-elements/src/compat/LinearContainer/linear-compat.css`:
- Around line 103-123: The selectors for vertical-reverse and horizontal-reverse
(e.g.,
[lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] and
[lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"])
are missing the child combinator suffix "> *", causing align-self to apply to
the container instead of its children; update those reverse-orientation
selectors so they target the children (including the lynx-wrapper > * variant)
and use align-self: var(--align-self-column) or var(--align-self-row)
respectively to match the non-reverse selectors.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.changeset/crazy-views-sit.mdpackages/web-platform/web-elements/src/compat/LinearContainer/linear-compat.csspackages/web-platform/web-elements/src/elements/common-css/linear.css
Merging this PR will improve performance by 6.23%
Performance Changes
Comparing 
Footnotes
|
Web Explorer#7887 Bundle Size — 383.67KiB (~+0.01%).94c3b74(current) vs 8ca97fe main#7876(baseline) Bundle metrics
|
| Current #7887 |
Baseline #7876 |
|
|---|---|---|
 Initial JS |
154.78KiB |
154.78KiB |
 Initial CSS |
35.09KiB(+0.08%) |
35.06KiB |
 Cache Invalidation |
9.14% |
0% |
| Chunks |
8 |
8 |
| Assets |
8 |
8 |
| Modules |
238(-0.42%) |
239 |
| Duplicate Modules |
16 |
16 |
| Duplicate Code |
2.99% |
2.99% |
| Packages |
4 |
4 |
| Duplicate Packages |
0 |
0 |
Bundle size by type 1 change 1 regression
| Current #7887 |
Baseline #7876 |
|
|---|---|---|
| JS |
252.72KiB |
252.72KiB |
| Other |
95.85KiB |
95.85KiB |
| CSS |
35.09KiB (+0.08%) |
35.06KiB |
Bundle analysis report Branch PupilTong:p/hw/fix-rex Project dashboard
Generated by RelativeCI Documentation Report issue
…from `createElementAPI` to `LynxViewInstance`.
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/web-platform/web-core-wasm/ts/client/mainthread/LynxViewInstance.ts (2)
93-93: Optionally guard against duplicate stylesheet insertion in reused shadow roots.Line 93 appends a link on every construction. If the same
ShadowRootis reused, identical links can accumulate.Suggested tweak
- this.rootDom.append(linkElement.cloneNode(false)); + if (!this.rootDom.querySelector('link[data-lynx-in-shadow]')) { + const inShadowLink = linkElement.cloneNode(false) as HTMLLinkElement; + inShadowLink.setAttribute('data-lynx-in-shadow', ''); + this.rootDom.append(inShadowLink); + }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/web-platform/web-core-wasm/ts/client/mainthread/LynxViewInstance.ts` at line 93, The constructor currently appends linkElement.cloneNode(false) to this.rootDom every time, which can produce duplicate stylesheet <link> tags when a ShadowRoot is reused; modify the code that appends the stylesheet (reference: this.rootDom and linkElement usage in LynxViewInstance) to first check for an existing equivalent <link> (e.g., by rel/href or a data-attribute) inside this.rootDom and only append the cloned link if none is found, ensuring deduplication when reusing the same ShadowRoot.
27-28: Replace broad@ts-expect-errorwith typed*.css?inlinemodule declaration.Line 27 disables strict checking for this import and can mask unrelated type issues. Prefer an ambient declaration (e.g.,
declare module '*.css?inline') and remove the suppression.#!/bin/bash # Verify whether a typed declaration already exists for `*.css?inline` # and where this suppression is used. fd -HI '\.d\.ts$' | xargs rg -n "declare module ['\"].*\\.css\\?inline['\"]|\\*\\.css\\?inline" rg -n "@ts-expect-error|in_shadow\\.css\\?inline" packages/web-platform/web-core-wasm/ts/client/mainthread/LynxViewInstance.tsAs per coding guidelines, "
**/*.{ts,tsx}: Use TypeScript with the strictest mode configuration as defined in tsconfig.json".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/web-platform/web-core-wasm/ts/client/mainthread/LynxViewInstance.ts` around lines 27 - 28, Remove the broad "// `@ts-expect-error`" before the CSS inline import (import IN_SHADOW_CSS_MODERN ...) and instead add a proper ambient module declaration for "*.css?inline" (e.g., declare module '*.css?inline' { const content: string; export default content; }) in a new or existing .d.ts file included by the TS compiler; then re-import IN_SHADOW_CSS_MODERN without the suppression so the import is properly typed (update any tsconfig includes if needed so the declaration is picked up).
🤖 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-wasm/ts/client/mainthread/LynxViewInstance.ts`:
- Line 93: The constructor currently appends linkElement.cloneNode(false) to
this.rootDom every time, which can produce duplicate stylesheet <link> tags when
a ShadowRoot is reused; modify the code that appends the stylesheet (reference:
this.rootDom and linkElement usage in LynxViewInstance) to first check for an
existing equivalent <link> (e.g., by rel/href or a data-attribute) inside
this.rootDom and only append the cloned link if none is found, ensuring
deduplication when reusing the same ShadowRoot.
- Around line 27-28: Remove the broad "// `@ts-expect-error`" before the CSS
inline import (import IN_SHADOW_CSS_MODERN ...) and instead add a proper ambient
module declaration for "*.css?inline" (e.g., declare module '*.css?inline' {
const content: string; export default content; }) in a new or existing .d.ts
file included by the TS compiler; then re-import IN_SHADOW_CSS_MODERN without
the suppression so the import is properly typed (update any tsconfig includes if
needed so the declaration is picked up).
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/web-platform/web-core-wasm/ts/client/mainthread/LynxViewInstance.tspackages/web-platform/web-core-wasm/ts/client/mainthread/elementAPIs/createElementAPI.ts
💤 Files with no reviewable changes (1)
- packages/web-platform/web-core-wasm/ts/client/mainthread/elementAPIs/createElementAPI.ts
Sherry-hue
approved these changes
Mar 3, 2026
colinaaa
pushed a commit
that referenced
this pull request
Mar 9, 2026
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 the packages will be published to npm automatically. 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/devtool-mcp-server@0.5.0 ### Minor Changes - Use `@lynx-js/devtool-connector` instead of `@lynx-js/debug-router-connector`. ([#2284](#2284)) The new connector avoids using keep-alive connections, which makes the connection much more reliable. - **BREAKING CHANGE**: Remove the `./debug-router-connector` exports. ([#2284](#2284)) ## @lynx-js/web-elements@0.12.0 ### Minor Changes - feat: add `willchange` event to `x-viewpager-ng` ([#2305](#2305)) ### Patch Changes - fix: firefox `@supports(width:1rex)` ([#2288](#2288)) - fix: check computed overflow style in `getTheMostScrollableKid` to avoid treating `overflow: visible` elements as scroll containers ([#2309](#2309)) - fix: the inline-truncation should only work as a direct child of x-text ([#2287](#2287)) - fix: getVisibleCells cannot work in firefox due to contentvisibilityautostatechange not propagate list-item ([#2308](#2308)) - fix: foldview stuck issue ([#2304](#2304)) ## @lynx-js/gesture-runtime@2.1.3 ### Patch Changes - Optimize gesture callbacks and relationships to prevent unnecessary gesture registration and rerenders. ([#2277](#2277)) ## @lynx-js/react@0.116.5 ### Patch Changes - Improve React runtime hook profiling. ([#2235](#2235)) Enable Profiling recording first, then enter the target page so the trace includes full render/hydrate phases. - Record trace events for `useEffect` / `useLayoutEffect` hook entry, callback, and cleanup phases. - Log trace events for `useState` setter calls. - Wire `profileFlowId` support in debug profile utilities and attach flow IDs to related hook traces. - Instrument hydrate/background snapshot profiling around patch operations with richer args (e.g. snapshot id/type, dynamic part index, value type, and source when available). - Capture vnode source mapping in dev and use it in profiling args to improve trace attribution. - Expand debug test coverage for profile utilities, hook profiling behavior, vnode source mapping, and hydrate profiling branches. - refactor: call loadWorkletRuntime once in each module ([#2315](#2315)) ## @lynx-js/rspeedy@0.13.5 ### Patch Changes - feat: opt-in the web platform's new binary output format ([#2281](#2281)) Introduce a new flag to enable the new binary output format. Currently it's an internal-use-only flag that will be removed in the future; set the corresponding environment variable to 'true' to enable it. - Avoid generating `Rsbuild vundefined` in greeting message. ([#2275](#2275)) - Updated dependencies \[]: - @lynx-js/web-rsbuild-server-middleware@0.19.8 ## @lynx-js/lynx-bundle-rslib-config@0.2.2 ### Patch Changes - Support bundle and load css in external bundle ([#2143](#2143)) ## @lynx-js/external-bundle-rsbuild-plugin@0.0.3 ### Patch Changes - Updated dependencies \[[`c28b051`](c28b051), [`4cbf809`](4cbf809)]: - @lynx-js/externals-loading-webpack-plugin@0.0.4 ## @lynx-js/react-rsbuild-plugin@0.12.10 ### Patch Changes - Support bundle and load css in external bundle ([#2143](#2143)) - Updated dependencies \[[`59f2933`](59f2933), [`453e006`](453e006)]: - @lynx-js/template-webpack-plugin@0.10.5 - @lynx-js/css-extract-webpack-plugin@0.7.0 - @lynx-js/react-webpack-plugin@0.7.4 - @lynx-js/react-alias-rsbuild-plugin@0.12.10 - @lynx-js/use-sync-external-store@1.5.0 - @lynx-js/react-refresh-webpack-plugin@0.3.4 ## @lynx-js/web-core-wasm@0.0.5 ### Patch Changes - Updated dependencies \[[`4963907`](4963907), [`8fd936a`](8fd936a), [`0d41253`](0d41253), [`d32c4c6`](d32c4c6), [`7518b72`](7518b72), [`fca9d4a`](fca9d4a)]: - @lynx-js/web-elements@0.12.0 ## @lynx-js/externals-loading-webpack-plugin@0.0.4 ### Patch Changes - perf: optimize external bundle loading by merging multiple `fetchBundle` calls for the same URL into a single request. ([#2307](#2307)) - Support bundle and load css in external bundle ([#2143](#2143)) ## @lynx-js/template-webpack-plugin@0.10.5 ### Patch Changes - feat: allow `templateDebugUrl` to be customized via `output.publicPath` or the `beforeEncode` hook. ([#2274](#2274)) - feat: opt-in the web platform's new binary output format ([#2281](#2281)) Introduce a new flag to enable the new binary output format. Currently it's an internal-use-only flag that will be removed in the future; set the corresponding environment variable to 'true' to enable it. - Updated dependencies \[]: - @lynx-js/web-core-wasm@0.0.5 ## create-rspeedy@0.13.5 ## @lynx-js/react-alias-rsbuild-plugin@0.12.10 ## upgrade-rspeedy@0.13.5 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Bug Fixes
Improvements
New Features
Style
Checklist
BTW:
![Uploading img_v3_02vd_e15c6b29-a2d4-4c4d-8235-fd685c250c3g.jpg…]()