Add CSS modules + node_modules tests

Author: Timer

.prettierignore_staged

@@ -0,0 +1,3 @@
+**/.next/**
+**/_next/**
+**/dist/**

lint-staged.config.js

@@ -7,8 +7,10 @@ module.exports = {
       .map(filename => `"${isWin ? filename : escape([filename])}"`)
       .join(' ')
     return [
-      `prettier --write ${escapedFileNames}`,
-      `eslint --max-warnings=0 --fix ${filenames.map(f => `"${f}"`).join(' ')}`,
+      `prettier --with-node-modules --ignore-path='./.prettierignore_staged' --write ${escapedFileNames}`,
+      `eslint --no-ignore --max-warnings=0 --fix ${filenames
+        .map(f => `"${f}"`)
+        .join(' ')}`,
       `git add ${escapedFileNames}`,
     ]
   },
@@ -17,7 +19,7 @@ module.exports = {
       .map(filename => `"${isWin ? filename : escape([filename])}"`)
       .join(' ')
     return [
-      `prettier --write ${escapedFileNames}`,
+      `prettier --with-node-modules --ignore-path='./.prettierignore_staged' --write ${escapedFileNames}`,
       `git add ${escapedFileNames}`,
     ]
   },

packages/next/build/webpack/config/blocks/css/index.ts

@@ -5,7 +5,7 @@ import webpack, { Configuration } from 'webpack'
 import { loader } from '../../helpers'
 import { ConfigurationContext, ConfigurationFn, pipe } from '../../utils'
 import { getCssModuleLocalIdent } from './getCssModuleLocalIdent'
-import { getGlobalImportError } from './messages'
+import { getGlobalImportError, getModuleImportError } from './messages'
 import { getPostCssPlugins } from './plugins'
 
 function getClientStyleLoader({
@@ -136,6 +136,23 @@ export const css = curry(async function css(
     })
   )
 
+  // Throw an error for CSS Modules used outside their supported scope
+  fns.push(
+    loader({
+      oneOf: [
+        {
+          test: /\.module\.css$/,
+          use: {
+            loader: 'error-loader',
+            options: {
+              reason: getModuleImportError(),
+            },
+          },
+        },
+      ],
+    })
+  )
+
   if (ctx.isServer) {
     fns.push(
       loader({

packages/next/build/webpack/config/blocks/css/messages.ts

@@ -9,3 +9,10 @@ export function getGlobalImportError(file: string | null) {
     file ? file : 'pages/_app.js'
   )}.\nRead more: https://err.sh/next.js/global-css`
 }
+
+export function getModuleImportError() {
+  // TODO: Read more link
+  return `CSS Modules ${chalk.bold(
+    'cannot'
+  )} be imported from within ${chalk.bold('node_modules')}.`
+}

test/integration/css/fixtures/invalid-module/node_modules/example/index.js

@@ -0,0 +1,7 @@
+import * as classes from 'example'
+
+function Home() {
+  return <div>This should fail at build time {JSON.stringify(classes)}.</div>
+}
+
+export default Home