Merge pull request #24406 from yoshi2no/fix/rename-font-import/yoshi2no

Next.js: Support rename font import
storybookjs · Oct 9, 2023 · ccffdc3 · ccffdc3
2 parents 77d2da2 + c304067
commit ccffdc3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts
@@ -281,13 +281,16 @@ export function getVariableMetasBySpecifier(
         return undefined;
       }
 
+      if (!types.isIdentifier(declaration.init.callee)) {
+        return undefined;
+      }
+
       if (
-        (!types.isIdentifier(declaration.init.callee) ||
-          specifier.type !== 'ImportSpecifier' ||
+        (specifier.type !== 'ImportSpecifier' ||
           specifier.imported.type !== 'Identifier' ||
-          declaration.init.callee.name !== specifier.imported.name) &&
-        (!types.isIdentifier(declaration.init.callee) ||
-          specifier.type !== 'ImportDefaultSpecifier' ||
+          (declaration.init.callee.name !== specifier.imported.name &&
+            declaration.init.callee.name !== specifier.local.name)) &&
+        (specifier.type !== 'ImportDefaultSpecifier' ||
           declaration.init.callee.name !== specifier.local.name)
       ) {
         return undefined;
@@ -311,8 +314,15 @@ export function getVariableMetasBySpecifier(
 
       const identifierName = declaration.id.name;
       const properties = convertNodeToJSON(types, options);
-      const functionName = declaration.init.callee.name;
-
+      let functionName = declaration.init.callee.name;
+      if (
+        specifier.type === 'ImportSpecifier' &&
+        specifier.imported &&
+        specifier.imported.type === 'Identifier' &&
+        declaration.init.callee.name !== specifier.imported.name
+      ) {
+        functionName = specifier.imported.name;
+      }
       return { identifierName, properties, functionName };
     })
     .filter(isDefined);

diff --git a/code/frameworks/nextjs/src/font/babel/index.test.ts b/code/frameworks/nextjs/src/font/babel/index.test.ts
@@ -3,7 +3,7 @@ import { transform } from '@babel/core';
 import TransformFontImports from '.';
 
 const example = `
-import { Inter, Roboto } from 'next/font/google'
+import { Inter, Lora as FontLora, Roboto } from 'next/font/google'
 import localFont from 'next/font/local'
 
 const myFont = localFont({ src: './my-font.woff2' })
@@ -12,6 +12,10 @@ const roboto = Roboto({
   weight: '400',
 })
 
+const lora = FontLora({
+  weight: '400',
+})
+
 const inter = Inter({
   subsets: ['latin'],
 });
@@ -20,7 +24,7 @@ const randomObj = {}
 `;
 
 const exampleLegacy = `
-import { Inter, Roboto } from '@next/font/google'
+import { Inter, Lora as FontLora, Roboto } from '@next/font/google'
 import localFont from '@next/font/local'
 
 const myFont = localFont({ src: './my-font.woff2' })
@@ -29,6 +33,10 @@ const roboto = Roboto({
   weight: '400',
 })
 
+const lora = FontLora({
+  weight: '400',
+})
+
 const inter = Inter({
   subsets: ['latin'],
 });
@@ -40,6 +48,7 @@ it('should transform next/font AST properly', () => {
   const { code } = transform(example, { plugins: [TransformFontImports] })!;
   expect(code).toMatchInlineSnapshot(`
     "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\";
+    import lora from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Lora\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\";
     import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\";
     import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/local\\";
     const randomObj = {};"
@@ -50,6 +59,7 @@ it('should transform @next/font AST properly', () => {
   const { code } = transform(exampleLegacy, { plugins: [TransformFontImports] })!;
   expect(code).toMatchInlineSnapshot(`
     "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\";
+    import lora from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Lora\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\";
     import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\";
     import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/local\\";
     const randomObj = {};"