Repository navigation
test: Capture the sections of the new home page of nextjs.org - #927
Merged
Merged
Conversation
The home page of nextjs.org was redesigned, and the hashed class names that the selectors of its four cases used don't match anything anymore. The selectors are now structural, and the sections are captured again: the hero, the features, the showcase and the footer of the new page.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
shuding
added a commit
that referenced
this pull request
Oct 15, 2026
Tailwind v4 sets the line height of `text-sm` and the other font sizes
with unitless math:
```css
--text-sm--line-height: calc(1.25 / .875);
.text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }
```
Satori converted string line heights like lengths, so `calc(1.25 /
.875)` became `NaN`, and the text had no height. No style error was
reported. On the new footer of nextjs.org (#927), the placeholder of the
email field was 0px tall and disappeared.
In math functions, unitless values are now multiples of the font size,
and lengths and percentages are of the font size, like in browsers.
A new test compares math functions with their values as numbers, also
with `var()` fallbacks, lengths and percentages. It fails without this
change.
| Case | Content mismatch |
|---|---|
| `nextjs-footer`, new section of #927 | 17.31% → 16.02% |
The current cases don't change.
|
🎉 This PR is included in version 0.59.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This branch was successfully deployed
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
1 participant
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.
The home page of nextjs.org was redesigned. The selectors of its four cases used hashed class names, like
[class*="_intro"], which don't match anything anymore, so they couldn't be captured again. The other seven cases still match.The selectors are now structural, which survive new deployments of the page, and the four sections are captured from the new page:
nextjs-heromain > div > section:nth-of-type(1)nextjs-featuresmain > div > section:nth-of-type(2) > div:nth-of-type(2) > ulnextjs-showcasemain > div > section:nth-of-type(4) > div:nth-of-type(1)nextjs-footerfooterThe content is new, so the scores start over. On
main:nextjs-heronextjs-featuresnextjs-showcasenextjs-footerThe new sections already show gaps to fix: the outlined "NEXT" graphic of the hero is missing, and the placeholder of the footer's email field has no height, because Tailwind's
line-height: calc(1.25 / .875)isn't supported. Both are fixed separately.