-
Notifications
You must be signed in to change notification settings - Fork 27.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix missing stylesheets when parallel routes are present (#66300)
This takes the `layerAssets` property from the previous PR and actually renders it, replacing the previous style handling. This ensures that when multiple page segments are rendered on screen, all of their associated CSS files are loaded. The existing `findHeadInCache` method only ever returns a single head node, which means it’d miss stylesheets. Fixes #59308 Fixes #63465
- Loading branch information
Showing
13 changed files
with
212 additions
and
55 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
This file contains 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
9 changes: 9 additions & 0 deletions
9
test/e2e/app-dir/parallel-routes-css/app/@foo/[...catchAll]/page.tsx
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import styles from './style.module.css' | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <div className={styles.bgRed} id="slot"> | ||
| Slot | ||
| </div> | ||
| ) | ||
| } |
3 changes: 3 additions & 0 deletions
3
test/e2e/app-dir/parallel-routes-css/app/@foo/[...catchAll]/style.module.css
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .bgRed { | ||
| background-color: red; | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default function Page() { | ||
| return null | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { ReactNode } from 'react' | ||
|
|
||
| const RootLayout = ({ | ||
| children, | ||
| foo, | ||
| }: { | ||
| children: ReactNode | ||
| foo: ReactNode | ||
| }) => { | ||
| return ( | ||
| <html lang="en"> | ||
| <body> | ||
| {children} | ||
| {foo} | ||
| </body> | ||
| </html> | ||
| ) | ||
| } | ||
|
|
||
| export default RootLayout |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import Link from 'next/link' | ||
|
|
||
| export const metadata = { | ||
| title: 'Nested Page', | ||
| } | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <div className="sub"> | ||
| <p>Sub</p> | ||
| <Link href="/">Home</Link> | ||
| </div> | ||
| ) | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import Link from 'next/link' | ||
| import styles from './style.module.css' | ||
|
|
||
| export const metadata = { | ||
| title: 'Home Page', | ||
| } | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <main id="main" className={styles.bgBlue}> | ||
| <p>Main</p> | ||
| <Link href="/nested">Nested Page</Link> | ||
| </main> | ||
| ) | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .bgBlue { | ||
| background-color: blue; | ||
| } |
50 changes: 50 additions & 0 deletions
50
test/e2e/app-dir/parallel-routes-css/parallel-routes-css.test.ts
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { nextTestSetup } from 'e2e-utils' | ||
| import type { BrowserInterface } from 'next-webdriver' | ||
|
|
||
| describe('parallel-routes-catchall-css', () => { | ||
| const { next } = nextTestSetup({ | ||
| files: __dirname, | ||
| }) | ||
|
|
||
| async function getChildrenBackgroundColor(browser: BrowserInterface) { | ||
| return browser.eval( | ||
| `window.getComputedStyle(document.getElementById('main')).backgroundColor` | ||
| ) | ||
| } | ||
|
|
||
| async function getSlotBackgroundColor(browser: BrowserInterface) { | ||
| return browser.eval( | ||
| `window.getComputedStyle(document.getElementById('slot')).backgroundColor` | ||
| ) | ||
| } | ||
|
|
||
| it('should properly load the Head content from multiple leaf segments', async () => { | ||
| const browser = await next.browser('/') | ||
|
|
||
| // the page background should be blue | ||
| expect(await getChildrenBackgroundColor(browser)).toBe('rgb(0, 0, 255)') | ||
|
|
||
| expect(await browser.elementByCss('title').text()).toBe('Home Page') | ||
| expect(await browser.elementsByCss('title')).toHaveLength(1) | ||
|
|
||
| // navigate to the page that matches a parallel route | ||
| await browser.elementByCss("[href='/nested']").click() | ||
| await browser.waitForElementByCss('#slot') | ||
|
|
||
| // the slot's background color should be red | ||
| expect(await getSlotBackgroundColor(browser)).toBe('rgb(255, 0, 0)') | ||
|
|
||
| // there should no longer be a main element | ||
| expect(await browser.hasElementByCssSelector('#main')).toBeFalsy() | ||
|
|
||
| // the slot background should still be red on a fresh load | ||
| await browser.refresh() | ||
| expect(await getSlotBackgroundColor(browser)).toBe('rgb(255, 0, 0)') | ||
|
|
||
| // when we navigate from the route that matched the catch-all, we should see the CSS for the main element | ||
| await browser.elementByCss("[href='/']").click() | ||
| await browser.waitForElementByCss('#main') | ||
|
|
||
| expect(await getChildrenBackgroundColor(browser)).toBe('rgb(0, 0, 255)') | ||
| }) | ||
| }) |
This file contains 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