Skip to content

Commit

Permalink
feat: allow to determinate css modules using the modules.auto option (
Browse files Browse the repository at this point in the history
  • Loading branch information
cap-Bernardito authored Apr 6, 2020
1 parent 519e5f4 commit c673cf4
Show file tree
Hide file tree
Showing 9 changed files with 309 additions and 15 deletions.
60 changes: 60 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -540,6 +540,66 @@ module.exports = {
};
```

##### `auto`

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

Allows auto enable css modules based on filename.

###### `Boolean`

Possible values:

- `true` - enable css modules for all files for which `/\.module\.\w+$/i.test(filename)` return true
- `false` - disable css modules

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: 'css-loader',
options: {
modules: {
// All files for which /\.module\.\w+$/i.test(filename) return true
auto: true,
},
},
},
],
},
};
```

###### `RegExp`

Enable css modules for files based on filename and satisfying `/youRegExp/.test(filename)` regex.

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: 'css-loader',
options: {
modules: {
// All files for which /youRegExp/i.test(filename) return true
auto: /youRegExp/i,
},
},
},
],
},
};
```

##### `mode`

Type: `String|Function`
Expand Down
3 changes: 2 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
getModuleCode,
getModulesPlugins,
normalizeSourceMap,
shouldUseModulesPlugins,
} from './utils';

export default function loader(content, map, meta) {
Expand All @@ -34,7 +35,7 @@ export default function loader(content, map, meta) {
const sourceMap = options.sourceMap || false;
const plugins = [];

if (options.modules) {
if (shouldUseModulesPlugins(options.modules, this.resourcePath)) {
plugins.push(...getModulesPlugins(options, this));
}

Expand Down
10 changes: 10 additions & 0 deletions src/options.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,16 @@
"type": "object",
"additionalProperties": false,
"properties": {
"auto": {
"anyOf": [
{
"type": "object"
},
{
"type": "boolean"
}
]
},
"mode": {
"anyOf": [
{
Expand Down
25 changes: 25 additions & 0 deletions src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,30 @@ function getFilter(filter, resourcePath, defaultFilter = null) {
};
}

function shouldUseModulesPlugins(modules, resourcePath) {
if (typeof modules === 'undefined') {
return false;
}

if (typeof modules === 'boolean') {
return modules;
}

if (typeof modules === 'string') {
return true;
}

if (typeof modules.auto === 'boolean') {
return modules.auto ? /\.module\.\w+$/i.test(resourcePath) : false;
}

if (modules.auto instanceof RegExp) {
return modules.auto.test(resourcePath);
}

return true;
}

function getModulesPlugins(options, loaderContext) {
let modulesOptions = {
mode: 'local',
Expand Down Expand Up @@ -405,4 +429,5 @@ export {
getImportCode,
getModuleCode,
getExportCode,
shouldUseModulesPlugins,
};
118 changes: 118 additions & 0 deletions test/__snapshots__/modules-option.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -3148,6 +3148,124 @@ Array [
exports[`"modules" option should work when the "getLocalIdent" option returns "false": warnings 1`] = `Array []`;
exports[`"modules" option should work with a modules.auto equal "false": errors 1`] = `Array []`;
exports[`"modules" option should work with a modules.auto equal "false": module 1`] = `
"// Imports
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.id, \\".relative {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]);
// Exports
module.exports = exports;
"
`;
exports[`"modules" option should work with a modules.auto equal "false": result 1`] = `
Array [
Array [
"./modules/mode/relative.module.css",
".relative {
color: red;
}
",
"",
],
]
`;
exports[`"modules" option should work with a modules.auto equal "false": warnings 1`] = `Array []`;
exports[`"modules" option should work with a modules.auto equal "true": errors 1`] = `Array []`;
exports[`"modules" option should work with a modules.auto equal "true": module 1`] = `
"// Imports
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.id, \\".y35Nud52-ZFXmqL6AWueX {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]);
// Exports
exports.locals = {
\\"relative\\": \\"y35Nud52-ZFXmqL6AWueX\\"
};
module.exports = exports;
"
`;
exports[`"modules" option should work with a modules.auto equal "true": result 1`] = `
Array [
Array [
"./modules/mode/relative.module.css",
".y35Nud52-ZFXmqL6AWueX {
color: red;
}
",
"",
],
]
`;
exports[`"modules" option should work with a modules.auto equal "true": warnings 1`] = `Array []`;
exports[`"modules" option should work with a modules.auto returns "false": errors 1`] = `Array []`;
exports[`"modules" option should work with a modules.auto returns "false": module 1`] = `
"// Imports
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.id, \\".relative {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]);
// Exports
module.exports = exports;
"
`;
exports[`"modules" option should work with a modules.auto returns "false": result 1`] = `
Array [
Array [
"./modules/mode/relative.module.css",
".relative {
color: red;
}
",
"",
],
]
`;
exports[`"modules" option should work with a modules.auto returns "false": warnings 1`] = `Array []`;
exports[`"modules" option should work with a modules.auto returns "true": errors 1`] = `Array []`;
exports[`"modules" option should work with a modules.auto returns "true": module 1`] = `
"// Imports
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.id, \\".y35Nud52-ZFXmqL6AWueX {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]);
// Exports
exports.locals = {
\\"relative\\": \\"y35Nud52-ZFXmqL6AWueX\\"
};
module.exports = exports;
"
`;
exports[`"modules" option should work with a modules.auto returns "true": result 1`] = `
Array [
Array [
"./modules/mode/relative.module.css",
".y35Nud52-ZFXmqL6AWueX {
color: red;
}
",
"",
],
]
`;
exports[`"modules" option should work with a modules.auto returns "true": warnings 1`] = `Array []`;
exports[`"modules" option should work with case \`animation\` (\`modules\` value is \`false)\`: errors 1`] = `Array []`;
exports[`"modules" option should work with case \`animation\` (\`modules\` value is \`false)\`: module 1`] = `
Expand Down
28 changes: 14 additions & 14 deletions test/__snapshots__/validate-options.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ exports[`validate options should throw an error on the "modules" option with "{"
exports[`validate options should throw an error on the "modules" option with "{"getLocalIdent":[]}" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules.getLocalIdent should be one of these:
Expand All @@ -79,7 +79,7 @@ exports[`validate options should throw an error on the "modules" option with "{"
exports[`validate options should throw an error on the "modules" option with "{"localIdentRegExp":true}" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules.localIdentRegExp should be one of these:
Expand All @@ -92,7 +92,7 @@ exports[`validate options should throw an error on the "modules" option with "{"
exports[`validate options should throw an error on the "modules" option with "{"mode":"globals"}" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules.mode should be one of these:
Expand All @@ -106,7 +106,7 @@ exports[`validate options should throw an error on the "modules" option with "{"
exports[`validate options should throw an error on the "modules" option with "{"mode":"locals"}" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules.mode should be one of these:
Expand All @@ -120,7 +120,7 @@ exports[`validate options should throw an error on the "modules" option with "{"
exports[`validate options should throw an error on the "modules" option with "{"mode":"pures"}" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules.mode should be one of these:
Expand All @@ -134,7 +134,7 @@ exports[`validate options should throw an error on the "modules" option with "{"
exports[`validate options should throw an error on the "modules" option with "{"mode":true}" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules.mode should be one of these:
Expand All @@ -148,53 +148,53 @@ exports[`validate options should throw an error on the "modules" option with "{"
exports[`validate options should throw an error on the "modules" option with "globals" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules should be a boolean.
* options.modules should be one of these:
\\"local\\" | \\"global\\" | \\"pure\\"
* options.modules should be an object:
object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
`;
exports[`validate options should throw an error on the "modules" option with "locals" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules should be a boolean.
* options.modules should be one of these:
\\"local\\" | \\"global\\" | \\"pure\\"
* options.modules should be an object:
object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
`;
exports[`validate options should throw an error on the "modules" option with "pures" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules should be a boolean.
* options.modules should be one of these:
\\"local\\" | \\"global\\" | \\"pure\\"
* options.modules should be an object:
object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
`;
exports[`validate options should throw an error on the "modules" option with "true" value 1`] = `
"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options.modules should be one of these:
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
-> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules).
Details:
* options.modules should be a boolean.
* options.modules should be one of these:
\\"local\\" | \\"global\\" | \\"pure\\"
* options.modules should be an object:
object { mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }"
`;
exports[`validate options should throw an error on the "onlyLocals" option with "true" value 1`] = `
Expand Down
5 changes: 5 additions & 0 deletions test/fixtures/modules/mode/modules.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import relative from './relative.module.css';

__export__ = relative;

export default relative;
3 changes: 3 additions & 0 deletions test/fixtures/modules/mode/relative.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.relative {
color: red;
}
Loading

0 comments on commit c673cf4

Please sign in to comment.