diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts index f964f17022f7..5f588d8c8c2c 100644 --- 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 index 45a0de5c8bb4..405d25b227cf 100644 --- 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 = {};"