From 88eb0fe77f8dad9eb0874c5ebd33a5e9eac808b3 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 12 Aug 2020 09:55:57 -0700
Subject: [PATCH 1/4] fixing css minification

---
 .../font-stylesheet-gathering-plugin.ts       | 21 +++++++++++++------
 .../font-optimization/next.config.js          |  1 -
 .../font-optimization/test/index.test.js      | 21 +++++++++++++++++++
 .../test/manifest-snapshot.json               | 14 +++++++++++++
 4 files changed, 50 insertions(+), 7 deletions(-)
 delete mode 100644 test/integration/font-optimization/next.config.js
 create mode 100644 test/integration/font-optimization/test/manifest-snapshot.json

diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index 1a25c61f37dca..2101c313adf86 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -7,17 +7,26 @@ import {
 } from '../../../next-server/server/font-utils'
 // @ts-ignore
 import BasicEvaluatedExpression from 'webpack/lib/BasicEvaluatedExpression'
-import { process as minify } from 'cssnano-simple'
+import postcss from 'postcss'
+import minifier from 'cssnano-simple'
 import { OPTIMIZED_FONT_PROVIDERS } from '../../../next-server/lib/constants'
 
 const isWebpack5 = parseInt(webpack.version!) === 5
 
 async function minifyCss(css: string): Promise<string> {
-  return new Promise((resolve) => {
-    minify(css, { map: false }).then((res) => {
-      resolve(res.css)
-    })
-  })
+  return new Promise((resolve) =>
+    postcss([
+      minifier({
+        excludeAll: true,
+        discardComments: true,
+        normalizeWhitespace: { exclude: false },
+      }),
+    ])
+      .process(css, { from: undefined })
+      .then((res) => {
+        resolve(res.css)
+      })
+  )
 }
 
 export class FontStylesheetGatheringPlugin {
diff --git a/test/integration/font-optimization/next.config.js b/test/integration/font-optimization/next.config.js
deleted file mode 100644
index 98699f91d5c7b..0000000000000
--- a/test/integration/font-optimization/next.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = { target: 'serverless', experimental: { optimizeFonts: true } }
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index d1aa9fd66af5c..b5046b55eb992 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -73,6 +73,27 @@ function runTests() {
       /<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Roboto:wght@700">.*<\/style>/
     )
   })
