From 707ca3ed94aa01396d050e4554c979ceb8904fab Mon Sep 17 00:00:00 2001
From: EGOIST <0x142857@gmail.com>
Date: Sun, 18 Mar 2018 14:30:18 +0800
Subject: [PATCH] automatically css modules, closes #87

---
 README.md                                |  7 ++++
 src/index.js                             |  2 +
 src/postcss-loader.js                    | 10 ++++-
 test/__snapshots__/index.test.js.snap    | 50 ++++++++++++++++++++++++
 test/fixtures/auto-modules/a.module.css  |  3 ++
 test/fixtures/auto-modules/b.module.scss |  3 ++
 test/fixtures/auto-modules/c.module.less |  3 ++
 test/fixtures/auto-modules/index.js      |  9 +++++
 test/index.test.js                       |  4 ++
 9 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 test/fixtures/auto-modules/a.module.css
 create mode 100644 test/fixtures/auto-modules/b.module.scss
 create mode 100644 test/fixtures/auto-modules/c.module.less
 create mode 100644 test/fixtures/auto-modules/index.js

diff --git a/README.md b/README.md
index 29f35a4a..aa238254 100644
--- a/README.md
+++ b/README.md
@@ -118,6 +118,13 @@ Default: `false`
 
 Enable CSS modules or set options for `postcss-modules`.
 
+### autoModules
+
+Type: `boolean`<br>
+Default: `true`
+
+Automatically enable CSS modules for `.module.css` `.module.sss` `.module.scss` `.module.sass` `.module.styl` `.module.stylus` `.module.less` files.
+
 ### namedExports
 
 Type: `boolean` `function`<br>
diff --git a/src/index.js b/src/index.js
index 0b691fa2..953b0cae 100644
--- a/src/index.js
+++ b/src/index.js
@@ -27,6 +27,8 @@ export default (options = {}) => {
     /** CSS modules */
     modules: inferOption(options.modules, false),
     namedExports: options.namedExports,
+    /** Automatically CSS modules for .module.xxx files */
+    autoModules: options.autoModules,
     /** Options for cssnano */
     minimize: inferOption(options.minimize, false),
     /** Postcss config file */
diff --git a/src/postcss-loader.js b/src/postcss-loader.js
index f273d696..b945ee22 100644
--- a/src/postcss-loader.js
+++ b/src/postcss-loader.js
@@ -48,6 +48,10 @@ function ensurePostCSSOption(option) {
   return typeof option === 'string' ? importCwd(option) : option
 }
 
+function isModuleFile(file) {
+  return /\.module\.(css|styl|stylus|sass|scss|less|sss)$/.test(file)
+}
+
 export default {
   name: 'postcss',
   test: /\.(css|sss)$/,
@@ -62,7 +66,9 @@ export default {
     const shouldInject = options.inject
 
     const modulesExported = {}
-    if (options.modules) {
+    const autoModules = options.autoModules !== false && isModuleFile(this.id)
+    const supportModules = options.modules || autoModules
+    if (supportModules) {
       plugins.push(
         require('postcss-modules')({
           // In tests
@@ -140,7 +146,7 @@ export default {
       }
     } else {
       output += `var css = ${JSON.stringify(res.css)};\nexport default ${
-        options.modules ? JSON.stringify(modulesExported[this.id]) : 'css'
+        supportModules ? JSON.stringify(modulesExported[this.id]) : 'css'
       };`
     }
     if (!shouldExtract && shouldInject) {
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
index 35113b8f..8e67eaf3 100644
--- a/test/__snapshots__/index.test.js.snap
+++ b/test/__snapshots__/index.test.js.snap
@@ -410,6 +410,56 @@ console.log(css, css$1);
 "
 `;
 
+exports[`modules auto-modules: js code 1`] = `
+"'use strict';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css = \\".a-module_foo {\\\\n  color: red;\\\\n}\\\\n\\";
+var a = {\\"foo\\":\\"a-module_foo\\"};
+styleInject(css);
+
+var css$1 = \\".b-module_b {\\\\n  color: red; }\\\\n\\";
+var b = {\\"b\\":\\"b-module_b\\"};
+styleInject(css$1);
+
+var css$2 = \\".c-module_c {\\\\n  color: red;\\\\n}\\\\n\\";
+var c = {\\"c\\":\\"c-module_c\\"};
+styleInject(css$2);
+
+console.log(
+  a,
+  b,
+  c
+);
+"
+`;
+
 exports[`modules extract: css code 1`] = `
 ".style_foo {
   color: red;
diff --git a/test/fixtures/auto-modules/a.module.css b/test/fixtures/auto-modules/a.module.css
new file mode 100644
index 00000000..a15c877a
--- /dev/null
+++ b/test/fixtures/auto-modules/a.module.css
@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}
diff --git a/test/fixtures/auto-modules/b.module.scss b/test/fixtures/auto-modules/b.module.scss
new file mode 100644
index 00000000..b28d1ab0
--- /dev/null
+++ b/test/fixtures/auto-modules/b.module.scss
@@ -0,0 +1,3 @@
+.b {
+  color: red;
+}
diff --git a/test/fixtures/auto-modules/c.module.less b/test/fixtures/auto-modules/c.module.less
new file mode 100644
index 00000000..7dacc6a4
--- /dev/null
+++ b/test/fixtures/auto-modules/c.module.less
@@ -0,0 +1,3 @@
+.c {
+  color: red;
+}
diff --git a/test/fixtures/auto-modules/index.js b/test/fixtures/auto-modules/index.js
new file mode 100644
index 00000000..58e282a5
--- /dev/null
+++ b/test/fixtures/auto-modules/index.js
@@ -0,0 +1,9 @@
+import a from './a.module.css'
+import b from './b.module.scss'
+import c from './c.module.less'
+
+console.log(
+  a,
+  b,
+  c
+)
diff --git a/test/index.test.js b/test/index.test.js
index 0509ec30..bd916081 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -179,6 +179,10 @@ snapshotMany('modules', [
       modules: true,
       extract: true
     }
+  },
+  {
+    title: 'auto-modules',
+    input: 'auto-modules/index.js'
   }
 ])