Skip to content

Commit

Permalink
refactor: default values modules and module.auto are true (#1117)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
evilebottnawi authored Jul 21, 2020
1 parent e1c55e4 commit 0080f88
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 85 deletions.
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -546,7 +546,7 @@ module.exports = {
##### `auto`

Type: `Boolean|RegExp|Function`
Default: `'undefined'`
Default: `'true'`

Allows auto enable css modules based on filename.

Expand Down Expand Up @@ -968,7 +968,7 @@ module.exports = {
};
```

### `exportOnlyLocals`
##### `exportOnlyLocals`

Type: `Boolean`
Default: `false`
Expand Down
52 changes: 31 additions & 21 deletions src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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') {
Expand Down
149 changes: 90 additions & 59 deletions test/__snapshots__/modules-option.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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`] = `
Expand Down Expand Up @@ -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`] = `
Expand Down
18 changes: 16 additions & 2 deletions test/modules-option.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down

0 comments on commit 0080f88

Please sign in to comment.