AMP compatibility for Font optimization (vercel#16208)

- Upgrades cssnano to 1.2.0
- Only removes whitespaces from downloaded font declarations
- Disables Font optimization for AMP pages

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 {

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'] &&

packages/next/package.json

@@ -90,7 +90,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",

packages/next/pages/_document.tsx

@@ -316,7 +316,7 @@ export class Head extends Component<
         )
     }
 
-    if (process.env.__NEXT_OPTIMIZE_FONTS) {
+    if (process.env.__NEXT_OPTIMIZE_FONTS && !inAmpMode) {
       children = this.makeStylesheetInert(children)
     }
 

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

test/integration/font-optimization/test/index.test.js

@@ -73,6 +73,35 @@ function runTests() {
       /<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Roboto:wght@700">.*<\/style>/
     )
   })
+
+  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(
+      '<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'), {
+        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', () => {

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}"
+  }
+]

yarn.lock

@@ -6488,10 +6488,10 @@ [email protected]:
   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 @@ [email protected]:
     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: