From de3a09cfac13cdc88914e605e3c9c348cae7ba63 Mon Sep 17 00:00:00 2001 From: cap-Bernardito Date: Sat, 4 Apr 2020 12:28:25 +0300 Subject: [PATCH] feat: auto resolving css-modules import (Issue #994) --- README.md | 43 ++++++++++++++++++- .../__snapshots__/modules-option.test.js.snap | 37 ++++++++-------- test/fixtures/modules/issue-1063/global.css | 8 ++-- test/fixtures/modules/issue-1063/local.css | 4 +- test/modules-option.test.js | 2 +- 5 files changed, 67 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index 8020201e..0d9f7fb7 100644 --- a/README.md +++ b/README.md @@ -541,11 +541,17 @@ module.exports = { ##### `mode` -Type: `String` +Type: `String|Function` Default: `'local'` Setup `mode` option. You can omit the value when you want `local` mode. +###### `String` + +Possible values: + +`local`, `global`, `pure` + **webpack.config.js** ```js @@ -566,6 +572,41 @@ module.exports = { }; ``` +###### `Function` + +Allows set different values modules.mode based on filename + +Possible return values: + +`local`, `global`, `pure` + +**webpack.config.js** + +```js +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + loader: 'css-loader', + options: { + modules: { + // Callback must return "local", "global" or "pure" + mode: (filename) => { + if (/global.css$/i.test(filename)) { + return 'global'; + } + + return 'local'; + }, + }, + }, + }, + ], + }, +}; +``` + ##### `localIdentName` Type: `String` diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 06f58f11..ae8349df 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -377,7 +377,7 @@ exports[`"modules" option issue #1063 throw error: module 1`] = ` var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\".className {\\\\n color: green;\\\\n}\\\\n\\\\n:global(.otherClass) {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\".classNameLocalFile {\\\\n color: green;\\\\n}\\\\n\\\\n:global(.otherClassLocalFile) {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports module.exports = exports; " @@ -388,26 +388,26 @@ exports[`"modules" option issue #1063 throw error: module 2`] = ` var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\".className {\\\\n color: green;\\\\n}\\\\n\\\\n:local(.otherClass) {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\".classNameGlobalFile {\\\\n color: black;\\\\n}\\\\n\\\\n:local(.otherClassGlobalFile) {\\\\n color: coral;\\\\n}\\\\n\\", \\"\\"]); // Exports module.exports = exports; " `; exports[`"modules" option issue #1063 throw error: result 1`] = ` -".className { +".classNameLocalFile { color: green; } -:global(.otherClass) { +:global(.otherClassLocalFile) { color: blue; } -.className { - color: green; +.classNameGlobalFile { + color: black; } -:local(.otherClass) { - color: blue; +:local(.otherClassGlobalFile) { + color: coral; } " `; @@ -421,10 +421,10 @@ exports[`"modules" option issue #1063: module 1`] = ` var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\"._1iR-jQngOXizCZOLZck-4P {\\\\n color: green;\\\\n}\\\\n\\\\n.otherClass {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\"._2cZDGA9F7Kx1vfQmWcLP51 {\\\\n color: green;\\\\n}\\\\n\\\\n.otherClassLocalFile {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { - \\"className\\": \\"_1iR-jQngOXizCZOLZck-4P\\" + \\"classNameLocalFile\\": \\"_2cZDGA9F7Kx1vfQmWcLP51\\" }; module.exports = exports; " @@ -435,30 +435,29 @@ exports[`"modules" option issue #1063: module 2`] = ` var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\"._2WZy6LhVz_KGVbdNCAmL6C {\\\\n color: green;\\\\n}\\\\n\\\\n._7mafm73rmgiKuViZtzNmn {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\".classNameGlobalFile {\\\\n color: black;\\\\n}\\\\n\\\\n._2rcag09JpwrP4_hfyyRmm- {\\\\n color: coral;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { - \\"className\\": \\"_2WZy6LhVz_KGVbdNCAmL6C\\", - \\"otherClass\\": \\"_7mafm73rmgiKuViZtzNmn\\" + \\"otherClassGlobalFile\\": \\"_2rcag09JpwrP4_hfyyRmm-\\" }; module.exports = exports; " `; exports[`"modules" option issue #1063: result 1`] = ` -"._1iR-jQngOXizCZOLZck-4P { +"._2cZDGA9F7Kx1vfQmWcLP51 { color: green; } -.otherClass { +.otherClassLocalFile { color: blue; } -._2WZy6LhVz_KGVbdNCAmL6C { - color: green; +.classNameGlobalFile { + color: black; } -._7mafm73rmgiKuViZtzNmn { - color: blue; +._2rcag09JpwrP4_hfyyRmm- { + color: coral; } " `; diff --git a/test/fixtures/modules/issue-1063/global.css b/test/fixtures/modules/issue-1063/global.css index 07fafd0b..95eb9774 100644 --- a/test/fixtures/modules/issue-1063/global.css +++ b/test/fixtures/modules/issue-1063/global.css @@ -1,7 +1,7 @@ -.className { - color: green; +.classNameGlobalFile { + color: black; } -:local(.otherClass) { - color: blue; +:local(.otherClassGlobalFile) { + color: coral; } diff --git a/test/fixtures/modules/issue-1063/local.css b/test/fixtures/modules/issue-1063/local.css index e5089557..f68ef05a 100644 --- a/test/fixtures/modules/issue-1063/local.css +++ b/test/fixtures/modules/issue-1063/local.css @@ -1,7 +1,7 @@ -.className { +.classNameLocalFile { color: green; } -:global(.otherClass) { +:global(.otherClassLocalFile) { color: blue; } diff --git a/test/modules-option.test.js b/test/modules-option.test.js index e819a187..b62a7084 100644 --- a/test/modules-option.test.js +++ b/test/modules-option.test.js @@ -570,7 +570,7 @@ describe('"modules" option', () => { const compiler = getCompiler('./modules/issue-1063/issue-1063.js', { modules: { mode: (resourcePath) => { - if (resourcePath === 'global.css') { + if (/global.css$/i.test(resourcePath)) { return 'global'; }