From 1969f6c0ed4885f334f1a8dadb76518c259c6a94 Mon Sep 17 00:00:00 2001
From: Tuong Minh Pham <phamtm@seagroup.com>
Date: Mon, 8 Oct 2018 10:46:21 +0800
Subject: [PATCH] feat: Smartly decide when to use CSS modules

---
 README.md    |  2 ++
 src/index.ts | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 7fd427a..3ffe787 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,8 @@ Example of Button component with custom class!
 
 If you don't pass `.module` in front of the preprocessor extension, bundler will don't parse your css as cssmodule!
 
+If in your project some places use both CSS modules and some place doesn't, you can leave out the `cssmodules` option so that `webpack` can determined by itself the correct way to load the CSS.
+
 ### Multiple pre-processor
 
 You can still use multiple pre-processor together in the same configuration:
diff --git a/src/index.ts b/src/index.ts
index 6abe79d..7024904 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -88,19 +88,22 @@ const loaders = {
 
 const applyRule = (
   opts: CSSPluginOptions,
-  cssmodules: boolean | undefined,
+  cssmodules: boolean | undefined, // if cssmodules === undefined, then let webpack decide whether to use CSS modules by itself
   dev: boolean
 ) => {
   const { preprocessor, cssOpts, loaderOpts } = opts
 
   const loaderfn = loaders[preprocessor as PreProcessor]
   const loader = loaderfn(loaderOpts)
-  const cssoptions = merge(cssOpts, {
-    importLoaders: 1,
-    modules: cssmodules,
-    sourceMap: !dev,
-    ...(cssmodules && { getLocalIdent }),
-  })
+  const cssoptions = merge(
+    cssOpts,
+    {
+      importLoaders: 1,
+      sourceMap: !dev,
+      ...(cssmodules && { getLocalIdent }),
+    },
+    typeof cssmodules === 'boolean' ? { modules: cssmodules } : {}
+  )
 
   return {
     test: tests[preprocessor as PreProcessor],
@@ -117,7 +120,7 @@ export interface CSSPluginOptions {
 
 const defaultOpts: Record<string, any> = {
   preprocessor: 'postcss',
-  cssmodules: false,
+  cssmodules: undefined,
   loadersOpts: {},
   cssOpts: {},
 }