Support both global and local style?

packages/next-css/index.js

@@ -1,5 +1,8 @@
 const cssLoaderConfig = require('./css-loader-config')
 
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+
 module.exports = (nextConfig = {}) => {
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
@@ -10,19 +13,29 @@ module.exports = (nextConfig = {}) => {
       }
 
       const { dev, isServer } = options
-      const { cssModules, cssLoaderOptions, postcssLoaderOptions } = nextConfig
+      const { cssLoaderOptions, postcssLoaderOptions } = nextConfig
 
       options.defaultLoaders.css = cssLoaderConfig(config, {
         extensions: ['css'],
-        cssModules,
+        cssModules: false,
+        cssLoaderOptions,
+        postcssLoaderOptions,
+        dev,
+        isServer
+      })
+
+      options.defaultLoaders.cssModule = cssLoaderConfig(config, {
+        extensions: ['css'],
+        cssModules: true,
         cssLoaderOptions,
         postcssLoaderOptions,
         dev,
         isServer
       })
 
       config.module.rules.push({
-        test: /\.css$/,
+        test: cssRegex,
+        exclude: cssModuleRegex,
         issuer(issuer) {
           if (issuer.match(/pages[\\/]_document\.js$/)) {
             throw new Error(
@@ -32,6 +45,17 @@ module.exports = (nextConfig = {}) => {
           return true
         },
         use: options.defaultLoaders.css
+      },{
+        test: cssModuleRegex,
+        issuer(issuer) {
+          if (issuer.match(/pages[\\/]_document\.js$/)) {
+            throw new Error(
+              'You can not import CSS files in pages/_document.js, use pages/_app.js instead.'
+            )
+          }
+          return true
+        },
+        use: options.defaultLoaders.cssModule
       })
 
       if (typeof nextConfig.webpack === 'function') {

packages/next-css/readme.md

@@ -52,12 +52,10 @@ __Note: CSS files can _not_ be imported into your [`_document.js`](https://githu
 ```js
 // next.config.js
 const withCSS = require('@zeit/next-css')
-module.exports = withCSS({
-  cssModules: true
-})
+module.exports = withCSS()
 ```
 
-Create a CSS file `style.css`
+Create a CSS file `style.module.css`
 
 ```css
 .example {
@@ -68,7 +66,7 @@ Create a CSS file `style.css`
 Create a page file `pages/index.js`
 
 ```js
-import css from "../style.css"
+import css from "../style.module.css"
 
 export default () => <div className={css.example}>Hello World!</div>
 ```
@@ -83,15 +81,14 @@ For instance, [to enable locally scoped CSS modules](https://github.com/css-modu
 // next.config.js
 const withCSS = require('@zeit/next-css')
 module.exports = withCSS({
-  cssModules: true,
   cssLoaderOptions: {
     importLoaders: 1,
     localIdentName: "[local]___[hash:base64:5]",
   }
 })
 ```
 
-Create a CSS file `styles.css`
+Create a CSS file `styles.module.css`
 
 ```css
 .example {
@@ -102,7 +99,7 @@ Create a CSS file `styles.css`
 Create a page file `pages/index.js` that imports your stylesheet and uses the hashed class name from the stylesheet
 
 ```js
-import css from "../style.css"
+import css from "../styles.module.css"
 
 const Component = props => {
   return (

packages/next-less/index.js

@@ -1,5 +1,8 @@
 const cssLoaderConfig = require('@zeit/next-css/css-loader-config')
 
+const lessRegex = /\.less$/;
+const lessModuleRegex = /\.module\.less$/;
+
 module.exports = (nextConfig = {}) => {
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
@@ -11,15 +14,14 @@ module.exports = (nextConfig = {}) => {
 
       const { dev, isServer } = options
       const {
-        cssModules,
         cssLoaderOptions,
         postcssLoaderOptions,
         lessLoaderOptions = {}
       } = nextConfig
 
       options.defaultLoaders.less = cssLoaderConfig(config, {
         extensions: ['less'],
-        cssModules,
+        cssModules: false,
         cssLoaderOptions,
         postcssLoaderOptions,
         dev,
@@ -32,11 +34,33 @@ module.exports = (nextConfig = {}) => {
         ]
       })
 
-      config.module.rules.push({
-        test: /\.less$/,
-        use: options.defaultLoaders.less
+      options.defaultLoaders.lessModule = cssLoaderConfig(config, {
+        extensions: ['less'],
+        cssModules: true,
+        cssLoaderOptions,
+        postcssLoaderOptions,
+        dev,
+        isServer,
+        loaders: [
+          {
+            loader: 'less-loader',
+            options: lessLoaderOptions
+          }
+        ]
       })
 
+      config.module.rules.push(
+        {
+          test: lessRegex,
+          exclude: lessModuleRegex,
+          use: options.defaultLoaders.less
+        },
+        {
+          test: lessModuleRegex,
+          use: options.defaultLoaders.lessModule
+        }
+      )
+
       if (typeof nextConfig.webpack === 'function') {
         return nextConfig.webpack(config, options)
       }

packages/next-less/readme.md

@@ -51,12 +51,10 @@ export default () => <div className="example">Hello World!</div>
 ```js
 // next.config.js
 const withLess = require('@zeit/next-less')
-module.exports = withLess({
-  cssModules: true
-})
+module.exports = withLess()
 ```
 
-Create a Less file `styles.less`
+Create a Less file `styles.module.less`
 
 ```less
 @font-size: 50px;
@@ -68,7 +66,7 @@ Create a Less file `styles.less`
 Create a page file `pages/index.js`
 
 ```js
-import css from "../styles.less"
+import css from "../styles.module.less"
 
 export default () => <div className={css.example}>Hello World!</div>
 ```
@@ -83,17 +81,16 @@ For instance, [to enable locally scoped CSS modules](https://github.com/css-modu
 // next.config.js
 const withLess = require('@zeit/next-less')
 module.exports = withLess({
-  cssModules: true,
   cssLoaderOptions: {
     importLoaders: 1,
     localIdentName: "[local]___[hash:base64:5]",
   }
 })
 ```
 
-Create a CSS file `styles.css`
+Create a LESS file `styles.module.less`
 
-```css
+```less
 .example {
   font-size: 50px;
 }
@@ -102,11 +99,11 @@ Create a CSS file `styles.css`
 Create a page file `pages/index.js` that imports your stylesheet and uses the hashed class name from the stylesheet
 
 ```js
-import css from "../style.css"
+import css from "../styles.module.less"
 
 const Component = props => {
   return (
-    <div className={css.backdrop}>
+    <div className={css.example}>
       ...
     </div>
   )

packages/next-sass/index.js

@@ -1,5 +1,8 @@
 const cssLoaderConfig = require('@zeit/next-css/css-loader-config')
 
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
 module.exports = (nextConfig = {}) => {
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
@@ -11,15 +14,28 @@ module.exports = (nextConfig = {}) => {
 
       const { dev, isServer } = options
       const {
-        cssModules,
         cssLoaderOptions,
         postcssLoaderOptions,
         sassLoaderOptions = {}
       } = nextConfig
 
       options.defaultLoaders.sass = cssLoaderConfig(config, {
         extensions: ['scss', 'sass'],
-        cssModules,
+        cssModules: false,
+        cssLoaderOptions,
+        postcssLoaderOptions,
+        dev,
+        isServer,
+        loaders: [
+          {
+            loader: 'sass-loader',
+            options: sassLoaderOptions
+          }
+        ]
+      })
+      options.defaultLoaders.sassModule = cssLoaderConfig(config, {
+        extensions: ['scss', 'sass'],
+        cssModules: true,
         cssLoaderOptions,
         postcssLoaderOptions,
         dev,
@@ -34,12 +50,13 @@ module.exports = (nextConfig = {}) => {
 
       config.module.rules.push(
         {
-          test: /\.scss$/,
+          test: sassRegex,
+					exclude: sassModuleRegex,
           use: options.defaultLoaders.sass
         },
         {
-          test: /\.sass$/,
-          use: options.defaultLoaders.sass
+          test: sassModuleRegex,
+          use: options.defaultLoaders.sassModule
         }
       )
 

packages/next-sass/readme.md

@@ -51,12 +51,10 @@ export default () => <div className="example">Hello World!</div>
 ```js
 // next.config.js
 const withSass = require('@zeit/next-sass')
-module.exports = withSass({
-  cssModules: true
-})
+module.exports = withSass()
 ```
 
-Create a Sass file  `styles.scss`
+Create a Sass file  `styles.module.scss`
 
 ```scss
 $font-size: 50px;
@@ -68,7 +66,7 @@ $font-size: 50px;
 Create a page file `pages/index.js`
 
 ```js
-import css from "../styles.scss"
+import css from "../styles.module.scss"
 
 export default () => <div className={css.example}>Hello World!</div>
 ```
@@ -83,15 +81,14 @@ For instance, [to enable locally scoped CSS modules](https://github.com/css-modu
 // next.config.js
 const withSass = require('@zeit/next-sass')
 module.exports = withSass({
-  cssModules: true,
   cssLoaderOptions: {
     importLoaders: 1,
     localIdentName: "[local]___[hash:base64:5]",
   }
 })
 ```
 
-Create a SCSS file `style.scss`
+Create a SCSS file `style.module.scss`
 
 ```css
 .example {
@@ -102,7 +99,7 @@ Create a SCSS file `style.scss`
 Create a page file `pages/index.js` that imports your stylesheet and uses the hashed class name from the stylesheet
 
 ```js
-import css from "../style.scss"
+import css from "../style.module.scss"
 
 const Component = props => {
   return (