Add eslint rule for not allowing styled-jsx in _document.js

errors/manifest.json

@@ -347,6 +347,10 @@
           "title": "no-server-import-in-page",
           "path": "/errors/no-server-import-in-page.md"
         },
+        {
+          "title": "no-styled-jsx-in-document",
+          "path": "/errors/no-styled-jsx-in-document.md"
+        },
         {
           "title": "no-sync-scripts",
           "path": "/errors/no-sync-scripts.md"

errors/no-styled-jsx-in-document.md

@@ -0,0 +1,40 @@
+# No styled-jsx in Document
+
+### Why This Error Occurred
+
+Custom css like `styled-jsx` is not allowed in `pages/_document.{js,tsx}`.
+
+### Possible Ways to Fix It
+
+If you need share css for all your pages, take a look at the `pages/_app.{js,tsx}` or define a custom layout.
+
+For example, consider the following stylesheet named `styles.css`:
+
+```css
+body {
+  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
+    'Arial', sans-serif;
+  padding: 20px 20px 60px;
+  max-width: 680px;
+  margin: 0 auto;
+}
+```
+
+Create a `pages/_app.{js,tsx}` file if not already present. Then, import the `styles.css` file.
+
+```jsx
+import '../styles.css'
+
+// This default export is required in a new `pages/_app.js` file.
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+These styles (`styles.css`) will apply to all pages and components in your application.
+
+### Useful links
+
+- [Custom Document Caveats](https://nextjs.org/docs/advanced-features/custom-document#caveats)
+- [Layouts](https://nextjs.org/docs/basic-features/layouts)
+- [Built in CSS Support](https://nextjs.org/docs/basic-features/built-in-css-support)

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

@@ -15,6 +15,7 @@ module.exports = {
     'no-script-in-document': require('./rules/no-script-in-document'),
     'no-script-in-head': require('./rules/no-script-in-head'),
     'no-server-import-in-page': require('./rules/no-server-import-in-page'),
+    'no-styled-jsx-in-document': require('./rules/no-styled-jsx-in-document'),
     'no-typos': require('./rules/no-typos'),
     'no-duplicate-head': require('./rules/no-duplicate-head'),
     'inline-script-id': require('./rules/inline-script-id'),
@@ -38,6 +39,7 @@ module.exports = {
         '@next/next/no-document-import-in-page': 2,
         '@next/next/no-head-import-in-document': 2,
         '@next/next/no-script-in-document': 2,
+        '@next/next/no-styled-jsx-in-document': 2,
         '@next/next/no-script-in-head': 2,
         '@next/next/no-server-import-in-page': 2,
         '@next/next/no-typos': 1,

packages/eslint-plugin-next/lib/rules/no-styled-jsx-in-document.js

@@ -0,0 +1,43 @@
+const path = require('path')
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow using custom styled-jsx inside pages/_document.js',
+      recommended: true,
+      url: 'https://nextjs.org/docs/messages/no-styled-jsx-in-document',
+    },
+    fixable: 'code',
+  },
+  create: function (context) {
+    return {
+      ImportDeclaration(node) {
+        const document = context.getFilename().split('pages')[1]
+        if (!document || !path.parse(document).name.startsWith('_document')) {
+          return
+        }
+      },
+      JSXElement(node) {
+        const styledJsx = node.children.find(
+          (child) =>
+            child.openingElement &&
+            child.openingElement.name &&
+            child.openingElement.name.type === 'JSXIdentifier' &&
+            child.openingElement.name.name === 'style' &&
+            child.openingElement.attributes.find(
+              (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'jsx'
+            )
+        )
+
+        if (styledJsx) {
+          context.report({
+            node,
+            message: `Do not use styled-jsx inside pages/_document.js. See https://nextjs.org/docs/messages/no-styled-jsx-in-document.`,
+          })
+        }
+      },
+    }
+  },
+}
+
+module.exports.schema = []

test/unit/eslint-plugin-next/no-styled-jsx-in-document.test.ts

@@ -0,0 +1,100 @@
+import rule from '@next/eslint-plugin-next/lib/rules/no-styled-jsx-in-document'
+import { RuleTester } from 'eslint'
+;(RuleTester as any).setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true,
+      jsx: true,
+    },
+  },
+})
+const ruleTester = new RuleTester()
+
+ruleTester.run('no-styled-jsx-in-document', rule, {
+  valid: [
+    `import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+        export class MyDocument extends Document {
+          static async getInitialProps(ctx) {
+            const initialProps = await Document.getInitialProps(ctx)
+            return { ...initialProps }
+          }
+
+          render() {
+            return (
+              <Html>
+                <Head />
+                <body>
+                  <Main />
+                  <NextScript />
+                </body>
+              </Html>
+            )
+          }
+        }`,
+    `import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+        export class MyDocument extends Document {
+          static async getInitialProps(ctx) {
+            const initialProps = await Document.getInitialProps(ctx)
+            return { ...initialProps }
+          }
+
+          render() {
+            return (
+              <Html>
+                <Head />
+                <style>{"\
+                  body{\
+                    color:red;\
+                  }\
+                "}</style>
+                <body>
+                  <Main />
+                  <NextScript />
+                </body>
+              </Html>
+            )
+          }
+        }`,
+  ],
+
+  invalid: [
+    {
+      code: `
+            import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+            export class MyDocument extends Document {
+              static async getInitialProps(ctx) {
+                const initialProps = await Document.getInitialProps(ctx)
+                return { ...initialProps }
+              }
+
+              render() {
+                return (
+                  <Html>
+                    <Head />
+                    <style jsx>{"\
+                    body{\
+                      color:red;\
+                    }\
+                    "}</style>
+                    <body>
+                      <Main />
+                      <NextScript />
+                    </body>
+                  </Html>
+                )
+              }
+            }`,
+      errors: [
+        {
+          message:
+            'Do not use styled-jsx inside pages/_document.js. See https://nextjs.org/docs/messages/no-styled-jsx-in-document.',
+        },
+      ],
+    },
+  ],
+})