Only required polyfill.io lint rule

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

@@ -3,6 +3,7 @@ module.exports = {
     'no-css-tags': require('./rules/no-css-tags'),
     'no-sync-scripts': require('./rules/no-sync-scripts'),
     'no-html-link-for-pages': require('./rules/no-html-link-for-pages'),
+    'no-unwanted-polyfillio': require('./rules/no-unwanted-polyfillio'),
   },
   configs: {
     recommended: {
@@ -11,6 +12,7 @@ module.exports = {
         '@next/next/no-css-tags': 1,
         '@next/next/no-sync-scripts': 1,
         '@next/next/no-html-link-for-pages': 1,
+        '@next/next/no-unwanted-polyfillio': 1,
       },
     },
   },

packages/eslint-plugin-next/lib/rules/no-unwanted-polyfillio.js

@@ -0,0 +1,107 @@
+const NEXT_POLYFILLED_FEATURES = [
+  'Array.prototype.@@iterator',
+  'Array.prototype.copyWithin',
+  'Array.prototype.fill',
+  'Array.prototype.find',
+  'Array.prototype.findIndex',
+  'Array.prototype.flatMap',
+  'Array.prototype.flat',
+  'Array.from',
+  'Array.prototype.includes',
+  'Array.of',
+  'Function.prototype.name',
+  'fetch',
+  'Map',
+  'Number.EPSILON',
+  'Number.Epsilon',
+  'Number.isFinite',
+  'Number.isNaN',
+  'Number.isInteger',
+  'Number.isSafeInteger',
+  'Number.MAX_SAFE_INTEGER',
+  'Number.MIN_SAFE_INTEGER',
+  'Object.entries',
+  'Object.getOwnPropertyDescriptor',
+  'Object.getOwnPropertyDescriptors',
+  'Object.is',
+  'Object.keys',
+  'Object.values',
+  'Reflect',
+  'Set',
+  'Symbol',
+  'Symbol.asyncIterator',
+  'String.prototype.codePointAt',
+  'String.prototype.endsWith',
+  'String.fromCodePoint',
+  'String.prototype.includes',
+  'String.prototype.@@iterator',
+  'String.prototype.padEnd',
+  'String.prototype.padStart',
+  'String.prototype.repeat',
+  'String.raw',
+  'String.prototype.startsWith',
+  'String.prototype.trimEnd',
+  'String.prototype.trimStart',
+  'String.prototype.trim',
+  'URL',
+  'URLSearchParams',
+  'WeakMap',
+  'WeakSet',
+  'Promise',
+  'Promise.prototype.finally',
+  'es2015', // Should be covered by babel-preset-env instead.
+  'es2016', // Should be covered by babel-preset-env instead.
+  'es2017', // Should be covered by babel-preset-env instead.
+  'es2018', // Should be covered by babel-preset-env instead.
+  'es2019', // Should be covered by babel-preset-env instead.
+  'es5', // Should be covered by babel-preset-env instead.
+  'es6', // Should be covered by babel-preset-env instead.
+  'es7', // Should be covered by babel-preset-env instead.
+]
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+module.exports = {
+  meta: {
+    docs: {
+      description:
+        'Prohibit unwanted features to be listed in Polyfill.io tag.',
+      category: 'HTML',
+      recommended: true,
+    },
+    fixable: null, // or "code" or "whitespace"
+  },
+
+  create: function (context) {
+    return {
+      'JSXOpeningElement[name.name=script][attributes.length>0]'(node) {
+        const srcNode = node.attributes.find(
+          (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'src'
+        )
+        if (!srcNode || srcNode.value.type !== 'Literal') {
+          return
+        }
+        const src = srcNode.value.value
+        if (
+          src.startsWith('https://cdn.polyfill.io/v2/') ||
+          src.startsWith('https://polyfill.io/v3/')
+        ) {
+          const featureQueryString = new URL(src).searchParams.get('features')
+          const featuresRequested = (featureQueryString || '').split(',')
+          const unwantedFeatures = featuresRequested.filter((feature) =>
+            NEXT_POLYFILLED_FEATURES.includes(feature)
+          )
+          if (unwantedFeatures.length > 0) {
+            context.report({
+              node,
+              message: `You're requesting polyfills from polyfill.io which are already shipped with NextJS. Please remove ${unwantedFeatures.join(
+                ', '
+              )} from the features list.`,
+            })
+          }
+        }
+      },
+    }
+  },
+}

test/eslint-plugin-next/no-unwanted-polyfillio.test.js

@@ -0,0 +1,88 @@
+const rule = require('@next/eslint-plugin-next/lib/rules/no-unwanted-polyfillio')
+
+const RuleTester = require('eslint').RuleTester
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true,
+      jsx: true,
+    },
+  },
+})
+
+var ruleTester = new RuleTester()
+ruleTester.run('unwanted-polyfillsio', rule, {
+  valid: [
+    `import {Head} from 'next/document';
+
+      export class Blah extends Head {
+        render() {
+          return (
+            <div>
+              <h1>Hello title</h1>
+              <script src='https://polyfill.io/v3/polyfill.min.js?features=AbortController'></script>
+            </div>
+          );
+        }
+    }`,
+    `import {Head} from 'next/document';
+
+      export class Blah extends Head {
+        render() {
+          return (
+            <div>
+              <h1>Hello title</h1>
+              <script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver'></script>
+            </div>
+          );
+        }
+    }`,
+  ],
+
+  invalid: [
+    {
+      code: `import {Head} from 'next/document';
+
+      export class Blah extends Head {
+        render() {
+          return (
+            <div>
+              <h1>Hello title</h1>
+              <script src='https://polyfill.io/v3/polyfill.min.js?features=WeakSet%2CPromise%2CPromise.prototype.finally%2Ces2015%2Ces5%2Ces6'></script>
+            </div>
+          );
+        }
+    }`,
+      errors: [
+        {
+          message:
+            "You're requesting polyfills from polyfill.io which are already shipped with NextJS. Please remove WeakSet, Promise, Promise.prototype.finally, es2015, es5, es6 from the features list.",
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: `
+      export class Blah {
+        render() {
+          return (
+            <div>
+              <h1>Hello title</h1>
+              <script src='https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.copyWithin'></script>
+            </div>
+          );
+        }
+    }`,
+      errors: [
+        {
+          message:
+            "You're requesting polyfills from polyfill.io which are already shipped with NextJS. Please remove Array.prototype.copyWithin from the features list.",
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+  ],
+})