AMP compatibility for Font optimization (#16208)
- Upgrades cssnano to 1.2.0 - Only removes whitespaces from downloaded font declarations - Disables Font optimization for AMP pages
This commit is contained in:
parent
3f35b47344
commit
6c9dd6c3d4
9 changed files with 79 additions and 19 deletions
|
@ -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 {
|
||||
|
|
|
@ -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'] &&
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
module.exports = { target: 'serverless', experimental: { optimizeFonts: true } }
|
9
test/integration/font-optimization/pages/amp.js
Normal file
9
test/integration/font-optimization/pages/amp.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
import React from 'react'
|
||||
|
||||
const Page = () => {
|
||||
return <div>Hi!</div>
|
||||
}
|
||||
|
||||
export const config = { amp: true }
|
||||
|
||||
export default Page
|
|
@ -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', () => {
|
||||
|
|
|
@ -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}"
|
||||
}
|
||||
]
|
18
yarn.lock
18
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:
|
||||
|
|
Loading…
Reference in a new issue