automatically css modules, closes #87

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>

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 */

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) {

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;

test/fixtures/auto-modules/a.module.css

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

test/fixtures/auto-modules/b.module.scss

@@ -0,0 +1,3 @@
+.b {
+  color: red;
+}

test/fixtures/auto-modules/c.module.less

@@ -0,0 +1,3 @@
+.c {
+  color: red;
+}

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
+)

test/index.test.js

@@ -179,6 +179,10 @@ snapshotMany('modules', [
       modules: true,
       extract: true
     }
+  },
+  {
+    title: 'auto-modules',
+    input: 'auto-modules/index.js'
   }
 ])