Refactoring in @next/font

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

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
+            ),
           }),
         ],
       })

packages/next/build/webpack/config/blocks/css/loaders/font-loader.ts → 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

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,

packages/next/build/webpack/loaders/next-font-loader/postcss-font-loader.ts → 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