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 { - 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/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, 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/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/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/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/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
Hi!
+} + +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 d1aa9fd66af5c..47a792adbb7e4 100644 --- a/test/integration/font-optimization/test/index.test.js +++ b/test/integration/font-optimization/test/index.test.js @@ -73,6 +73,35 @@ function runTests() { /