Current eslint rule no-page-custom-font can't handle functional _document #29970
Description
What version of Next.js are you using?
11.1.1
What version of Node.js are you using?
14.18.0
What browser are you using?
Chrome
What operating system are you using?
macOS
How are you deploying your application?
next start
Describe the Bug
Assuming #28515 will warrant us the ability to write custom _document in functional way, the current implementation of eslint rule no-page-custom-font needs to be refactored. It seems like it is currently done via checking whether the stylesheet <link> is in a Document class or not.
next.js/packages/eslint-plugin-next/lib/rules/no-page-custom-font.js
Lines 30 to 32 in 701fa99
So, for a document like this
import {Head, Html, Main, NextScript} from 'next/document'
const Document = () => (
<Html>
<Head>
<link
href='https://fonts.googleapis.com/css2?family=Inter&display=optional'
rel='stylesheet'
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
export default Documentnext lint will wrongly yield a warning like this
./pages/_document.tsx
6:7 Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See https://nextjs.org/docs/messages/no-page-custom-font. @next/next/no-page-custom-fontExpected Behavior
next lint to not wrongly yield the warning for the functional _document.
To Reproduce
- Use a typical class
Documentwith a google font<link>embedded. - Run
next lintand witness there's no warning. - Switch the document to a functional one.
- Run
next lintagain and there should be a warning as aforementioned.