adds eslint rule to preconnect to Google fonts domain

errors/google-font-preconnect.md

@@ -0,0 +1,17 @@
+# Google Font Preconnect
+
+### Why This Error Occurred
+
+A preconnect resource hint was not used with a request to the Google Fonts domain. Adding `preconnect` is recommended to initiate an early connection to the origin.
+
+### Possible Ways to Fix It
+
+Add `rel="preconnect"` to the Google Font domain `<link>` tag:
+
+```jsx
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+```
+
+### Useful Links
+
+- [Preconnect to required origins](https://web.dev/uses-rel-preconnect/)

errors/manifest.json

@@ -110,6 +110,10 @@
           "title": "google-font-display",
           "path": "/errors/google-font-display.md"
         },
+        {
+          "title": "google-font-preconnect",
+          "path": "/errors/google-font-preconnect.md"
+        },
         {
           "title": "get-initial-props-as-an-instance-method",
           "path": "/errors/get-initial-props-as-an-instance-method.md"

packages/eslint-plugin-next/lib/index.js

@@ -6,6 +6,7 @@ module.exports = {
     'no-unwanted-polyfillio': require('./rules/no-unwanted-polyfillio'),
     'no-title-in-document-head': require('./rules/no-title-in-document-head'),
     'google-font-display': require('./rules/google-font-display'),
+    'google-font-preconnect': require('./rules/google-font-preconnect'),
   },
   configs: {
     recommended: {
@@ -17,6 +18,7 @@ module.exports = {
         '@next/next/no-unwanted-polyfillio': 1,
         '@next/next/no-title-in-document-head': 1,
         '@next/next/google-font-display': 1,
+        '@next/next/google-font-preconnect': 1,
       },
     },
   },

packages/eslint-plugin-next/lib/rules/google-font-preconnect.js

@@ -0,0 +1,40 @@
+const NodeAttributes = require('../utils/nodeAttributes.js')
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Ensure preconnect is used with Google Fonts',
+      recommended: true,
+    },
+  },
+  create: function (context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.name !== 'link') {
+          return
+        }
+
+        const attributes = new NodeAttributes(node)
+        if (!attributes.has('href') || !attributes.hasValue('href')) {
+          return
+        }
+
+        const hrefValue = attributes.value('href')
+        const preconnectMissing =
+          !attributes.has('rel') ||
+          !attributes.hasValue('rel') ||
+          attributes.value('rel') !== 'preconnect'
+
+        if (
+          hrefValue.includes('https://fonts.gstatic.com') &&
+          preconnectMissing
+        ) {
+          context.report({
+            node,
+            message: `Preconnect is missing. See https://nextjs.org/docs/messages/google-font-preconnect.`,
+          })
+        }
+      },
+    }
+  },
+}

test/eslint-plugin-next/google-font-preconnect.unit.test.js

@@ -0,0 +1,60 @@
+const rule = require('@next/eslint-plugin-next/lib/rules/google-font-preconnect')
+const RuleTester = require('eslint').RuleTester
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true,
+      jsx: true,
+    },
+  },
+})
+
+var ruleTester = new RuleTester()
+ruleTester.run('google-font-preconnect', rule, {
+  valid: [
+    `export const Test = () => (
+        <div>
+          <link rel="preconnect" href="https://fonts.gstatic.com"/>
+        </div>
+      )
+    `,
+  ],
+
+  invalid: [
+    {
+      code: `
+      export const Test = () => (
+        <div>
+          <link href="https://fonts.gstatic.com"/>
+        </div>
+      )
+    `,
+      errors: [
+        {
+          message:
+            'Preconnect is missing. See https://nextjs.org/docs/messages/google-font-preconnect.',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: `
+      export const Test = () => (
+        <div>
+          <link rel="preload" href="https://fonts.gstatic.com"/>
+        </div>
+      )
+    `,
+      errors: [
+        {
+          message:
+            'Preconnect is missing. See https://nextjs.org/docs/messages/google-font-preconnect.',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+  ],
+})