feat: Next 13 global fonts #2313
Conversation
lucasfp13
requested review from
eduardoformiga and
lariciamota
and removed request for
a team
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
There was a problem hiding this comment.
good job! I left some comments along with the review.
I think we should create new tasks in our backlog to deal in the future with overriding fonts, also 1 documentation task with the recommended way to use fonts (new way), maybe indicating to use something like:
--fs-text-face-body: var(--fs-font-inter)or
font-family: var(--fs-font-inter)As we change the swc/babel/plugin configs. It would also be good to test the API extension with the version of this PR (I will do that).
packages/core/app/layout.tsx
Outdated
| * Later when overriding fonts we should use the font variable in CSS files | ||
| * https://nextjs.org/docs/app/api-reference/components/font#css-variables |
lucasfp13
force-pushed
the
feat/SFS-763-use-next-font
branch
from
8aa67a9 to
e08dfcd
Compare
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
There was a problem hiding this comment.
I tested it with the API extension + section overrides v2 and it works as expected.
faststore core version from
starter pr
commit with the version
vtex-sites/starter.store@a68d962
This reverts commit 1ca0ce0.
This PR intends to introduce `next/font` built-in feature to the project (`app` directory). The `babelrc.js` config file needed to be removed in favor of `next/font` usage, [it's mandatory](https://nextjs.org/docs/messages/babel-font-loader-conflict). Next.js requires the use of its own compiler (SWC) config, so for now we still don't have the necessary GraphQL Codegen plugin to replace the `@graphql-codegen/client-preset` being loaded in the Babel config file, as the existing one ([`@graphql-codegen/client-preset-swc-plugin`](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#swc-plugin)) has a bug that hasn't been solved yet (see [here](dotansimha/graphql-code-generator#9753) and [here](dotansimha/graphql-code-generator#9450). Also, right now we are just introducing the feature, but we will have to support local fonts and font override later in other tasks. - Run the local server (`yarn turbo run dev --filter=@faststore/core`); - Make sure that all the current pages are working as expected (`/`, `/office` and some `/<slug>/p`); - Make sure `/fs-next-update` is rendering with some text on the top of the page and without errors. - https://nextjs.org/blog/next-13#nextfont - https://nextjs.org/docs/app/api-reference/components/font#css-variables - https://nextjs.org/docs/app/building-your-application/optimizing/fonts
What's the purpose of this pull request?
This PR intends to introduce
next/fontbuilt-in feature to the project (appdirectory).The
babelrc.jsconfig file needed to be removed in favor ofnext/fontusage, it's mandatory. Next.js requires the use of its own compiler (SWC) config, so for now we still don't have the necessary GraphQL Codegen plugin to replace the@graphql-codegen/client-presetbeing loaded in the Babel config file, as the existing one (@graphql-codegen/client-preset-swc-plugin) has a bug that hasn't been solved yet (see here and here.Also, right now we are just introducing the feature, but we will have to support local fonts and font override later in other tasks.
How to test it?
yarn turbo run dev --filter=@faststore/core);/,/officeand some/<slug>/p);/fs-next-updateis rendering with some text on the top of the page and without errors.References