Experimental: New ESLint Plugin

packages/next-plugin-eslint/.eslintrc

@@ -0,0 +1,10 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+module.exports = {
+  rules: {
+    'no-css-tags': require('./rules/no-css-tags'),
+    'sync-scripts': require('./rules/sync-scripts'),
+  },
+  configs: {
+    recommended: {
+      rules: {
+        '@next/next/no-css-tags': 2,
+        '@next/next/sync-scripts': 2,
+      },
+    },
+  },
+}

packages/next-plugin-eslint/lib/rules/no-css-tags.js

@@ -0,0 +1,26 @@
+module.exports = function(context) {
+  return {
+    JSXOpeningElement(node) {
+      if (node.name.name !== 'link') {
+        return
+      }
+      if (node.attributes.length === 0) {
+        return
+      }
+
+      if (
+        node.attributes.find(
+          attr => attr.name.name === 'rel' && attr.value.value === 'stylesheet'
+        )
+      ) {
+        context.report({
+          node,
+          message:
+            'In order to use external stylesheets use @import in the root stylesheet compiled with NextJS. This ensures proper priority to CSS when loading a webpage.',
+        })
+      }
+    },
+  }
+}
+
+module.exports.schema = []

packages/next-plugin-eslint/lib/rules/sync-scripts.js

@@ -0,0 +1,27 @@
+module.exports = function(context) {
+  return {
+    JSXOpeningElement(node) {
+      if (node.name.name !== 'script') {
+        return
+      }
+      if (node.attributes.length === 0) {
+        return
+      }
+
+      if (
+        node.attributes.find(attr => attr.name.name === 'src') &&
+        !node.attributes.find(
+          attr => attr.name.name === 'async' || attr.name.name === 'defer'
+        )
+      ) {
+        context.report({
+          node,
+          message:
+            "A synchronous script tag in head, can impact your webpage's performance",
+        })
+      }
+    },
+  }
+}
+
+module.exports.schema = []

packages/next-plugin-eslint/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@next/eslint-plugin-next",
+  "version": "0.0.0",
+  "description": "ESLint plugin for NextJS.",
+  "main": "lib/index.js",
+  "license": "MIT",
+  "repository": {
+    "url": "zeit/next.js",
+    "directory": "packages/next-plugin-eslint"
+  },
+  "scripts": {
+    "test": "mocha tests --recursive"
+  },
+  "devDependencies": {
+    "mocha": "^3.1.2"
+  }
+}

packages/next-plugin-eslint/tests/lib/rules/no-css-tags.js

@@ -0,0 +1,68 @@
+const rule = require('../../../lib/rules/no-css-tags')
+const RuleTester = require('eslint').RuleTester
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true,
+      jsx: true,
+    },
+  },
+})
+
+var ruleTester = new RuleTester()
+ruleTester.run('no-css-tags', rule, {
+  valid: [
+    `import {Head} from 'next/document';
+
+      export class Blah extends Head {
+        render() {
+          return (
+            <div>
+              <h1>Hello title</h1>
+            </div>
+          );
+        }
+    }`,
+  ],
+
+  invalid: [
+    {
+      code: `
+      import {Head} from 'next/document';
+
+        export class Blah extends Head {
+          render() {
+            return (
+              <div>
+                <h1>Hello title</h1>
+                <link href="/_next/static/css/styles.css" rel="stylesheet" />
+              </div>
+            );
+          }
+      }`,
+      errors: [
+        {
+          message:
+            'In order to use external stylesheets use @import in the root stylesheet compiled with NextJS. This ensures proper priority to CSS when loading a webpage.',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+    {
+      code: `
+      <div>
+        <link href="/_next/static/css/styles.css" rel="stylesheet" />
+      </div>`,
+      errors: [
+        {
+          message:
+            'In order to use external stylesheets use @import in the root stylesheet compiled with NextJS. This ensures proper priority to CSS when loading a webpage.',
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+  ],
+})

packages/next-plugin-eslint/tests/lib/rules/sync-scripts.js

@@ -0,0 +1,56 @@
+const rule = require('../../../lib/rules/sync-scripts')
+const RuleTester = require('eslint').RuleTester
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true,
+      jsx: true,
+    },
+  },
+})
+
+var ruleTester = new RuleTester()
+ruleTester.run('sync-scripts', rule, {
+  valid: [
+    `import {Head} from 'next/document';
+
+      export class Blah extends Head {
+        render() {
+          return (
+            <div>
+              <h1>Hello title</h1>
+              <script src='https://blah.com' async></script>
+            </div>
+          );
+        }
+    }`,
+  ],
+
+  invalid: [
+    {
+      code: `
+      import {Head} from 'next/document';
+
+        export class Blah extends Head {
+          render() {
+            return (
+              <div>
+                <h1>Hello title</h1>
+                <script src='https://blah.com'></script>
+              </div>
+            );
+          }
+      }`,
+      errors: [
+        {
+          message:
+            "A synchronous script tag in head, can impact your webpage's performance",
+          type: 'JSXOpeningElement',
+        },
+      ],
+    },
+  ],
+})