+
+  it('should minify the css', async () => {
+    const snapshotJson = JSON.parse(
+      await fs.readFile(join(__dirname, 'manifest-snapshot.json'), {
+        encoding: 'utf-8',
+      })
+    )
+    const testJson = JSON.parse(
+      await fs.readFile(builtPage('font-manifest.json'), { encoding: 'utf-8' })
+    )
+    const testCss = {}
+    testJson.forEach((fontDefinition) => {
+      testCss[fontDefinition.url] = fontDefinition.content
+    })
+    const snapshotCss = {}
+    snapshotJson.forEach((fontDefinition) => {
+      snapshotCss[fontDefinition.url] = fontDefinition.content
+    })
+
+    expect(testCss).toStrictEqual(snapshotCss)
+  })
 }
 
 describe('Font optimization for SSR apps', () => {
diff --git a/test/integration/font-optimization/test/manifest-snapshot.json b/test/integration/font-optimization/test/manifest-snapshot.json
new file mode 100644
index 0000000000000..bea870522f8a9
--- /dev/null
+++ b/test/integration/font-optimization/test/manifest-snapshot.json
@@ -0,0 +1,14 @@
+[
+  {
+    "url": "https://fonts.googleapis.com/css2?family=Modak",
+    "content": "@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEsnME.woff) format('woff')}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMB-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF6,U+1CF8-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FB}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMO-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMA-hR77LKV.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}"
+  },
+  {
+    "url": "https://fonts.googleapis.com/css?family=Voces",
+    "content": "@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}"
+  },
+  {
+    "url": "https://fonts.googleapis.com/css2?family=Roboto:wght@700",
+    "content": "@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}"
+  }
+]

From 82425194df7aced0e0e6600c0eacd0ac0487cd01 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 12 Aug 2020 16:23:56 -0700
Subject: [PATCH 2/4] skipping optimizatioons in AMP

---
 packages/next/next-server/lib/head.tsx                | 2 +-
 packages/next/pages/_document.tsx                     | 2 +-
 test/integration/font-optimization/pages/amp.js       | 9 +++++++++
 test/integration/font-optimization/test/index.test.js | 8 ++++++++
 4 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 test/integration/font-optimization/pages/amp.js

diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index 0161711ccbc6b..c10e61b5e614b 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -136,7 +136,7 @@ function reduceComponents(
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
-      if (process.env.__NEXT_OPTIMIZE_FONTS) {
+      if (process.env.__NEXT_OPTIMIZE_FONTS && !props.inAmpMode) {
         if (
           c.type === 'link' &&
           c.props['href'] &&
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 992bd85e8499f..f17d8aa3ba360 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -291,7 +291,7 @@ export class Head extends Component<
         )
     }
 
-    if (process.env.__NEXT_OPTIMIZE_FONTS) {
+    if (process.env.__NEXT_OPTIMIZE_FONTS && !inAmpMode) {
       children = this.makeStylesheetInert(children)
     }
 
diff --git a/test/integration/font-optimization/pages/amp.js b/test/integration/font-optimization/pages/amp.js
new file mode 100644
index 0000000000000..53ac86b915b16
--- /dev/null
+++ b/test/integration/font-optimization/pages/amp.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Page = () => {
+  return <div>Hi!</div>
+}
+
+export const config = { amp: true }
+
+export default Page
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index b5046b55eb992..211f02ddbe73a 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -74,6 +74,14 @@ function runTests() {
     )
   })
 
+  it('should skip this optimization forr AMP pages', async () => {
+    const html = await renderViaHTTP(appPort, '/amp')
+    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
+    expect(html).toContain(
+      '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Voces">'
+    )
+  })
+
   it('should minify the css', async () => {
     const snapshotJson = JSON.parse(
       await fs.readFile(join(__dirname, 'manifest-snapshot.json'), {

From 2a7524afa7fbae109574962a13236426e916e68a Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Sat, 15 Aug 2020 13:26:59 +0200
Subject: [PATCH 3/4] Update
 test/integration/font-optimization/test/index.test.js

---
 test/integration/font-optimization/test/index.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 211f02ddbe73a..47a792adbb7e4 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -74,7 +74,7 @@ function runTests() {
     )
   })
 
-  it('should skip this optimization forr AMP pages', async () => {
+  it('should skip this optimization for AMP pages', async () => {
     const html = await renderViaHTTP(appPort, '/amp')
     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
     expect(html).toContain(

From f75407da1dc356a9c972888a7f5f6d8af24ef598 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Mon, 17 Aug 2020 09:27:20 -0700
Subject: [PATCH 4/4] upgrading cssnano

---
 packages/next/package.json |  2 +-
 yarn.lock                  | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/next/package.json b/packages/next/package.json
index a4ac9896cef84..657f47f790159 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -89,7 +89,7 @@
     "chokidar": "2.1.8",
     "crypto-browserify": "3.12.0",
     "css-loader": "3.5.3",
-    "cssnano-simple": "1.0.7",
+    "cssnano-simple": "1.2.0",
     "find-cache-dir": "3.3.1",
     "jest-worker": "24.9.0",
     "loader-utils": "2.0.0",
diff --git a/yarn.lock b/yarn.lock
index 4e2c259981d24..cfea0c633ac05 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6488,10 +6488,10 @@ cssnano-preset-simple@1.1.4:
   dependencies:
     postcss "^7.0.32"
 
-cssnano-preset-simple@1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-1.1.7.tgz#38378118f156b3f4bf85c38a0b2fd06a1bdc7228"
-  integrity sha512-GVOJVQ1l5KI5sRaM9HOXCwYn78dmsLYoyJTYJcORhl9Tz44xDlP8Al6EvBdFIOvH6+wZlHcsMftlh1pwswuLeA==
+cssnano-preset-simple@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-1.2.0.tgz#afcf13eb076e8ebd91c4f311cd449781c14c7371"
+  integrity sha512-zojGlY+KasFeQT/SnD/WqYXHcKddz2XHRDtIwxrWpGqGHp5IyLWsWFS3UW7pOf3AWvfkpYSRdxOSlYuJPz8j8g==
   dependencies:
     caniuse-lite "^1.0.30001093"
     postcss "^7.0.32"
@@ -6504,12 +6504,12 @@ cssnano-simple@1.0.5:
     cssnano-preset-simple "1.1.4"
     postcss "^7.0.32"
 
-cssnano-simple@1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-1.0.7.tgz#a812571ee6ae25817434d4b926d5e83ea4b0e7dd"
-  integrity sha512-jjmSazE36Bl77zBcNQ9efcUdxQevKkrqkE5FqgHbcb3GQASnWrOU3PLF+DR3c7lDZxi1vtLvuJMtfL5QLkCGdw==
+cssnano-simple@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-1.2.0.tgz#b8cc5f52c2a52e6513b4636d0da165ec9d48d327"
+  integrity sha512-pton9cZ70/wOCWMAbEGHO1ACsW1KggTB6Ikj7k71uOEsz6SfByH++86+WAmXjRSc9q/g9gxkpFP9bDX9vRotdA==
   dependencies:
-    cssnano-preset-simple "1.1.7"
+    cssnano-preset-simple "1.2.0"
     postcss "^7.0.32"
 
 cssnano-util-get-arguments@^4.0.0: