Skip to content

fix(web) lynx-view display flex important #1997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Sherry-hue wants to merge 1 commit into from
Closed

fix(web) lynx-view display flex important #1997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/hungry-things-cover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@lynx-js/web-core": patch
---

fix: lynx-view display flex add !important
Comment on lines +1 to +5
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, let's find files related to lynx-view and CSS
find . -type f \( -name "*.css" -o -name "*.scss" -o -name "*.less" \) | grep -i "lynx\|view" | head -20

Repository: lynx-family/lynx-stack

Length of output: 1711

🏁 Script executed:

# Let's also search for lynx-view in the codebase
rg "lynx-view" --type-list

Repository: lynx-family/lynx-stack

Length of output: 455

🏁 Script executed:

# Search for the actual CSS rule that uses !important
rg "display.*flex.*!important" -A 2 -B 2

Repository: lynx-family/lynx-stack

Length of output: 2463

🏁 Script executed:

# Also search for lynx-view styles
rg "lynx-view" -l | head -20

Repository: lynx-family/lynx-stack

Length of output: 1216

🏁 Script executed:

# Find the actual change in the changeset
cat .changeset/hungry-things-cover.md

Repository: lynx-family/lynx-stack

Length of output: 144

🏁 Script executed:

# Check git history for web-core index.css
git log --oneline --all -- packages/web-platform/web-core/index.css | head -20

Repository: lynx-family/lynx-stack

Length of output: 282

🏁 Script executed:

# Get the full content of web-core/index.css to see the current state
cat packages/web-platform/web-core/index.css

Repository: lynx-family/lynx-stack

Length of output: 584

🏁 Script executed:

# Look for recent changes to lynx-view CSS
git log --oneline --all -p -- packages/web-platform/web-core/index.css | head -100

Repository: lynx-family/lynx-stack

Length of output: 2728

🏁 Script executed:

# Check if there are any related issues or PRs mentioning this
rg "lynx-view.*display" -B 3 -A 3 | head -50

Repository: lynx-family/lynx-stack

Length of output: 48

🏁 Script executed:

# Look for test failures or related changes
git log --oneline --all --grep="lynx-view" | head -20

Repository: lynx-family/lynx-stack

Length of output: 1368

🏁 Script executed:

# Check if there's any documentation about CSS specificity issues
rg "display.*flex" packages/web-platform/web-core/ -B 2 -A 2

Repository: lynx-family/lynx-stack

Length of output: 332

🏁 Script executed:

# Look at similar uses of !important in the codebase to understand the pattern
rg "!important" packages/web-platform/web-elements/src/ -l

Repository: lynx-family/lynx-stack

Length of output: 892

🏁 Script executed:

# Check the related issue about CSS style being lost
git log --oneline --all | grep -i "reload\|css.*lost\|display.*flex"

Repository: lynx-family/lynx-stack

Length of output: 872

🏁 Script executed:

# Look at the exact commit that added !important
git show 595bd574 --stat

Repository: lynx-family/lynx-stack

Length of output: 50379

🏁 Script executed:

# Check how many other components use !important for display
rg "display:.*!important|display: .*!important" packages/web-platform/web-elements/src/ | wc -l

Repository: lynx-family/lynx-stack

Length of output: 68

🏁 Script executed:

# Check the pattern of !important usage in the codebase
rg "display.*!important" packages/web-platform/ -c | grep -v ":0$"

Repository: lynx-family/lynx-stack

Length of output: 713

🏁 Script executed:

# Look for the related PR mentioned in git log: #1982
rg "1982" packages/web-platform/ -l

Repository: lynx-family/lynx-stack

Length of output: 120

🏁 Script executed:

# Look for any issues or PRs discussing this change
git log --oneline --all --grep="display" | grep -i lynx

Repository: lynx-family/lynx-stack

Length of output: 316

🏁 Script executed:

# Check the CHANGELOG for any related entries
cat packages/web-platform/web-core/CHANGELOG.md | head -50

Repository: lynx-family/lynx-stack

Length of output: 1853

🏁 Script executed:

# Look at the pattern of !important usage - is it consistently applied to display flex?
rg "display.*flex.*!important" packages/web-platform/web-elements/src/ -l | xargs -I {} sh -c 'echo "=== {} ===" && cat {}'

Repository: lynx-family/lynx-stack

Length of output: 10950

🏁 Script executed:

# Check PR #1982 mentioned in the git log to understand the regression
git log --oneline | grep -i "1982\|css.*lost" | head -5

Repository: lynx-family/lynx-stack

Length of output: 48

🏁 Script executed:

# Look for any test files that might indicate why !important is needed
find packages/web-platform -name "*.test.*" -o -name "*.spec.*" | xargs grep -l "lynx-view.*display" 2>/dev/null | head -5

Repository: lynx-family/lynx-stack

Length of output: 48

Changelog entry is appropriate; this is a regression fix following established framework patterns.

The !important usage on display: flex for lynx-view is consistent with established framework practice—scroll-view, x-text, and other components already use !important on display rules to enforce layout constraints. This change fixes a regression where CSS was being lost on reload (related to PR #1982), rather than introducing a new restriction.

The patch version is correct for a regression fix. Users who need to override the display property can use standard CSS escalation (including !important themselves), just as they would with other framework constraints like Bootstrap or Tailwind.

🤖 Prompt for AI Agents 
In .changeset/hungry-things-cover.md lines 1-5, confirm the changelog entry
states this is a regression fix and uses a patch bump; update the entry to
explicitly mention "Add !important to display: flex on lynx-view to restore
layout on reload" if not exact, keep the patch version for "@lynx-js/web-core",
and save/commit the changes so the release tooling includes the regression fix.

2 changes: 1 addition & 1 deletion packages/web-platform/web-core/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

lynx-view {
contain: strict;
display: flex;
display: flex !important;
}

lynx-view[width="auto"] {
Expand Down
Loading