Local font family name

packages/font/src/local/loader.ts

@@ -53,13 +53,13 @@ function getDistanceFromNormalWeight(weight?: string) {
 
 const fetchFonts: FontLoader = async ({
   functionName,
+  variableName,
   data,
   emitFontFile,
   resolve,
   fs,
 }) => {
   const {
-    family,
     src,
     display,
     fallback,
@@ -88,7 +88,7 @@ const fetchFonts: FontLoader = async ({
         ...(declarations
           ? declarations.map(({ prop, value }) => [prop, value])
           : []),
-        ['font-family', `'${fontMetadata?.familyName ?? family}'`],
+        ['font-family', variableName],
         ['src', `url(${fontUrl}) format('${format}')`],
         ['font-display', display],
         ...(weight ?? defaultWeight

packages/font/src/local/utils.ts

@@ -12,7 +12,6 @@ const extToFormat = {
 }
 
 type FontOptions = {
-  family: string
   src: Array<{
     path: string
     weight?: string
@@ -65,15 +64,11 @@ export function validateData(functionName: string, fontData: any): FontOptions {
     }
   }
 
-  let family: string | undefined
   src = src.map((fontFile: any) => {
     const ext = /\.(woff|woff2|eot|ttf|otf)$/.exec(fontFile.path)?.[1]
     if (!ext) {
       throw new Error(`Unexpected file \`${fontFile.path}\``)
     }
-    if (!family) {
-      family = /(.*\/)?(.+?)\.(woff|woff2|eot|ttf|otf)$/.exec(fontFile.path)![2]
-    }
 
     return {
       ...fontFile,
@@ -99,7 +94,6 @@ export function validateData(functionName: string, fontData: any): FontOptions {
   }
 
   return {
-    family: family!,
     src,
     display,
     weight,

packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs

@@ -11,7 +11,11 @@ pub struct FontImportsGenerator<'a> {
 }
 
 impl<'a> FontImportsGenerator<'a> {
-    fn check_call_expr(&mut self, call_expr: &CallExpr) -> Option<ImportDecl> {
+    fn check_call_expr(
+        &mut self,
+        call_expr: &CallExpr,
+        variable_name: &Result<Ident, &Pat>,
+    ) -> Option<ImportDecl> {
         if let Callee::Expr(callee_expr) = &call_expr.callee {
             if let Expr::Ident(ident) = &**callee_expr {
                 if let Some(font_function) = self.state.font_functions.get(&ident.to_id()) {
@@ -48,6 +52,12 @@ impl<'a> FontImportsGenerator<'a> {
                         query_json_values
                             .insert(String::from("import"), Value::String(function_name));
                         query_json_values.insert(String::from("arguments"), Value::Array(json));
+                        if let Ok(ident) = variable_name {
+                            query_json_values.insert(
+                                String::from("variableName"),
+                                Value::String(ident.sym.to_string()),
+                            );
+                        }
 
                         let query_json = Value::Object(query_json_values);
 
@@ -81,7 +91,7 @@ impl<'a> FontImportsGenerator<'a> {
             };
             if let Some(expr) = &decl.init {
                 if let Expr::Call(call_expr) = &**expr {
-                    let import_decl = self.check_call_expr(call_expr);
+                    let import_decl = self.check_call_expr(call_expr, &ident);
 
                     if let Some(mut import_decl) = import_decl {
                         match var_decl.kind {

packages/next-swc/crates/core/tests/errors/next-font-loaders/export-let/output.js

@@ -1,5 +1,5 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}';
 import React from 'react';
 export { firaCode };
 export { inter };

packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js

@@ -1,4 +1,4 @@
-import inter1 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}]}';
-import inter2 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}]}';
+import inter1 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}],"variableName":"inter1"}';
+import inter2 from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"400"}],"variableName":"inter2"}';
 var i = 10;
 var i2 = 20;

packages/next-swc/crates/core/tests/errors/next-font-loaders/options-object/output.js

@@ -1,7 +1,7 @@
-import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}';
-import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}';
-import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}';
-import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}]}';
+import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}';
+import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}';
+import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}';
+import a from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"ABeeZee","arguments":[{}],"variableName":"a"}';
 const a = fn({
     10: 'hello'
 });

