From edabb95f3aa9d9d6b666b30d6046de51d20458cf Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Sat, 4 Apr 2020 14:36:29 -0700
Subject: [PATCH 01/15] Updating native-url version

---
 packages/next/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/package.json b/packages/next/package.json
index a72c2e1e6af4bc7..3f0e8fd3f508ca1 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -83,7 +83,7 @@
     "jest-worker": "24.9.0",
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "0.8.0",
-    "native-url": "0.2.6",
+    "native-url": "0.3.0",
     "pnp-webpack-plugin": "1.5.0",
     "postcss": "7.0.27",
     "prop-types": "15.7.2",

From c1470991c1efb7b995961e0d743d6029768ade6a Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Sat, 4 Apr 2020 17:32:37 -0700
Subject: [PATCH 02/15] Bump version

---
 packages/next/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/package.json b/packages/next/package.json
index 3f0e8fd3f508ca1..8cb0f1dd11d3dd2 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -83,7 +83,7 @@
     "jest-worker": "24.9.0",
     "loader-utils": "2.0.0",
     "mini-css-extract-plugin": "0.8.0",
-    "native-url": "0.3.0",
+    "native-url": "0.3.1",
     "pnp-webpack-plugin": "1.5.0",
     "postcss": "7.0.27",
     "prop-types": "15.7.2",

From 0aa63a4c1b79e206fcb5a72fb0fb9c8a97855854 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Mon, 24 Aug 2020 18:47:41 -0700
Subject: [PATCH 03/15] Setup CSS optimization. Experimental inlining critical
 css

---
 packages/next/build/webpack-config.ts         |  3 ++
 packages/next/export/index.ts                 |  1 +
 packages/next/export/worker.ts                |  9 +++++
 packages/next/next-server/server/config.ts    |  1 +
 .../next/next-server/server/next-server.ts    |  5 +++
 packages/next/next-server/server/render.tsx   | 39 ++++++++++++++-----
 packages/next/pages/_document.tsx             | 39 ++++++++++++-------
 7 files changed, 72 insertions(+), 25 deletions(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index acfece465c8b5c1..3f0deda84bd90b1 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -947,6 +947,9 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_OPTIMIZE_IMAGES': JSON.stringify(
           config.experimental.optimizeImages
         ),
+        'process.env.__NEXT_OPTIMIZE_CSS': JSON.stringify(
+          config.experimental.optimizeCss && !dev
+        ),
         'process.env.__NEXT_SCROLL_RESTORATION': JSON.stringify(
           config.experimental.scrollRestoration
         ),
diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
index fcd2edfc1edaecf..ec789ce230a93a4 100644
--- a/packages/next/export/index.ts
+++ b/packages/next/export/index.ts
@@ -408,6 +408,7 @@ export default async function exportApp(
         serverless: isTargetLikeServerless(nextConfig.target),
         optimizeFonts: nextConfig.experimental.optimizeFonts,
         optimizeImages: nextConfig.experimental.optimizeImages,
+        optimizeCss: nextConfig.experimental.optimizeCss,
       })
 
       for (const validation of result.ampValidations || []) {
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index eb8734f07119ffe..0c2e5b402db0745 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -48,6 +48,7 @@ interface ExportPageInput {
   serverless: boolean
   optimizeFonts: boolean
   optimizeImages: boolean
+  optimizeCss: boolean
 }
 
 interface ExportPageResults {
@@ -66,6 +67,7 @@ interface RenderOpts {
   inAmpMode?: boolean
   optimizeFonts?: boolean
   optimizeImages?: boolean
+  optimizeCss?: boolean
   fontManifest?: FontManifest
 }
 
@@ -87,6 +89,7 @@ export default async function exportPage({
   serverless,
   optimizeFonts,
   optimizeImages,
+  optimizeCss,
 }: ExportPageInput): Promise<ExportPageResults> {
   let results: ExportPageResults = {
     ampValidations: [],
@@ -226,6 +229,8 @@ export default async function exportPage({
             optimizeFonts,
             /// @ts-ignore
             optimizeImages,
+            /// @ts-ignore
+            optimizeCss,
             fontManifest: optimizeFonts
               ? requireFontManifest(distDir, serverless)
               : null,
@@ -276,6 +281,9 @@ export default async function exportPage({
         if (optimizeImages) {
           process.env.__NEXT_OPTIMIZE_IMAGES = JSON.stringify(true)
         }
+        if (optimizeCss) {
+          process.env.__NEXT_OPTIMIZE_CSS = JSON.stringify(true)
+        }
         curRenderOpts = {
           ...components,
           ...renderOpts,
@@ -283,6 +291,7 @@ export default async function exportPage({
           params,
           optimizeFonts,
           optimizeImages,
+          optimizeCss,
           fontManifest: optimizeFonts
             ? requireFontManifest(distDir, serverless)
             : null,
diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts
index c9eefdca419a663..c723aa2dab9c057 100644
--- a/packages/next/next-server/server/config.ts
+++ b/packages/next/next-server/server/config.ts
@@ -53,6 +53,7 @@ const defaultConfig: { [key: string]: any } = {
     productionBrowserSourceMaps: false,
     optimizeFonts: false,
     optimizeImages: false,
+    optimizeCss: false,
     scrollRestoration: false,
     unstable_webpack5cache: false,
   },
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index 195931dfd871bf3..57b5276d28227ad 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -123,6 +123,7 @@ export default class Server {
     optimizeFonts: boolean
     fontManifest: FontManifest
     optimizeImages: boolean
+    optimizeCss: boolean
   }
   private compression?: Middleware
   private onErrorMiddleware?: ({ err }: { err: Error }) => Promise<void>
@@ -175,6 +176,7 @@ export default class Server {
           ? requireFontManifest(this.distDir, this._isLikeServerless)
           : null,
       optimizeImages: this.nextConfig.experimental.optimizeImages,
+      optimizeCss: this.nextConfig.experimental.optimizeCss,
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side
@@ -242,6 +244,9 @@ export default class Server {
     if (this.renderOpts.optimizeImages) {
       process.env.__NEXT_OPTIMIZE_IMAGES = JSON.stringify(true)
     }
+    if (this.renderOpts.optimizeCss) {
+      process.env.__NEXT_OPTIMIZE_CSS = JSON.stringify(true)
+    }
   }
 
   protected currentPhase(): string {
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 661d5a9d03acb49..09f9f3e0629b12d 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -2,6 +2,7 @@ import { IncomingMessage, ServerResponse } from 'http'
 import { ParsedUrlQuery } from 'querystring'
 import React from 'react'
 import { renderToStaticMarkup, renderToString } from 'react-dom/server'
+import Critters from 'critters'
 import { UnwrapPromise } from '../../lib/coalesced-function'
 import {
   GSP_NO_RETURNED_VALUE,
@@ -149,6 +150,7 @@ export type RenderOptsPartial = {
   optimizeFonts: boolean
   fontManifest?: FontManifest
   optimizeImages: boolean
+  optimizeCss: boolean
   devOnlyCacheBusterQueryString?: string
 }
 
@@ -186,6 +188,7 @@ function renderDocument(
     appGip,
     unstable_runtimeJS,
     devOnlyCacheBusterQueryString,
+    optimizeCss,
   }: RenderOpts & {
     props: any
     docProps: DocumentInitialProps
@@ -237,6 +240,7 @@ function renderDocument(
           canonicalBase,
           ampPath,
           inAmpMode,
+          optimizeCss,
           isDevelopment: !!dev,
           hybridAmp,
           dynamicImports,
@@ -802,16 +806,31 @@ export async function renderToHTML(
     }
   }
 
-  html = await postProcess(
-    html,
-    {
-      getFontDefinition,
-    },
-    {
-      optimizeFonts: renderOpts.optimizeFonts,
-      optimizeImages: renderOpts.optimizeImages,
-    }
-  )
+  if (renderOpts.optimizeFonts || renderOpts.optimizeImages) {
+    html = await postProcess(
+      html,
+      {
+        getFontDefinition,
+      },
+      {
+        optimizeFonts: renderOpts.optimizeFonts,
+        optimizeImages: renderOpts.optimizeImages,
+      }
+    )
+  }
+
+  if (renderOpts.optimizeCss) {
+    const cssOptimizer = new Critters({
+      ssrMode: true,
+      reduceInlineStyles: false,
+      path: renderOpts.distDir,
+      publicPath: '/_next/',
+      preload: 'media',
+      fonts: false,
+    })
+
+    html = await cssOptimizer.process(html)
+  }
 
   if (inAmpMode || hybridAmp) {
     // fix &amp being escaped for amphtml rel link
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 96b16f7385b1230..d6519cbc55a0e2c 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -151,7 +151,10 @@ export class Head extends Component<
 
   context!: React.ContextType<typeof DocumentComponentContext>
 
-  getCssLinks(files: DocumentFiles): JSX.Element[] | null {
+  getCssLinks(
+    files: DocumentFiles,
+    optimizeCss: Boolean
+  ): JSX.Element[] | null {
     const { assetPrefix, devOnlyCacheBusterQueryString } = this.context
     const cssFiles = files.allFiles.filter((f) => f.endsWith('.css'))
     const sharedFiles = new Set(files.sharedFiles)
@@ -160,19 +163,24 @@ export class Head extends Component<
     cssFiles.forEach((file) => {
       const isSharedFile = sharedFiles.has(file)
 
+      if (!optimizeCss) {
+        cssLinkElements.push(
+          <link
+            key={`${file}-preload`}
+            nonce={this.props.nonce}
+            rel="preload"
+            href={`${assetPrefix}/_next/${encodeURI(
+              file
+            )}${devOnlyCacheBusterQueryString}`}
+            as="style"
+            crossOrigin={
+              this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
+            }
+          />
+        )
+      }
+
       cssLinkElements.push(
-        <link
-          key={`${file}-preload`}
-          nonce={this.props.nonce}
-          rel="preload"
-          href={`${assetPrefix}/_next/${encodeURI(
-            file
-          )}${devOnlyCacheBusterQueryString}`}
-          as="style"
-          crossOrigin={
-            this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-          }
-        />,
         <link
           key={file}
           nonce={this.props.nonce}
@@ -285,6 +293,7 @@ export class Head extends Component<
       dangerousAsPath,
       headTags,
       unstable_runtimeJS,
+      optimizeCss,
     } = this.context
     const disableRuntimeJS = unstable_runtimeJS === false
 
@@ -481,8 +490,8 @@ export class Head extends Component<
               />
             )}
             {process.env.__NEXT_OPTIMIZE_FONTS
-              ? this.makeStylesheetInert(this.getCssLinks(files))
-              : this.getCssLinks(files)}
+              ? this.makeStylesheetInert(this.getCssLinks(files, optimizeCss))
+              : this.getCssLinks(files, optimizeCss)}
             {!disableRuntimeJS && this.getPreloadDynamicChunks()}
             {!disableRuntimeJS && this.getPreloadMainLinks(files)}
             {this.context.isDevelopment && (

From 90f475dd249adbf937650bf5afc6af6d178effa6 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Tue, 29 Sep 2020 15:46:39 -0700
Subject: [PATCH 04/15] Critical CSS setup

---
 packages/next/next-server/server/render.tsx |  3 +-
 packages/next/package.json                  |  1 +
 packages/next/pages/_document.tsx           | 12 ++--
 yarn.lock                                   | 71 ++++++++++++++++++++-
 4 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 5d42314904af950..13b7b4c395a07ca 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -158,6 +158,7 @@ export type RenderOptsPartial = {
   devOnlyCacheBusterQueryString?: string
   resolvedUrl?: string
   resolvedAsPath?: string
+  distDir?: string
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial
@@ -195,7 +196,6 @@ function renderDocument(
     appGip,
     unstable_runtimeJS,
     devOnlyCacheBusterQueryString,
-    optimizeCss,
   }: RenderOpts & {
     props: any
     docComponentsRendered: DocumentProps['docComponentsRendered']
@@ -265,7 +265,6 @@ function renderDocument(
           canonicalBase,
           ampPath,
           inAmpMode,
-          optimizeCss,
           isDevelopment: !!dev,
           hybridAmp,
           dynamicImports,
diff --git a/packages/next/package.json b/packages/next/package.json
index 0d1b9352b2ac8b1..cfde8e3a4b80d5d 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -88,6 +88,7 @@
     "cacache": "15.0.5",
     "caniuse-lite": "^1.0.30001113",
     "chokidar": "2.1.8",
+    "critters": "0.0.4",
     "crypto-browserify": "3.12.0",
     "css-loader": "4.3.0",
     "cssnano-simple": "1.2.0",
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 2aeb684f8d32b1c..4103a3bf0fc711d 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -156,10 +156,7 @@ export class Head extends Component<
 
   context!: React.ContextType<typeof DocumentComponentContext>
 
-  getCssLinks(
-    files: DocumentFiles,
-    optimizeCss: Boolean
-  ): JSX.Element[] | null {
+  getCssLinks(files: DocumentFiles): JSX.Element[] | null {
     const {
       assetPrefix,
       devOnlyCacheBusterQueryString,
@@ -183,7 +180,7 @@ export class Head extends Component<
     cssFiles.forEach((file) => {
       const isSharedFile = sharedFiles.has(file)
 
-      if (!optimizeCss) {
+      if (!process.env.__NEXT_OPTIMIZE_CSS) {
         cssLinkElements.push(
           <link
             key={`${file}-preload`}
@@ -312,7 +309,6 @@ export class Head extends Component<
       dangerousAsPath,
       headTags,
       unstable_runtimeJS,
-      optimizeCss,
     } = this.context
     const disableRuntimeJS = unstable_runtimeJS === false
 
@@ -507,8 +503,8 @@ export class Head extends Component<
               />
             )}
             {process.env.__NEXT_OPTIMIZE_FONTS
-              ? this.makeStylesheetInert(this.getCssLinks(files, optimizeCss))
-              : this.getCssLinks(files, optimizeCss)}
+              ? this.makeStylesheetInert(this.getCssLinks(files))
+              : this.getCssLinks(files)}
             <noscript data-n-css />
             {!disableRuntimeJS && this.getPreloadDynamicChunks()}
             {!disableRuntimeJS && this.getPreloadMainLinks(files)}
diff --git a/yarn.lock b/yarn.lock
index 30c492a6a51f73b..eafb989352d691d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5784,6 +5784,22 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+critters@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/critters/-/critters-0.0.4.tgz#f040765161fc529d1b46c53c97b95de6d995efa4"
+  integrity sha512-zK0VXKmG+b/EEDnfiIbpDSqVjY3+bDbqyIZSLG/LKUD6WkN+xaKRhLpraNs795fAts+bYe9+1tXNC9ShrGNDxA==
+  dependencies:
+    chalk "^4.1.0"
+    css "^3.0.0"
+    cssnano "^4.1.7"
+    minimatch "^3.0.4"
+    parse5 "^6.0.1"
+    parse5-htmlparser2-tree-adapter "^6.0.1"
+    postcss "^7.0.5"
+    pretty-bytes "^5.3.0"
+    webpack-log "^3.0.1"
+    webpack-sources "^1.3.0"
+
 cross-env@6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
@@ -6016,6 +6032,15 @@ css@^2.0.0:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
+css@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
+  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
+  dependencies:
+    inherits "^2.0.4"
+    source-map "^0.6.1"
+    source-map-resolve "^0.6.0"
+
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -10673,6 +10698,11 @@ log-update@^2.3.0:
     cli-cursor "^2.0.0"
     wrap-ansi "^3.0.1"
 
+loglevelnext@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/loglevelnext/-/loglevelnext-3.0.1.tgz#e3e4659c4061c09264f6812c33586dc55a009a04"
+  integrity sha512-JpjaJhIN1reaSb26SIxDGtE0uc67gPl19OMVHrr+Ggt6b/Vy60jmCtKgQBrygAH0bhRA2nkxgDvM+8QvR8r0YA==
+
 lolex@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.3.2.tgz#7c3da62ffcb30f0f5a80a2566ca24e45d8a01f31"
@@ -11364,6 +11394,11 @@ nanoid@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.0.3.tgz#dde999e173bc9d7bd2ee2746b89909ade98e075e"
 
+nanoid@^2.0.3:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
+  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -12339,6 +12374,13 @@ parse-url@^5.0.0:
     parse-path "^4.0.0"
     protocols "^1.4.0"
 
+parse5-htmlparser2-tree-adapter@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
+  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+  dependencies:
+    parse5 "^6.0.1"
+
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
@@ -12347,6 +12389,11 @@ parse5@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
 
+parse5@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
 parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -13546,6 +13593,11 @@ pretty-bytes@^3.0.0:
   dependencies:
     number-is-nan "^1.0.0"
 
+pretty-bytes@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
+  integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
+
 pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
@@ -15254,6 +15306,14 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
+source-map-resolve@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
+  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+
 source-map-support@^0.5.16:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -16832,7 +16892,16 @@ webpack-bundle-analyzer@3.6.1:
     opener "^1.5.1"
     ws "^6.0.0"
 
-webpack-sources@1.4.3, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
+webpack-log@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-3.0.1.tgz#647c42231b6f74d7cc3c3a66510370e635d066ea"
+  integrity sha512-mX/6BJPPpxco6BGCFZJ96NjgnwBrLQx6d7Kxe1PaJ7KvjI3LFmJK9QgRPCAr9tXrPVawPN1cuM8hJ2Vadnwm+Q==
+  dependencies:
+    chalk "^2.4.2"
+    loglevelnext "^3.0.1"
+    nanoid "^2.0.3"
+
+webpack-sources@1.4.3, webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   dependencies:

From 0361ac5b56f029d0178f9d69952580121d1362d0 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Fri, 9 Oct 2020 17:02:42 -0700
Subject: [PATCH 05/15] Enabling config override for critters. Updating
 critters

---
 packages/next/build/webpack-config.ts           | 2 +-
 packages/next/export/worker.ts                  | 4 ++--
 packages/next/next-server/server/next-server.ts | 2 +-
 packages/next/next-server/server/render.tsx     | 4 +++-
 packages/next/package.json                      | 2 +-
 packages/next/pages/_document.tsx               | 3 +++
 6 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 6e419460400d572..1ff99b14bc9f2f8 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -982,7 +982,7 @@ export default async function getBaseWebpackConfig(
           config.experimental.optimizeImages
         ),
         'process.env.__NEXT_OPTIMIZE_CSS': JSON.stringify(
-          config.experimental.optimizeCss && !dev
+          !!config.experimental.optimizeCss && !dev
         ),
         'process.env.__NEXT_SCROLL_RESTORATION': JSON.stringify(
           config.experimental.scrollRestoration
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 10d3538e6f5b722..5928e0c41fbef9d 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -49,7 +49,7 @@ interface ExportPageInput {
   serverless: boolean
   optimizeFonts: boolean
   optimizeImages: boolean
-  optimizeCss: boolean
+  optimizeCss: any
 }
 
 interface ExportPageResults {
@@ -68,7 +68,7 @@ interface RenderOpts {
   inAmpMode?: boolean
   optimizeFonts?: boolean
   optimizeImages?: boolean
-  optimizeCss?: boolean
+  optimizeCss?: any
   fontManifest?: FontManifest
   locales?: string[]
   locale?: string
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index c3beaf753ab9081..3386d90da091b2f 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -138,7 +138,7 @@ export default class Server {
     optimizeFonts: boolean
     fontManifest: FontManifest
     optimizeImages: boolean
-    optimizeCss: boolean
+    optimizeCss: any
     locale?: string
     locales?: string[]
     defaultLocale?: string
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 5a76179fee875de..d7411b8f9f7fb3b 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -163,7 +163,7 @@ export type RenderOptsPartial = {
   optimizeFonts: boolean
   fontManifest?: FontManifest
   optimizeImages: boolean
-  optimizeCss: boolean
+  optimizeCss: any
   devOnlyCacheBusterQueryString?: string
   resolvedUrl?: string
   resolvedAsPath?: string
@@ -988,6 +988,8 @@ export async function renderToHTML(
       publicPath: '/_next/',
       preload: 'media',
       fonts: false,
+      container: 'next-critical-css',
+      ...renderOpts.optimizeCss,
     })
 
     html = await cssOptimizer.process(html)
diff --git a/packages/next/package.json b/packages/next/package.json
index 2f75b57b140e613..6f28fdc81af1f54 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -89,7 +89,7 @@
     "cacache": "15.0.5",
     "caniuse-lite": "^1.0.30001113",
     "chokidar": "2.1.8",
-    "critters": "0.0.4",
+    "critters": "0.0.5",
     "crypto-browserify": "3.12.0",
     "css-loader": "4.3.0",
     "cssnano-simple": "1.2.0",
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 4928333f3fa9049..3f11680d56548c7 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -515,6 +515,9 @@ export class Head extends Component<
               // (by default, style-loader injects at the bottom of <head />)
               <noscript id="__next_css__DO_NOT_USE__" />
             )}
+            {process.env.__NEXT_OPTIMIZE_CSS ? (
+              <style id="next-critical-css"></style>
+            ) : null}
             {styles || null}
           </>
         )}

From 205cf6207c4b515a5a1211830d5d4e42b63e0cd1 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Fri, 9 Oct 2020 17:43:41 -0700
Subject: [PATCH 06/15] Update critical css position

---
 packages/next/next-server/server/render.tsx |  1 -
 packages/next/pages/_document.tsx           | 18 ++++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index d7411b8f9f7fb3b..7ab6c40884802ce 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -988,7 +988,6 @@ export async function renderToHTML(
       publicPath: '/_next/',
       preload: 'media',
       fonts: false,
-      container: 'next-critical-css',
       ...renderOpts.optimizeCss,
     })
 
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 3f11680d56548c7..cce093072c25471 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -177,7 +177,7 @@ export class Head extends Component<
       cssFiles.push(...dynamicCssFiles)
     }
 
-    const cssLinkElements: JSX.Element[] = []
+    let cssLinkElements: JSX.Element[] = []
     cssFiles.forEach((file) => {
       const isSharedFile = sharedFiles.has(file)
 
@@ -214,6 +214,11 @@ export class Head extends Component<
         />
       )
     })
+
+    if (process.env.__NEXT_OPTIMIZE_FONTS) {
+      cssLinkElements = this.makeStylesheetInert(cssLinkElements)
+    }
+
     return cssLinkElements.length === 0 ? null : cssLinkElements
   }
 
@@ -503,21 +508,18 @@ export class Head extends Component<
                 href={canonicalBase + getAmpPath(ampPath, dangerousAsPath)}
               />
             )}
-            {process.env.__NEXT_OPTIMIZE_FONTS
-              ? this.makeStylesheetInert(this.getCssLinks(files))
-              : this.getCssLinks(files)}
-            <noscript data-n-css />
+            {!process.env.__NEXT_OPTIMIZE_CSS && this.getCssLinks(files)}
+            {!process.env.__NEXT_OPTIMIZE_CSS && <noscript data-n-css />}
             {!disableRuntimeJS && this.getPreloadDynamicChunks()}
             {!disableRuntimeJS && this.getPreloadMainLinks(files)}
+            {process.env.__NEXT_OPTIMIZE_CSS && this.getCssLinks(files)}
+            {process.env.__NEXT_OPTIMIZE_CSS && <noscript data-n-css />}
             {this.context.isDevelopment && (
               // this element is used to mount development styles so the
               // ordering matches production
               // (by default, style-loader injects at the bottom of <head />)
               <noscript id="__next_css__DO_NOT_USE__" />
             )}
-            {process.env.__NEXT_OPTIMIZE_CSS ? (
-              <style id="next-critical-css"></style>
-            ) : null}
             {styles || null}
           </>
         )}

From 3387a7bf618614c4ae952ceae71d060b87a55959 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Fri, 9 Oct 2020 20:33:04 -0700
Subject: [PATCH 07/15] Fix lint error

---
 packages/next/pages/_document.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index cce093072c25471..cec5a1d772eea0a 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component, ReactNode, useContext } from 'react'
+import React, { Component, ReactElement, ReactNode, useContext } from 'react'
 import flush from 'styled-jsx/server'
 import {
   AMP_RENDER_TARGET,
@@ -216,7 +216,9 @@ export class Head extends Component<
     })
 
     if (process.env.__NEXT_OPTIMIZE_FONTS) {
-      cssLinkElements = this.makeStylesheetInert(cssLinkElements)
+      cssLinkElements = this.makeStylesheetInert(
+        cssLinkElements
+      ) as ReactElement[]
     }
 
     return cssLinkElements.length === 0 ? null : cssLinkElements
@@ -286,7 +288,7 @@ export class Head extends Component<
         ))
   }
 
-  makeStylesheetInert(node: ReactNode): ReactNode {
+  makeStylesheetInert(node: ReactNode): ReactNode[] {
     return React.Children.map(node, (c: any) => {
       if (
         c.type === 'link' &&

From fa951989ddd701415d2c8fd0672f020051c91aaf Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Wed, 14 Oct 2020 18:29:46 -0700
Subject: [PATCH 08/15] Update critters version 0.0.6 reduced the install size

---
 packages/next/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/package.json b/packages/next/package.json
index 53a44be35f2b49f..48370488864ffbd 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -89,7 +89,7 @@
     "cacache": "15.0.5",
     "caniuse-lite": "^1.0.30001113",
     "chokidar": "2.1.8",
-    "critters": "0.0.5",
+    "critters": "0.0.6",
     "crypto-browserify": "3.12.0",
     "css-loader": "4.3.0",
     "cssnano-simple": "1.2.0",

From 95521ee73b3f0448602c2b00806f0c29a581653c Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Tue, 10 Nov 2020 12:45:38 -0800
Subject: [PATCH 09/15] Removing critters as a dependency

---
 packages/next/next-server/server/render.tsx |  2 +-
 packages/next/package.json                  |  1 -
 yarn.lock                                   | 45 ---------------------
 3 files changed, 1 insertion(+), 47 deletions(-)

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index cf17a78103136c1..7a56754ff2c9730 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -2,7 +2,6 @@ import { IncomingMessage, ServerResponse } from 'http'
 import { ParsedUrlQuery } from 'querystring'
 import React from 'react'
 import { renderToStaticMarkup, renderToString } from 'react-dom/server'
-import Critters from 'critters'
 import { warn } from '../../build/output/log'
 import { UnwrapPromise } from '../../lib/coalesced-function'
 import {
@@ -1044,6 +1043,7 @@ export async function renderToHTML(
   }
 
   if (renderOpts.optimizeCss) {
+    const Critters = require('critters')
     const cssOptimizer = new Critters({
       ssrMode: true,
       reduceInlineStyles: false,
diff --git a/packages/next/package.json b/packages/next/package.json
index bf8cdc41720d039..5d6e77f0cfc627d 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -75,7 +75,6 @@
     "caniuse-lite": "^1.0.30001113",
     "chalk": "2.4.2",
     "chokidar": "3.4.2",
-    "critters": "0.0.6",
     "crypto-browserify": "3.12.0",
     "css-loader": "4.3.0",
     "cssnano-simple": "1.2.1",
diff --git a/yarn.lock b/yarn.lock
index b9df42b7bb3ab38..5d63b33171ffe6b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5376,17 +5376,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-critters@0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/critters/-/critters-0.0.6.tgz#b71384113d8b5f5c82f3aeba80c122437f195d8c"
-  integrity sha512-NUB3Om7tkf+XWi9+2kJ2A3l4/tHORDI1UT+nHxUqay2B/tJvMpiXcklDDLBH3fPn9Pe23uu0we/08Ukjy4cLCQ==
-  dependencies:
-    chalk "^4.1.0"
-    css "^3.0.0"
-    parse5 "^6.0.1"
-    parse5-htmlparser2-tree-adapter "^6.0.1"
-    pretty-bytes "^5.3.0"
-
 cross-env@6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
@@ -5619,15 +5608,6 @@ css@^2.0.0:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -11980,13 +11960,6 @@ parse-url@^5.0.0:
     parse-path "^4.0.0"
     protocols "^1.4.0"
 
-parse5-htmlparser2-tree-adapter@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
-  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
-  dependencies:
-    parse5 "^6.0.1"
-
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
@@ -11995,11 +11968,6 @@ parse5@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
 
-parse5@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
-  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
-
 parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -13246,11 +13214,6 @@ pretty-bytes@^3.0.0:
   dependencies:
     number-is-nan "^1.0.0"
 
-pretty-bytes@^5.3.0:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
-  integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
-
 pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
@@ -14980,14 +14943,6 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
 source-map-support@^0.5.16:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"

From 389980dbf2b3032f8e95ea1eed14b563111c4a62 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Wed, 18 Nov 2020 11:22:28 -0800
Subject: [PATCH 10/15] Fix merging

---
 packages/next/pages/_document.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 65cb6757dc8150b..3dce13bb522fab5 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -512,7 +512,9 @@ export class Head extends Component<
             {!disableRuntimeJS && this.getPreloadDynamicChunks()}
             {!disableRuntimeJS && this.getPreloadMainLinks(files)}
             {process.env.__NEXT_OPTIMIZE_CSS && this.getCssLinks(files)}
-            {process.env.__NEXT_OPTIMIZE_CSS && <noscript data-n-css />}
+            {process.env.__NEXT_OPTIMIZE_CSS && (
+              <noscript data-n-css={this.props.nonce ?? ''} />
+            )}
             {this.context.isDevelopment && (
               // this element is used to mount development styles so the
               // ordering matches production

From a1470bc8719546592853e81c43a1cb585a2439b5 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Wed, 18 Nov 2020 13:30:16 -0800
Subject: [PATCH 11/15] Adding critter to top level dependency

---
 package.json |  1 +
 yarn.lock    | 45 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/package.json b/package.json
index 955b1c0d1589b50..0ace040b458fad4 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "cookie": "0.4.1",
     "cors": "2.8.5",
     "coveralls": "3.0.3",
+    "critters": "0.0.6",
     "cross-env": "6.0.3",
     "cross-spawn": "6.0.5",
     "escape-string-regexp": "2.0.0",
diff --git a/yarn.lock b/yarn.lock
index 5dfff92352bcb47..30cf1378d2da8ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5359,6 +5359,17 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+critters@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/critters/-/critters-0.0.6.tgz#b71384113d8b5f5c82f3aeba80c122437f195d8c"
+  integrity sha512-NUB3Om7tkf+XWi9+2kJ2A3l4/tHORDI1UT+nHxUqay2B/tJvMpiXcklDDLBH3fPn9Pe23uu0we/08Ukjy4cLCQ==
+  dependencies:
+    chalk "^4.1.0"
+    css "^3.0.0"
+    parse5 "^6.0.1"
+    parse5-htmlparser2-tree-adapter "^6.0.1"
+    pretty-bytes "^5.3.0"
+
 cross-env@6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941"
@@ -5593,6 +5604,15 @@ css@^2.0.0:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
+css@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
+  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
+  dependencies:
+    inherits "^2.0.4"
+    source-map "^0.6.1"
+    source-map-resolve "^0.6.0"
+
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -11922,6 +11942,13 @@ parse-url@^5.0.0:
     parse-path "^4.0.0"
     protocols "^1.4.0"
 
+parse5-htmlparser2-tree-adapter@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
+  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+  dependencies:
+    parse5 "^6.0.1"
+
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
@@ -11930,6 +11957,11 @@ parse5@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
 
+parse5@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
 parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -13186,6 +13218,11 @@ pretty-bytes@^3.0.0:
   dependencies:
     number-is-nan "^1.0.0"
 
+pretty-bytes@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
+  integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
+
 pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
@@ -14923,6 +14960,14 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
+source-map-resolve@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
+  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+
 source-map-support@^0.5.16:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"

From 04aa9d241b3c80adb9093db58445909e37aac7c9 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Wed, 18 Nov 2020 13:52:40 -0800
Subject: [PATCH 12/15] Fixing lint

---
 packages/next/next-server/server/render.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 13186ebdf791008..e823fc71363be55 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -1051,6 +1051,7 @@ export async function renderToHTML(
   }
 
   if (renderOpts.optimizeCss) {
+    // eslint-disable-next-line import/no-extraneous-dependencies
     const Critters = require('critters')
     const cssOptimizer = new Critters({
       ssrMode: true,

From d3054ea4dab529d09420151f14f7d70efe2aa15b Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Wed, 18 Nov 2020 16:41:40 -0600
Subject: [PATCH 13/15] Mark package as external when not used

---
 packages/next/build/webpack-config.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 003b2b279f5f6bf..855e69cccd12137 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -728,6 +728,10 @@ export default async function getBaseWebpackConfig(
           // When the 'serverless' target is used all node_modules will be compiled into the output bundles
           // So that the 'serverless' bundles have 0 runtime dependencies
           '@ampproject/toolbox-optimizer', // except this one
+
+          // Mark this as external if not enabled so it doesn't cause a
+          // webpack error from being missing
+          ...(config.experimental.optimizeCss ? [] : ['critters']),
         ],
     optimization: {
       // Webpack 5 uses a new property for the same functionality

From 1aafd1a34351401848c386ab144528ffefce0761 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Thu, 19 Nov 2020 14:54:59 -0800
Subject: [PATCH 14/15] Fix failing test case

---
 packages/next/next-server/server/render.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index e823fc71363be55..ae0f573653685c4 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -1037,7 +1037,8 @@ export async function renderToHTML(
     }
   }
 
-  if (renderOpts.optimizeFonts || renderOpts.optimizeImages) {
+  // Avoid postProcess if both flags are false
+  if (process.env.__NEXT_OPTIMIZE_FONTS || process.env.__NEXT_OPTIMIZE_IMAGES) {
     html = await postProcess(
       html,
       {

From 03ca0c2dacc420edd1d8a3507bf861f8656d5217 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph James <janicklas@google.com>
Date: Fri, 22 Jan 2021 21:39:04 -0800
Subject: [PATCH 15/15] Fix bug for serverless. Adding tests

---
 packages/next/export/worker.ts                |  1 +
 test/integration/critical-css/pages/_app.js   |  6 ++
 test/integration/critical-css/pages/index.js  |  9 +++
 .../critical-css/styles/index.module.css      | 15 +++++
 .../critical-css/styles/styles.css            | 11 +++
 .../critical-css/test/index.test.js           | 67 +++++++++++++++++++
 6 files changed, 109 insertions(+)
 create mode 100644 test/integration/critical-css/pages/_app.js
 create mode 100644 test/integration/critical-css/pages/index.js
 create mode 100644 test/integration/critical-css/styles/index.module.css
 create mode 100644 test/integration/critical-css/styles/styles.css
 create mode 100644 test/integration/critical-css/test/index.test.js

diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index c50547bc142ba1f..01e17ade7900661 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -273,6 +273,7 @@ export default async function exportPage({
                   optimizeImages,
                   /// @ts-ignore
                   optimizeCss,
+                  distDir,
                   fontManifest: optimizeFonts
                     ? requireFontManifest(distDir, serverless)
                     : null,
diff --git a/test/integration/critical-css/pages/_app.js b/test/integration/critical-css/pages/_app.js
new file mode 100644
index 000000000000000..770c366c0c3a8f5
--- /dev/null
+++ b/test/integration/critical-css/pages/_app.js
@@ -0,0 +1,6 @@
+import '../styles/styles.css'
+
+// This default export is required in a new `pages/_app.js` file.
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
diff --git a/test/integration/critical-css/pages/index.js b/test/integration/critical-css/pages/index.js
new file mode 100644
index 000000000000000..d3eeb9f702094ee
--- /dev/null
+++ b/test/integration/critical-css/pages/index.js
@@ -0,0 +1,9 @@
+import styles from '../styles/index.module.css'
+
+export default function Home() {
+  return (
+    <div className={styles.hello}>
+      <p>Hello World</p>
+    </div>
+  )
+}
diff --git a/test/integration/critical-css/styles/index.module.css b/test/integration/critical-css/styles/index.module.css
new file mode 100644
index 000000000000000..54230488810a0bd
--- /dev/null
+++ b/test/integration/critical-css/styles/index.module.css
@@ -0,0 +1,15 @@
+.hello {
+  font: 15px Helvetica, Arial, sans-serif;
+  background: #eee;
+  padding: 100px;
+  text-align: center;
+  transition: 100ms ease-in background;
+}
+
+.hello:hover {
+  background: #ccc;
+}
+
+.extra-style1 {
+  background: #000;
+}
diff --git a/test/integration/critical-css/styles/styles.css b/test/integration/critical-css/styles/styles.css
new file mode 100644
index 000000000000000..54176d5d1954a1e
--- /dev/null
+++ b/test/integration/critical-css/styles/styles.css
@@ -0,0 +1,11 @@
+body {
+  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
+    'Arial', sans-serif;
+  padding: 20px 20px 60px;
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.extra-style {
+  font-size: 200%;
+}
diff --git a/test/integration/critical-css/test/index.test.js b/test/integration/critical-css/test/index.test.js
new file mode 100644
index 000000000000000..bf99ee1b7f998a4
--- /dev/null
+++ b/test/integration/critical-css/test/index.test.js
@@ -0,0 +1,67 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import {
+  killApp,
+  findPort,
+  nextStart,
+  nextBuild,
+  renderViaHTTP,
+} from 'next-test-utils'
+import fs from 'fs-extra'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '../')
+const nextConfig = join(appDir, 'next.config.js')
+let appPort
+let app
+
+function runTests() {
+  it('should inline critical CSS', async () => {
+    const html = await renderViaHTTP(appPort, '/index')
+    expect(html).toMatch(
+      /<link rel="stylesheet" href="\/_next\/static\/css\/.*\.css" .*>/
+    )
+    expect(html).toMatch(/body{font-family:SF Pro Text/)
+  })
+
+  it('should not inline non-critical css', async () => {
+    const html = await renderViaHTTP(appPort, '/index')
+    expect(html).not.toMatch(/.extra-style/)
+  })
+}
+
+describe('CSS optimization for SSR apps', () => {
+  beforeAll(async () => {
+    await fs.writeFile(
+      nextConfig,
+      `module.exports = { experimental: {optimizeCss: true} }`,
+      'utf8'
+    )
+
+    if (fs.pathExistsSync(join(appDir, '.next'))) {
+      await fs.remove(join(appDir, '.next'))
+    }
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(() => killApp(app))
+  runTests()
+})
+
+describe('CSS optimization for serverless apps', () => {
+  beforeAll(async () => {
+    await fs.writeFile(
+      nextConfig,
+      `module.exports = { target: 'serverless', experimental: {optimizeCss: true} }`,
+      'utf8'
+    )
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(() => killApp(app))
+  runTests()
+})