From c74abef79dbd3c053164ca5fe6bbe75a11bebad2 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Mon, 9 Oct 2023 02:14:03 +0900 Subject: [PATCH 1/3] fix: pass when callee.name equals local.name --- code/frameworks/nextjs/src/font/babel/helpers.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts index f964f17022f..8b027ae2cd4 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; From 83c5b0016fdd745eae77bebd6a138ece54a4ff02 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Mon, 9 Oct 2023 02:16:10 +0900 Subject: [PATCH 2/3] fix: use imported.name as a functionName --- code/frameworks/nextjs/src/font/babel/helpers.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts index 8b027ae2cd4..5f588d8c8c2 100644 --- a/code/frameworks/nextjs/src/font/babel/helpers.ts +++ b/code/frameworks/nextjs/src/font/babel/helpers.ts @@ -314,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); From c30406738d35e17d259981d6cd1455b38000ed08 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Mon, 9 Oct 2023 02:22:06 +0900 Subject: [PATCH 3/3] feat: update test of TransformFontImports --- .../frameworks/nextjs/src/font/babel/index.test.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/font/babel/index.test.ts b/code/frameworks/nextjs/src/font/babel/index.test.ts index 45a0de5c8bb..405d25b227c 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 = {};"