Laravel Mix css module

webpack.mix.js

// this project uses laravel Mix Version 6 and webpack 5
// to solve this problem https://github.com/JeffreyWay/laravel-mix/issues/1889

// for laravel Mix version 5 that you still want to use extract with dynamic-import please read my article
// https://medium.com/@iupin5212/bagaimana-codesplitting-di-laravel-mix-389fc76e37ae

// for list of npm command please refer to package.json

// react [name]__[local]___[hash:base64:5]
// discord [local]-[hash:base64:5]

const path = require("path");
const mix = require("laravel-mix");

mix.extend("cssModule", function(config, ...args) {
  // for file-loader
  const fileLoaders = config.module.rules.find(
    rule =>
      rule.test.toString() ===
      "/(\\.(png|jpe?g|gif|webp)$|^((?!font).)*\\.svg$)/"
  );

  fileLoaders.use.forEach(fileLoader => {
    if (fileLoader.loader === "file-loader") {
      Object.assign(fileLoader, {
        options: {
          name: path => {
            if (!/node_modules|bower_components/.test(path)) {
              return Config.fileLoaderDirs.images + `/[contenthash:8].[ext]`;
            }

            return (
              Config.fileLoaderDirs.images +
              "/vendor/" +
              path
                .replace(/\\/g, "/")
                .replace(
                  /((.*(node_modules|bower_components))|images|image|img|assets)\//g,
                  ""
                ) +
              `?[hash]`
            );
          },
          esModule: false
        }
      });
    }
  });

  // for sass-loader
  const sassLoaders = config.module.rules.find(
    rule => rule.test.toString() === "/\\.scss$/"
  );

  sassLoaders.use.forEach(sassLoader => {
    if (sassLoader.loader === "css-loader") {
      Object.assign(sassLoader, {
        options: {
          sourceMap: !mix.inProduction(),
          modules: {
            localIdentName: "[local]-[hash:base64:5]"
          }
        }
      });
    }
  });

  // for css-loader
  const cssLoaders = config.module.rules.find(
    rule => rule.test.toString() === "/\\.css$/"
  );

  cssLoaders.use.forEach(cssLoader => {
    if (cssLoader.loader === "css-loader") {
      Object.assign(cssLoader, {
        options: {
          sourceMap: !mix.inProduction(),
          modules: {
            localIdentName: "[local]-[hash:base64:5]",
            auto: false
          }
        }
      });
    }
  });
});

mix.cssModule();

mix.alias({
  "@": path.join(__dirname, "resources/js"),
  "~": path.join(__dirname, "resources/sass"),
  "@layouts": path.join(__dirname, "resources/js/layouts"),
  "@components": path.join(__dirname, "resources/js/components"),
  "@assets": path.join(__dirname, "resources/assets"),
  "@lang": path.join(__dirname, "resources/js/lang")
});

mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");

mix.autoload({
  jquery: ["$", "jQuery", "window.jQuery"]
});

mix.vue({ version: 2 });

mix.webpackConfig({
  output: {
    publicPath: "/",
    chunkFilename: mix.inProduction()
      ? "js/chunks/[contenthash:8].chunk.js"
      : "js/chunks/[name].chunk.js"
  },
  module: {
    rules: [
      {
        // disabled hash for using preload fonts
        test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: path => {
                if (!/node_modules|bower_components/.test(path)) {
                  return "fonts/[name].[ext]";
                }

                const pathUpdated = path
                  .replace(/\\/g, "/")
                  .replace(
                    /((.*(node_modules|bower_components))|fonts|font|assets)\//g,
                    ""
                  );

                return `fonts/vendor/${pathUpdated}`;
              }
            }
          }
        ]
      }
    ]
  }
});

mix.options({
  processCssUrls: true,
  postCss: [
    mix.inProduction()
      ? require("@fullhuman/postcss-purgecss")({
          content: ["resources/**/*.blade.php", "resources/**/*.vue"],
          defaultExtractor(content) {
            const contentWithoutStyleBlocks = content.replace(
              /<style[^]+?<\/style>/gi,
              ""
            );
            return (
              contentWithoutStyleBlocks.match(
                /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
              ) || []
            );
          },
          safelist: [
            /-(leave|enter|appear)(|-(to|from|active))$/,
            /^(?!(|.*?:)cursor-move).+-move$/,
            /^router-link(|-exact)-active$/,
            /data-v-.*/,
            /modal-.*/,
            /panelbox-.*/
          ]
        })
      : ""
  ],
  terser: {
    // remove LICENSE
    extractComments: false
  },
  autoprefixer: {},
  cssName: {}
});

mix.extract();

// mix.disableNotifications();

if (mix.inProduction()) {
  mix.version();
} else {
  mix.dump();
  mix.sourceMaps(true, "source-map");
}