🎉 Initial commit

Author: Aslam97

README.md

@@ -0,0 +1,47 @@
+# Laravel Mix Vue Css Modules
+
+Add supprt for css module.
+
+## Installation
+
+```
+npm install laravel-mix-vue-css-modules --save
+```
+
+or
+
+```
+yarn add laravel-mix-vue-css-modules
+```
+
+## Usage
+
+Your `webpack.mix.js` could look like this:
+
+```js
+const mix = require("laravel-mix");
+require("laravel-mix-vue-css-modules");
+
+mix.vueCssModules();
+```
+
+custom localIdentName
+
+```js
+// DEFAULT localIdentName: '[local]_[hash:base64:8]'
+mix.vueCssModules({
+  localIdentName: "[name]__[local]___[hash:base64:5]",
+});
+```
+
+switch mode
+
+```js
+// default global
+mix.vueCssModules({ mode: "local" });
+```
+
+## Author
+
+Aslam
+FullStack Web developer

index.js

@@ -0,0 +1,78 @@
+const mix = require("laravel-mix");
+
+class VueCssModule {
+  /**
+   * Register the component.
+   *
+   * When your component is called, all user parameters
+   * will be passed to this method.
+   *
+   * Ex: register(src, output) {}
+   * Ex: mix.yourPlugin('src/path', 'output/path');
+   *
+   * @param  {*} ...params
+   * @return {void}
+   *
+   */
+  register({
+    localIdentName = "[local]_[hash:base64:8]",
+    mode = "global",
+  } = {}) {
+    this.localIdentName = localIdentName;
+    this.mode = mode;
+  }
+
+  /**
+   * Override the generated webpack configuration.
+   *
+   * @param  {Object} webpackConfig
+   * @return {void}
+   */
+  webpackConfig(webpackConfig) {
+    webpackConfig.module.rules = webpackConfig.module.rules.map((rule) => {
+      if (!rule.loaders) {
+        return rule;
+      }
+
+      const loaders = rule.loaders.find(
+        (loader) => loader.loader === "css-loader"
+      );
+
+      if (loaders != undefined) {
+        Object.assign(loaders.options, this[this.mode]());
+      }
+
+      return rule;
+    });
+
+    return webpackConfig;
+  }
+
+  /**
+   * Return default mode
+   *
+   * @return {object}
+   */
+  global() {
+    return {
+      modules: true,
+      localIdentName: this.localIdentName,
+    };
+  }
+
+  /**
+   * Return local mode
+   *
+   * @return {object}
+   */
+  local() {
+    return {
+      modules: {
+        mode: this.mode,
+        localIdentName: this.localIdentName,
+      },
+    };
+  }
+}
+
+mix.extend("vueCssModules", new VueCssModule());

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "laravel-mix-vue-css-modules",
+  "version": "1.0.0",
+  "description": "A Laravel Mix extension for css modules support.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Aslam97/laravel-mix-vue-css-modules.git"
+  },
+  "keywords": [
+    "laravel",
+    "laravel-mix",
+    "mix",
+    "webpack",
+    "vue-css-modules",
+    "modules"
+  ],
+  "author": "Aslam",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Aslam97/laravel-mix-vue-css-modules/issues"
+  },
+  "homepage": "https://github.com/Aslam97/laravel-mix-vue-css-modules#readme",
+  "peerDependencies": {
+    "laravel-mix": "^5.0.1"
+  }
+}