From d0e72fd9fadcb1acfb595a779d87cd0762b08c3d Mon Sep 17 00:00:00 2001 From: Devin Wall Date: Mon, 3 Jan 2022 15:35:57 -0500 Subject: [PATCH] Fixes issue with makeStylesheetInert (#32027) Fixes https://github.com/vercel/next.js/issues/32024 Fixing makeStylesheetInert. Fixes log import. ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` Co-authored-by: Devin Wall <87490815+DevinWallKcl@users.noreply.github.com> --- packages/next/pages/_document.tsx | 27 +++++++++----- .../pages/_document.js | 36 +++++++++++++++++++ .../pages/index.js | 8 +++++ .../font-optimization/test/index.test.js | 6 ++++ 4 files changed, 68 insertions(+), 9 deletions(-) create mode 100644 test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/_document.js create mode 100644 test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/index.js diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx index c1c00608dc5fb..8d314577f4584 100644 --- a/packages/next/pages/_document.tsx +++ b/packages/next/pages/_document.tsx @@ -452,21 +452,30 @@ export class Head extends Component< makeStylesheetInert(node: ReactNode): ReactNode[] { return React.Children.map(node, (c: any) => { if ( - c.type === 'link' && - c.props['href'] && + c?.type === 'link' && + c?.props?.href && OPTIMIZED_FONT_PROVIDERS.some(({ url }) => - c.props['href'].startsWith(url) + c?.props?.href?.startsWith(url) ) ) { - const newProps = { ...(c.props || {}) } - newProps['data-href'] = newProps['href'] - newProps['href'] = undefined + const newProps = { + ...(c.props || {}), + 'data-href': c.props.href, + href: undefined, + } + + return React.cloneElement(c, newProps) + } else if (c?.props?.children) { + const newProps = { + ...(c.props || {}), + children: this.makeStylesheetInert(c.props.children), + } + return React.cloneElement(c, newProps) - } else if (c.props && c.props['children']) { - c.props['children'] = this.makeStylesheetInert(c.props['children']) } + return c - }) + }).filter(Boolean) } render() { diff --git a/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/_document.js b/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/_document.js new file mode 100644 index 0000000000000..34851fcae15cb --- /dev/null +++ b/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/_document.js @@ -0,0 +1,36 @@ +import Document, { Html, Head, Main, NextScript } from 'next/document' + +class MyDocument extends Document { + static async getInitialProps(ctx) { + const initialProps = await Document.getInitialProps(ctx) + return { ...initialProps } + } + + render() { + return ( + + + <> + {false && } + + + + + + +
+ + + + ) + } +} + +export default MyDocument diff --git a/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/index.js b/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/index.js new file mode 100644 index 0000000000000..136175234f558 --- /dev/null +++ b/test/integration/font-optimization/fixtures/make-stylesheet-inert-regression/pages/index.js @@ -0,0 +1,8 @@ +export default function Home() { + return ( +

+ Falsey values contained in an element contained in Head should not result + in an error! +

+ ) +} diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js index a4d6f216f65a3..f4a4bdd18c6b4 100644 --- a/test/integration/font-optimization/test/index.test.js +++ b/test/integration/font-optimization/test/index.test.js @@ -328,4 +328,10 @@ describe('Font Optimization', () => { const { code } = await nextBuild(appDir) expect(code).toBe(0) }) + + test('makeStylesheetInert regression', async () => { + const appDir = join(fixturesDir, 'make-stylesheet-inert-regression') + const { code } = await nextBuild(appDir) + expect(code).toBe(0) + }) })