🚀 Add support for oneOf

Author: Aslam97

README.md

@@ -42,15 +42,26 @@ You can then use it in your templates with a dynamic class binding:
 </template>
 ```
 
-## Parameters
+## Opt-in Usage
+
+If you only want to use CSS Modules in some of your Vue components, you can set `oneOf` to `true`
+
+```js
+mix.vueCssModules({ oneOf: true });
+```
+
+#### Custom localIdentName
+
+```js
+// DEFAULT: '[local]_[hash:base64:8]'
+mix.vueCssModules({ localIdentName: "[name]__[local]___[hash:base64:5]" });
+```
+
+#### Local mode
 
 ```js
-// localIdentName: '[local]_[hash:base64:8]' // default
-// mode
-mix.vueCssModules({
-  localIdentName: "[name]__[local]___[hash:base64:5]",
-  mode: "local",
-});
+// DEFAULT: global
+mix.vueCssModules({ mode: "local" });
 ```
 
 ## Author

index.js

@@ -17,9 +17,11 @@ class VueCssModule {
   register({
     localIdentName = "[local]_[hash:base64:8]",
     mode = "global",
+    oneOf = false,
   } = {}) {
     this.localIdentName = localIdentName;
     this.mode = mode;
+    this.oneOf = oneOf;
   }
 
   /**
@@ -39,7 +41,33 @@ class VueCssModule {
       );
 
       if (loaders != undefined) {
-        Object.assign(loaders.options, this[this.mode]());
+        if (this.oneOf) {
+          const postCssConfig = rule.loaders.find(
+            (loader) => loader.loader === "postcss-loader"
+          );
+
+          delete rule.loaders;
+          Object.assign(rule, {
+            test: /\.css$/,
+            oneOf: [
+              {
+                resourceQuery: /module/,
+                use: [
+                  "style-loader",
+                  {
+                    loader: "css-loader",
+                    options: this[this.mode](),
+                  },
+                ],
+              },
+              {
+                use: ["style-loader", postCssConfig],
+              },
+            ],
+          });
+        } else {
+          Object.assign(loaders.options, this[this.mode]());
+        }
       }
 
       return rule;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "laravel-mix-vue-css-modules",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A Laravel Mix extension for css modules support.",
   "main": "index.js",
   "scripts": {