From 0080f88c67abb2d9a6eee909eef229ef086b8c9e Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Tue, 21 Jul 2020 19:16:30 +0300 Subject: [PATCH] refactor: default values `modules` and `module.auto` are true (#1117) BREAKING CHANGE: the `modules` option is `true` by default for all files matching `/\.module\.\w+$/i.test(filename)` regular expression, `module.auto` is `true` by default --- README.md | 6 +- src/utils.js | 52 +++--- .../__snapshots__/modules-option.test.js.snap | 149 +++++++++++------- test/modules-option.test.js | 18 ++- 4 files changed, 140 insertions(+), 85 deletions(-) diff --git a/README.md b/README.md index f3dc62f7..83d1a51c 100644 --- a/README.md +++ b/README.md @@ -284,7 +284,7 @@ module.exports = { ### `modules` Type: `Boolean|String|Object` -Default: `false` +Default: based on filename, `true` for all files matching `/\.module\.\w+$/i.test(filename)` regular expression, more information you can read [here](https://github.com/webpack-contrib/css-loader#auto) Enables/Disables CSS Modules and their configuration. @@ -546,7 +546,7 @@ module.exports = { ##### `auto` Type: `Boolean|RegExp|Function` -Default: `'undefined'` +Default: `'true'` Allows auto enable css modules based on filename. @@ -968,7 +968,7 @@ module.exports = { }; ``` -### `exportOnlyLocals` +##### `exportOnlyLocals` Type: `Boolean` Default: `false` diff --git a/src/utils.js b/src/utils.js index 8a7b712a..bf0606a7 100644 --- a/src/utils.js +++ b/src/utils.js @@ -104,16 +104,26 @@ function getFilter(filter, resourcePath) { }; } +const moduleRegExp = /\.module\.\w+$/i; + function getModulesOptions(rawOptions, loaderContext) { + const { resourcePath } = loaderContext; + if (typeof rawOptions.modules === 'undefined') { - return false; - } + const isModules = moduleRegExp.test(resourcePath); - if (typeof rawOptions.modules === 'boolean' && rawOptions.modules === false) { + if (!isModules) { + return false; + } + } else if ( + typeof rawOptions.modules === 'boolean' && + rawOptions.modules === false + ) { return false; } let modulesOptions = { + auto: true, mode: 'local', localIdentName: '[hash:base64]', // eslint-disable-next-line no-undefined @@ -133,30 +143,30 @@ function getModulesOptions(rawOptions, loaderContext) { modulesOptions.mode = typeof rawOptions.modules === 'string' ? rawOptions.modules : 'local'; } else { - const { resourcePath } = loaderContext; + if (rawOptions.modules) { + if (typeof rawOptions.modules.auto === 'boolean') { + const isModules = + rawOptions.modules.auto && moduleRegExp.test(resourcePath); - if (typeof rawOptions.modules.auto === 'boolean') { - const isModules = - rawOptions.modules.auto && /\.module\.\w+$/i.test(resourcePath); - - if (!isModules) { - return false; - } - } else if (rawOptions.modules.auto instanceof RegExp) { - const isModules = rawOptions.modules.auto.test(resourcePath); + if (!isModules) { + return false; + } + } else if (rawOptions.modules.auto instanceof RegExp) { + const isModules = rawOptions.modules.auto.test(resourcePath); - if (!isModules) { - return false; - } - } else if (typeof rawOptions.modules.auto === 'function') { - const isModule = rawOptions.modules.auto(resourcePath); + if (!isModules) { + return false; + } + } else if (typeof rawOptions.modules.auto === 'function') { + const isModule = rawOptions.modules.auto(resourcePath); - if (!isModule) { - return false; + if (!isModule) { + return false; + } } } - modulesOptions = { ...modulesOptions, ...rawOptions.modules }; + modulesOptions = { ...modulesOptions, ...(rawOptions.modules || {}) }; } if (typeof modulesOptions.mode === 'function') { diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 9b9d00a0..305e904b 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -3790,65 +3790,6 @@ Array [ exports[`"modules" option should work when the "getLocalIdent" option returns "false": warnings 1`] = `Array []`; -exports[`"modules" option should work with a modules.auto Boolean that is "false": errors 1`] = `Array []`; - -exports[`"modules" option should work with a modules.auto Boolean that is "false": module 1`] = ` -"// Imports -import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\"; -var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false); -// Module -___CSS_LOADER_EXPORT___.push([module.id, \\".relative {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); -// Exports -export default ___CSS_LOADER_EXPORT___; -" -`; - -exports[`"modules" option should work with a modules.auto Boolean that is "false": result 1`] = ` -Array [ - Array [ - "./modules/mode/relative.module.css", - ".relative { - color: red; -} -", - "", - ], -] -`; - -exports[`"modules" option should work with a modules.auto Boolean that is "false": warnings 1`] = `Array []`; - -exports[`"modules" option should work with a modules.auto Boolean that is "true": errors 1`] = `Array []`; - -exports[`"modules" option should work with a modules.auto Boolean that is "true": module 1`] = ` -"// Imports -import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\"; -var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false); -// Module -___CSS_LOADER_EXPORT___.push([module.id, \\"._1HULUYtV_Lb49H2tf3WnVr {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); -// Exports -___CSS_LOADER_EXPORT___.locals = { - \\"relative\\": \\"_1HULUYtV_Lb49H2tf3WnVr\\" -}; -export default ___CSS_LOADER_EXPORT___; -" -`; - -exports[`"modules" option should work with a modules.auto Boolean that is "true": result 1`] = ` -Array [ - Array [ - "./modules/mode/relative.module.css", - "._1HULUYtV_Lb49H2tf3WnVr { - color: red; -} -", - "", - ], -] -`; - -exports[`"modules" option should work with a modules.auto Boolean that is "true": warnings 1`] = `Array []`; - exports[`"modules" option should work with a modules.auto Function that returns "false": errors 1`] = `Array []`; exports[`"modules" option should work with a modules.auto Function that returns "false": module 1`] = ` @@ -11941,6 +11882,96 @@ Array [ exports[`"modules" option should work with the "[local]" placeholder for the "localIdentName" option: warnings 1`] = `Array []`; +exports[`"modules" option should work with the "auto" by default: errors 1`] = `Array []`; + +exports[`"modules" option should work with the "auto" by default: module 1`] = ` +"// Imports +import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\"; +var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false); +// Module +___CSS_LOADER_EXPORT___.push([module.id, \\"._1HULUYtV_Lb49H2tf3WnVr {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); +// Exports +___CSS_LOADER_EXPORT___.locals = { + \\"relative\\": \\"_1HULUYtV_Lb49H2tf3WnVr\\" +}; +export default ___CSS_LOADER_EXPORT___; +" +`; + +exports[`"modules" option should work with the "auto" by default: result 1`] = ` +Array [ + Array [ + "./modules/mode/relative.module.css", + "._1HULUYtV_Lb49H2tf3WnVr { + color: red; +} +", + "", + ], +] +`; + +exports[`"modules" option should work with the "auto" by default: warnings 1`] = `Array []`; + +exports[`"modules" option should work with the "auto" when it is "false": errors 1`] = `Array []`; + +exports[`"modules" option should work with the "auto" when it is "false": module 1`] = ` +"// Imports +import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\"; +var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false); +// Module +___CSS_LOADER_EXPORT___.push([module.id, \\".relative {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); +// Exports +export default ___CSS_LOADER_EXPORT___; +" +`; + +exports[`"modules" option should work with the "auto" when it is "false": result 1`] = ` +Array [ + Array [ + "./modules/mode/relative.module.css", + ".relative { + color: red; +} +", + "", + ], +] +`; + +exports[`"modules" option should work with the "auto" when it is "false": warnings 1`] = `Array []`; + +exports[`"modules" option should work with the "auto" when it is "true": errors 1`] = `Array []`; + +exports[`"modules" option should work with the "auto" when it is "true": module 1`] = ` +"// Imports +import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\"; +var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(false); +// Module +___CSS_LOADER_EXPORT___.push([module.id, \\"._1HULUYtV_Lb49H2tf3WnVr {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); +// Exports +___CSS_LOADER_EXPORT___.locals = { + \\"relative\\": \\"_1HULUYtV_Lb49H2tf3WnVr\\" +}; +export default ___CSS_LOADER_EXPORT___; +" +`; + +exports[`"modules" option should work with the "auto" when it is "true": result 1`] = ` +Array [ + Array [ + "./modules/mode/relative.module.css", + "._1HULUYtV_Lb49H2tf3WnVr { + color: red; +} +", + "", + ], +] +`; + +exports[`"modules" option should work with the "auto" when it is "true": warnings 1`] = `Array []`; + exports[`"modules" option should work with the \`exportGlobals\` option (the \`mode\` option is \`global\`): errors 1`] = `Array []`; exports[`"modules" option should work with the \`exportGlobals\` option (the \`mode\` option is \`global\`): module 1`] = ` diff --git a/test/modules-option.test.js b/test/modules-option.test.js index 52cefd26..88da8ad5 100644 --- a/test/modules-option.test.js +++ b/test/modules-option.test.js @@ -711,7 +711,21 @@ describe('"modules" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with a modules.auto Boolean that is "false"', async () => { + it('should work with the "auto" by default', async () => { + const compiler = getCompiler('./modules/mode/modules.js'); + const stats = await compile(compiler); + + expect( + getModuleSource('./modules/mode/relative.module.css', stats) + ).toMatchSnapshot('module'); + expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot( + 'result' + ); + expect(getWarnings(stats)).toMatchSnapshot('warnings'); + expect(getErrors(stats)).toMatchSnapshot('errors'); + }); + + it('should work with the "auto" when it is "false"', async () => { const compiler = getCompiler('./modules/mode/modules.js', { modules: { auto: false, @@ -729,7 +743,7 @@ describe('"modules" option', () => { expect(getErrors(stats)).toMatchSnapshot('errors'); }); - it('should work with a modules.auto Boolean that is "true"', async () => { + it('should work with the "auto" when it is "true"', async () => { const compiler = getCompiler('./modules/mode/modules.js', { modules: { auto: true,