Error on CSS in Custom Document (#10091)

vercel · Jan 14, 2020 · d9d9545 · d9d9545
1 parent 2d76c4a
commit d9d9545
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 0 deletions.
diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts
@@ -6,6 +6,7 @@ import { loader, plugin } from '../../helpers'
 import { ConfigurationContext, ConfigurationFn, pipe } from '../../utils'
 import { getCssModuleLocalIdent } from './getCssModuleLocalIdent'
 import {
+  getCustomDocumentError,
   getGlobalImportError,
   getGlobalModuleImportError,
   getLocalModuleImportError,
@@ -130,6 +131,28 @@ export const css = curry(async function css(
     // function argument.
     true
   )
+
+  // CSS cannot be imported in _document. This comes before everything because
+  // global CSS nor CSS modules work in said file.
+  fns.push(
+    loader({
+      oneOf: [
+        {
+          test: /\.css$/,
+          // Use a loose regex so we don't have to crawl the file system to
+          // find the real file name (if present).
+          issuer: { test: /pages[\\/]_document\./ },
+          use: {
+            loader: 'error-loader',
+            options: {
+              reason: getCustomDocumentError(),
+            },
+          },
+        },
+      ],
+    })
+  )
+
   // CSS Modules support must be enabled on the server and client so the class
   // names are availble for SSR or Prerendering.
   fns.push(

diff --git a/packages/next/build/webpack/config/blocks/css/messages.ts b/packages/next/build/webpack/config/blocks/css/messages.ts
@@ -25,3 +25,9 @@ export function getLocalModuleImportError() {
     'node_modules'
   )}.\nRead more: https://err.sh/next.js/css-modules-npm`
 }
+
+export function getCustomDocumentError() {
+  return `CSS ${chalk.bold('cannot')} be imported within ${chalk.cyan(
+    'pages/_document.js'
+  )}. Please move global styles to ${chalk.cyan('pages/_app.js')}.`
+}
diff --git a/test/integration/css-fixtures/invalid-module-document/pages/_document.js b/test/integration/css-fixtures/invalid-module-document/pages/_document.js
@@ -0,0 +1,23 @@
+import Document, { Head, Html, Main, NextScript } from 'next/document'
+import styles from '../styles.module.css'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body className={styles['red-text']}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
diff --git a/test/integration/css-fixtures/invalid-module-document/pages/index.js b/test/integration/css-fixtures/invalid-module-document/pages/index.js
@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div>Hello</div>
+}
diff --git a/test/integration/css-fixtures/invalid-module-document/styles.module.css b/test/integration/css-fixtures/invalid-module-document/styles.module.css
@@ -0,0 +1,3 @@
+.red-text {
+  color: red;
+}
diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
@@ -205,6 +205,26 @@ describe('CSS Support', () => {
     })
   })
 
+  describe('Invalid CSS in _document', () => {
+    const appDir = join(fixturesDir, 'invalid-module-document')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should fail to build', async () => {
+      const { stderr } = await nextBuild(appDir, [], {
+        stderr: true,
+      })
+      expect(stderr).toContain('Failed to compile')
+      expect(stderr).toContain('styles.module.css')
+      expect(stderr).toMatch(
+        /CSS.*cannot.*be imported within.*pages[\\/]_document\.js/
+      )
+      expect(stderr).toMatch(/Location:.*pages[\\/]_document\.js/)
+    })
+  })
+
   describe('Invalid Global CSS', () => {
     const appDir = join(fixturesDir, 'invalid-global')