Fix/#98 find loaders path separator agnostically (#99)

Find Webpack CSS loaders using platform-independent path-separator logic.

---------

Co-authored-by: Kamron Batman <3953314+kamronbatman@users.noreply.github.com>

Author: fourpastmidnight

README.md

@@ -278,3 +278,4 @@ Before submitting a pull request, please check the following:
 - [fanck0605](https://github.com/fanck0605)
 - [xyy94813](https://github.com/xyy94813)
 - [kamronbatman](https://github.com/kamronbatman)
+- [fourpastmidnight](https://github.com/fourpastmidnight)

lib/craco-less.dev.test.js

@@ -23,7 +23,6 @@ beforeEach(() => {
     });
     process.env.NODE_ENV = "test";
   }
-  CracoLessPlugin.pathSep = path.sep;
 
   // loadWebpackDevConfig() caches the config internally, so we need to
   // deep clone the object before each test.
@@ -110,8 +109,6 @@ test("the webpack config is modified correctly without any options", () => {
 });
 
 test("the webpack config is modified correctly without any options on Windows", () => {
-  CracoLessPlugin.pathSep = "\\";
-
   // Windows uses "\" path separators.
   // Note: This is a noop when running tests on Windows.
   const replaceSlashesInLoader = (rule) => {

lib/craco-less.js

@@ -1,10 +1,21 @@
-const path = require("path");
 const { deepClone, styleRuleByName } = require("./utils");
 const { throwUnexpectedConfigError } = require("@craco/craco");
 
 const lessRegex = /\.less$/;
 const lessModuleRegex = /\.module\.less$/;
 
+const loaderRegexMap = {
+  "style-loader": /[\\/]style-loader[\\/]/,
+  "css-loader": /[\\/]css-loader[\\/]/,
+  "postcss-loader": /[\\/]postcss-loader[\\/]/,
+  "resolve-url-loader": /[\\/]resolve-url-loader[\\/]/,
+  "mini-css-extract-plugin": /[\\/]mini-css-extract-plugin[\\/]/,
+  "sass-loader": /[\\/]sass-loader[\\/]/,
+};
+
+const hasLoader = (loaderName, ruleLoader) =>
+  loaderRegexMap[loaderName].test(ruleLoader);
+
 const throwError = (message, githubIssueQuery) =>
   throwUnexpectedConfigError({
     packageName: "craco-less",
@@ -14,8 +25,6 @@ const throwError = (message, githubIssueQuery) =>
   });
 
 const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
-  // This is mocked in Windows tests
-  const pathSep = module.exports.pathSep;
   pluginOptions = pluginOptions || {};
 
   const createLessRule = ({ baseRule, overrideRule }) => {
@@ -40,7 +49,7 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
 
       if (
         (context.env === "development" || context.env === "test") &&
-        rule.loader.includes(`${pathSep}style-loader${pathSep}`)
+        hasLoader("style-loader", rule.loader)
       ) {
         lessRule.use.push({
           loader: rule.loader,
@@ -49,15 +58,15 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
             ...(pluginOptions.styleLoaderOptions || {}),
           },
         });
-      } else if (rule.loader.includes(`${pathSep}css-loader${pathSep}`)) {
+      } else if (hasLoader("css-loader", rule.loader)) {
         lessRule.use.push({
           loader: rule.loader,
           options: {
             ...rule.options,
             ...(pluginOptions.cssLoaderOptions || {}),
           },
         });
-      } else if (rule.loader.includes(`${pathSep}postcss-loader${pathSep}`)) {
+      } else if (hasLoader("postcss-loader", rule.loader)) {
         lessRule.use.push({
           loader: rule.loader,
           options: {
@@ -68,9 +77,7 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
             },
           },
         });
-      } else if (
-        rule.loader.includes(`${pathSep}resolve-url-loader${pathSep}`)
-      ) {
+      } else if (hasLoader("resolve-url-loader", rule.loader)) {
         lessRule.use.push({
           loader: rule.loader,
           options: {
@@ -80,7 +87,7 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
         });
       } else if (
         context.env === "production" &&
-        rule.loader.includes(`${pathSep}mini-css-extract-plugin${pathSep}`)
+        hasLoader("mini-css-extract-plugin", rule.loader)
       ) {
         lessRule.use.push({
           loader: rule.loader,
@@ -89,7 +96,7 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
             ...(pluginOptions.miniCssExtractPluginOptions || {}),
           },
         });
-      } else if (rule.loader.includes(`${pathSep}sass-loader${pathSep}`)) {
+      } else if (hasLoader("sass-loader", rule.loader)) {
         lessRule.use.push({
           loader: require.resolve("less-loader"),
           options: {
@@ -132,7 +139,6 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
       exclude: lessModuleRegex,
     },
     pluginOptions,
-    pathSep,
   });
 
   if (pluginOptions.modifyLessRule) {
@@ -208,9 +214,7 @@ const overrideJestConfig = ({ context, jestConfig }) => {
   return jestConfig;
 };
 
-// pathSep is mocked in Windows tests
 module.exports = {
   overrideWebpackConfig,
   overrideJestConfig,
-  pathSep: path.sep,
 };

lib/craco-less.prod.test.js

@@ -26,7 +26,6 @@ beforeEach(() => {
     });
     process.env.NODE_ENV = "test";
   }
-  CracoLessPlugin.pathSep = path.sep;
 
   // loadWebpackProdConfig() caches the config internally, so we need to
   // deep clone the object before each test.
@@ -121,8 +120,6 @@ test("the webpack config is modified correctly without any options", () => {
 });
 
 test("the webpack config is modified correctly without any options on Windows", () => {
-  CracoLessPlugin.pathSep = "\\";
-
   // Windows uses "\" path separators.
   // Note: This is a noop when running tests on Windows.
   const replaceSlashesInLoader = (rule) => {