From d0653544eb16df4c36b6767fd0ce21194499a561 Mon Sep 17 00:00:00 2001 From: Devin Wall Date: Wed, 1 Dec 2021 19:48:59 -0700 Subject: [PATCH 1/4] Fixing log import. Fixing makeStylesheetInert. --- packages/next/build/swc/index.js | 2 +- packages/next/pages/_document.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/next/build/swc/index.js b/packages/next/build/swc/index.js index 975490a4c5e8a..dfd49f745d90d 100644 --- a/packages/next/build/swc/index.js +++ b/packages/next/build/swc/index.js @@ -1,6 +1,6 @@ import { platform, arch } from 'os' import { platformArchTriples } from '@napi-rs/triples' -import Log from '../output/log' +import * as Log from '../output/log' const ArchName = arch() const PlatformName = platform() diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx index cac934af2801b..6b0b808b94cb7 100644 --- a/packages/next/pages/_document.tsx +++ b/packages/next/pages/_document.tsx @@ -452,17 +452,17 @@ 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 return React.cloneElement(c, newProps) - } else if (c.props && c.props['children']) { + } else if (c?.props?.['children']) { c.props['children'] = this.makeStylesheetInert(c.props['children']) } return c From ba53e83279a2b09af39c3a742a9145205428d17b Mon Sep 17 00:00:00 2001 From: Devin Wall Date: Wed, 1 Dec 2021 20:39:27 -0700 Subject: [PATCH 2/4] Adding .? to props for consistency. --- packages/next/pages/_document.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx index 6b0b808b94cb7..edcdf146f0493 100644 --- a/packages/next/pages/_document.tsx +++ b/packages/next/pages/_document.tsx @@ -453,9 +453,9 @@ export class Head extends Component< return React.Children.map(node, (c: any) => { if ( c?.type === 'link' && - c?.props['href'] && + c?.props?.['href'] && OPTIMIZED_FONT_PROVIDERS.some(({ url }) => - c?.props['href'].startsWith(url) + c?.props?.['href'].startsWith(url) ) ) { const newProps = { ...(c.props || {}) } From d75f533bf7762f7ff200d8084b3fec17f51c9a8a Mon Sep 17 00:00:00 2001 From: Devin Wall Date: Thu, 2 Dec 2021 03:38:27 -0700 Subject: [PATCH 3/4] makeStylesheetInert no longer modifies children nodes directly. --- packages/next/pages/_document.tsx | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx index edcdf146f0493..fc778fbace846 100644 --- a/packages/next/pages/_document.tsx +++ b/packages/next/pages/_document.tsx @@ -453,20 +453,29 @@ export class Head extends Component< return React.Children.map(node, (c: any) => { if ( c?.type === 'link' && - c?.props?.['href'] && + 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?.['children']) { - c.props['children'] = this.makeStylesheetInert(c.props['children']) } + return c - }) + }).filter(Boolean) } render() { From 10389d3ade59b04901a896d5b832e32ef6bb5af1 Mon Sep 17 00:00:00 2001 From: Devin Wall Date: Sun, 19 Dec 2021 17:07:41 -0500 Subject: [PATCH 4/4] Adding regression test. --- .../pages/_document.js | 36 +++++++++++++++++++ .../pages/index.js | 8 +++++ .../font-optimization/test/index.test.js | 6 ++++ 3 files changed, 50 insertions(+) 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/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) + }) })