diff --git a/README.md b/README.md index b2f0d81..04cbd9a 100644 --- a/README.md +++ b/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) diff --git a/lib/craco-less.dev.test.js b/lib/craco-less.dev.test.js index 3f4d975..c964fa5 100644 --- a/lib/craco-less.dev.test.js +++ b/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) => { diff --git a/lib/craco-less.js b/lib/craco-less.js index 23b184f..c1fd38f 100644 --- a/lib/craco-less.js +++ b/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,7 +58,7 @@ 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: { @@ -57,7 +66,7 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => { ...(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, }; diff --git a/lib/craco-less.prod.test.js b/lib/craco-less.prod.test.js index 70d0544..e62d846 100644 --- a/lib/craco-less.prod.test.js +++ b/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) => {