packages/next-swc/crates/core/tests/errors/next-font-loaders/spread-arg/output.js

@@ -1,2 +1,2 @@
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{},[]]}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{},[]],"variableName":"inter"}';
 const a = fn(...{}, ...[]);

packages/next-swc/crates/core/tests/fixture/next-font-loaders/default-import/output.js

@@ -1 +1 @@
-import font from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"","arguments":[{"prop":true}]}';
+import font from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"","arguments":[{"prop":true}],"variableName":"font"}';

packages/next-swc/crates/core/tests/fixture/next-font-loaders/export-const/output.js

@@ -1,5 +1,5 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}';
 import React from 'react';
 export { firaCode };
 export { inter };

packages/next-swc/crates/core/tests/fixture/next-font-loaders/exports/output.js

@@ -1,5 +1,5 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Abel","arguments":[],"variableName":"firaCode"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[],"variableName":"inter"}';
 import React from 'react';
 export { firaCode };
 export default inter;

packages/next-swc/crates/core/tests/fixture/next-font-loaders/font-options/output.js

@@ -1,3 +1,3 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui",{"key":false},[]],"preload":true,"key":{"key2":{}}}]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui",{"key":false},[]],"preload":true,"key":{"key2":{}}}],"variableName":"firaCode"}';
 import React from 'react';
 console.log(firaCode);

packages/next-swc/crates/core/tests/fixture/next-font-loaders/import-as/output.js

@@ -1,2 +1,2 @@
-import acme1 from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Acme","arguments":[{"variant":"400"}]}';
+import acme1 from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Acme","arguments":[{"variant":"400"}],"variableName":"acme1"}';
 import React from 'react';

packages/next-swc/crates/core/tests/fixture/next-font-loaders/many-args/output.js

@@ -1 +1 @@
-import geo from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Geo","arguments":["test",[1.0],{"a":2.0},3.0]}';
+import geo from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Geo","arguments":["test",[1.0],{"a":2.0},3.0],"variableName":"geo"}';

packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-calls/output.js

@@ -1,3 +1,3 @@
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}]}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}';
 import React from 'react';

packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-font-downloaders/output.js

@@ -1,3 +1,3 @@
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}]}';
-import fira from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}]}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}],"variableName":"inter"}';
+import fira from 'cool-fonts/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}],"variableName":"fira"}';
 import React from 'react';

packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-fonts/output.js

@@ -1,3 +1,3 @@
-import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui"]}]}';
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}]}';
+import firaCode from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","fallback":["system-ui"]}],"variableName":"firaCode"}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900","display":"swap"}],"variableName":"inter"}';
 import React from 'react';

packages/next-swc/crates/core/tests/fixture/next-font-loaders/multiple-imports/output.js

@@ -1,3 +1,3 @@
-import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}]}';
-import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}]}';
+import inter from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Inter","arguments":[{"variant":"900"}],"variableName":"inter"}';
+import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[{"variant":"400","display":"swap"}],"variableName":"fira"}';
 import React from 'react';

packages/next-swc/crates/core/tests/fixture/next-font-loaders/no-args/output.js

@@ -1 +1 @@
-import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[]}';
+import fira from '@next/font/google/target.css?{"path":"pages/test.tsx","import":"Fira_Code","arguments":[],"variableName":"fira"}';

packages/next/build/webpack/loaders/next-font-loader/index.ts

@@ -57,6 +57,7 @@ export default async function nextFontLoader(this: any) {
       path: relativeFilePathFromRoot,
       import: functionName,
       arguments: data,
+      variableName,
     } = JSON.parse(this.resourceQuery.slice(1))
 
     try {
@@ -67,6 +68,7 @@ export default async function nextFontLoader(this: any) {
       let { css, fallbackFonts, adjustFontFallback, weight, style, variable } =
         await fontLoader({
           functionName,
+          variableName,
           data,
           config: fontLoaderOptions,
           emitFontFile,

packages/next/font/index.d.ts

@@ -14,6 +14,7 @@ export type AdjustFontFallback = {
 
 export type FontLoader = (options: {
   functionName: string
+  variableName: string
   data: any[]
   config: any
   emitFontFile: (content: Buffer, ext: string, preload: boolean) => string