Smartly decide when to use CSS modules

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:

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: {},
 }