From df8dde7731643617fff9bd83100742c84e0b9f1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Thu, 8 Dec 2022 21:43:11 +0100 Subject: [PATCH] Refactoring in @next/font (#43848) Some refactoring, renaming and fixed comments in @next/font ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) --- packages/font/src/google/loader.ts | 31 +++++++++---------- .../build/webpack/config/blocks/css/index.ts | 9 ++++-- .../loaders/{font-loader.ts => next-font.ts} | 2 +- .../webpack/loaders/next-font-loader/index.ts | 4 +-- ...ss-font-loader.ts => postcss-next-font.ts} | 11 ++++--- 5 files changed, 29 insertions(+), 28 deletions(-) rename packages/next/build/webpack/config/blocks/css/loaders/{font-loader.ts => next-font.ts} (98%) rename packages/next/build/webpack/loaders/next-font-loader/{postcss-font-loader.ts => postcss-next-font.ts} (96%) diff --git a/packages/font/src/google/loader.ts b/packages/font/src/google/loader.ts index 757b7c8a39d6270..90e4fb29ed4dcb1 100644 --- a/packages/font/src/google/loader.ts +++ b/packages/font/src/google/loader.ts @@ -5,7 +5,6 @@ import { calculateSizeAdjustValues } from 'next/dist/server/font-utils' import * as Log from 'next/dist/build/output/log' // @ts-ignore import chalk from 'next/dist/compiled/chalk' -// @ts-ignore import { fetchCSSFromGoogleFonts, fetchFontFile, @@ -94,6 +93,17 @@ const downloadGoogleFonts: FontLoader = async ({ } } + const result = { + fallbackFonts: fallback, + weight: + weights.length === 1 && weights[0] !== 'variable' + ? weights[0] + : undefined, + style: styles.length === 1 ? styles[0] : undefined, + variable, + adjustFontFallback: adjustFontFallbackMetrics, + } + try { const hasCachedCSS = cssCache.has(url) let fontFaceDeclarations = hasCachedCSS @@ -156,7 +166,7 @@ const downloadGoogleFonts: FontLoader = async ({ } const ext = /\.(woff|woff2|eot|ttf|otf)$/.exec(googleFontFileUrl)![1] - // Emit font file to .next/static/fonts + // Emit font file to .next/static/media const selfHostedFileUrl = emitFontFile( fontFileBuffer, ext, @@ -180,15 +190,8 @@ const downloadGoogleFonts: FontLoader = async ({ } return { + ...result, css: updatedCssResponse, - fallbackFonts: fallback, - weight: - weights.length === 1 && weights[0] !== 'variable' - ? weights[0] - : undefined, - style: styles.length === 1 ? styles[0] : undefined, - variable, - adjustFontFallback: adjustFontFallbackMetrics, } } catch (err) { loaderContext.cacheable(false) @@ -213,14 +216,8 @@ const downloadGoogleFonts: FontLoader = async ({ css += '\n}' return { + ...result, css, - fallbackFonts: fallback, - weight: - weights.length === 1 && weights[0] !== 'variable' - ? weights[0] - : undefined, - style: styles.length === 1 ? styles[0] : undefined, - variable, } } else { throw err diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts index 546bcc265913708..f8e657101fe94c1 100644 --- a/packages/next/build/webpack/config/blocks/css/index.ts +++ b/packages/next/build/webpack/config/blocks/css/index.ts @@ -4,7 +4,7 @@ import { webpack } from 'next/dist/compiled/webpack/webpack' import { loader, plugin } from '../../helpers' import { ConfigurationContext, ConfigurationFn, pipe } from '../../utils' import { getCssModuleLoader, getGlobalCssLoader } from './loaders' -import { getFontLoader } from './loaders/font-loader' +import { getNextFontLoader } from './loaders/next-font' import { getCustomDocumentError, getGlobalImportError, @@ -188,7 +188,6 @@ export const css = curry(async function css( ]) : undefined - // Font loaders cannot be imported in _document. fontLoaders?.forEach(([fontLoaderPath, fontLoaderOptions]) => { // Matches the resolved font loaders noop files to run next-font-loader fns.push( @@ -197,7 +196,11 @@ export const css = curry(async function css( markRemovable({ sideEffects: false, test: fontLoaderPath, - use: getFontLoader(ctx, lazyPostCSSInitializer, fontLoaderOptions), + use: getNextFontLoader( + ctx, + lazyPostCSSInitializer, + fontLoaderOptions + ), }), ], }) diff --git a/packages/next/build/webpack/config/blocks/css/loaders/font-loader.ts b/packages/next/build/webpack/config/blocks/css/loaders/next-font.ts similarity index 98% rename from packages/next/build/webpack/config/blocks/css/loaders/font-loader.ts rename to packages/next/build/webpack/config/blocks/css/loaders/next-font.ts index 30be3b1cefa193d..67440b8c6625f9f 100644 --- a/packages/next/build/webpack/config/blocks/css/loaders/font-loader.ts +++ b/packages/next/build/webpack/config/blocks/css/loaders/next-font.ts @@ -3,7 +3,7 @@ import { ConfigurationContext } from '../../../utils' import { getClientStyleLoader } from './client' import { cssFileResolve } from './file-resolve' -export function getFontLoader( +export function getNextFontLoader( ctx: ConfigurationContext, postcss: any, fontLoaderOptions: any diff --git a/packages/next/build/webpack/loaders/next-font-loader/index.ts b/packages/next/build/webpack/loaders/next-font-loader/index.ts index 4dd139c522c72bb..868e71687b7a56b 100644 --- a/packages/next/build/webpack/loaders/next-font-loader/index.ts +++ b/packages/next/build/webpack/loaders/next-font-loader/index.ts @@ -4,7 +4,7 @@ import { promises as fs } from 'fs' import path from 'path' import chalk from 'next/dist/compiled/chalk' import loaderUtils from 'next/dist/compiled/loader-utils3' -import postcssFontLoaderPlugn from './postcss-font-loader' +import postcssNextFontPlugin from './postcss-next-font' import { promisify } from 'util' import { CONFIG_FILES } from '../../../../shared/lib/constants' @@ -110,7 +110,7 @@ export default async function nextFontLoader(this: any) { ) // Add CSS classes, exports and make the font-family localy scoped by turning it unguessable const result = await postcss( - postcssFontLoaderPlugn({ + postcssNextFontPlugin({ exports, fontFamilyHash, fallbackFonts, diff --git a/packages/next/build/webpack/loaders/next-font-loader/postcss-font-loader.ts b/packages/next/build/webpack/loaders/next-font-loader/postcss-next-font.ts similarity index 96% rename from packages/next/build/webpack/loaders/next-font-loader/postcss-font-loader.ts rename to packages/next/build/webpack/loaders/next-font-loader/postcss-next-font.ts index 03c53fcf7e4eb4b..abbffd0b4bf6f19 100644 --- a/packages/next/build/webpack/loaders/next-font-loader/postcss-font-loader.ts +++ b/packages/next/build/webpack/loaders/next-font-loader/postcss-next-font.ts @@ -1,7 +1,7 @@ import type { AdjustFontFallback } from '../../../../font' import postcss, { Declaration } from 'postcss' -const postcssFontLoaderPlugn = ({ +const postcssNextFontPlugin = ({ exports, fontFamilyHash, fallbackFonts = [], @@ -19,7 +19,7 @@ const postcssFontLoaderPlugn = ({ style?: string }) => { return { - postcssPlugin: 'postcss-font-loader', + postcssPlugin: 'postcss-next-font', Once(root: any) { let fontFamily: string | undefined @@ -32,7 +32,7 @@ const postcssFontLoaderPlugn = ({ return `'__${family.replace(/ /g, '_')}_${fontFamilyHash}'` } - // Hash font-family name + // Hash font-family names for (const node of root.nodes) { if (node.type === 'atrule' && node.name === 'font-face') { const familyNode = node.nodes.find( @@ -118,6 +118,7 @@ const postcssFontLoaderPlugn = ({ ...(adjustFontFallbackFamily ? [adjustFontFallbackFamily] : []), ...fallbackFonts, ].join(', ') + // Add class with family, weight and style const classRule = new postcss.Rule({ selector: '.className' }) classRule.nodes = [ @@ -171,6 +172,6 @@ const postcssFontLoaderPlugn = ({ } } -postcssFontLoaderPlugn.postcss = true +postcssNextFontPlugin.postcss = true -export default postcssFontLoaderPlugn +export default postcssNextFontPlugin