Merge branch 'canary' into reduce-swc-size-glibc-musl

kodiakhq[bot] · web-flow · commit e271a6333476 · 2022-01-03T20:43:40.000Z
diff --git 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
@@ -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 (
+      <Html>
+        <Head>
+          <>
+            {false && <script data-href="test"></script>}
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link
+              rel="preconnect"
+              href="https://fonts.gstatic.com"
+              crossOrigin
+            />
+            <link
+              href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
+              rel="stylesheet"
+            />
+          </>
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+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
@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <h1>
+      Falsey values contained in an element contained in Head should not result
+      in an error!
+    </h1>
+  )
+}
diff --git 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)
+  })
 })
