diff --git a/README.md b/README.md index 4465737a..b9763702 100644 --- a/README.md +++ b/README.md @@ -534,7 +534,7 @@ module.exports = { context: path.resolve(__dirname, 'src'), localIdentHashPrefix: 'my-custom-hash', namedExport: true, - localsConvention: 'camelCase', + exportLocalsConvention: 'camelCase', exportOnlyLocals: false, }, }, @@ -758,55 +758,6 @@ module.exports = { }; ``` -##### `localsConvention` - -Type: `String` -Default: `'asIs'` - -Style of exported classnames. - -By default, the exported JSON keys mirror the class names (i.e `asIs` value). - -| Name | Type | Description | -| :-------------------: | :--------: | :----------------------------------------------------------------------------------------------- | -| **`'asIs'`** | `{String}` | Class names will be exported as is. | -| **`'camelCase'`** | `{String}` | Class names will be camelized, the original class name will not to be removed from the locals | -| **`'camelCaseOnly'`** | `{String}` | Class names will be camelized, the original class name will be removed from the locals | -| **`'dashes'`** | `{String}` | Only dashes in class names will be camelized | -| **`'dashesOnly'`** | `{String}` | Dashes in class names will be camelized, the original class name will be removed from the locals | - -**file.css** - -```css -.class-name { -} -``` - -**file.js** - -```js -import { className } from 'file.css'; -``` - -**webpack.config.js** - -```js -module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - loader: 'css-loader', - options: { - mode: 'local', - localsConvention: 'camelCase', - }, - }, - ], - }, -}; -``` - ##### `localIdentContext` Type: `String` @@ -861,14 +812,11 @@ module.exports = { }; ``` -##### `getLocalIdent` +##### `localIdentRegExp` -Type: `Function` +Type: `String|RegExp` Default: `undefined` -You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. -By default we use built-in function to generate a classname. - **webpack.config.js** ```js @@ -880,9 +828,7 @@ module.exports = { loader: 'css-loader', options: { modules: { - getLocalIdent: (context, localIdentName, localName, options) => { - return 'whatever_random_class_name'; - }, + localIdentRegExp: /page-(.*)\.css/i, }, }, }, @@ -891,11 +837,14 @@ module.exports = { }; ``` -##### `localIdentRegExp` +##### `getLocalIdent` -Type: `String|RegExp` +Type: `Function` Default: `undefined` +You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. +By default we use built-in function to generate a classname. + **webpack.config.js** ```js @@ -907,7 +856,9 @@ module.exports = { loader: 'css-loader', options: { modules: { - localIdentRegExp: /page-(.*)\.css/i, + getLocalIdent: (context, localIdentName, localName, options) => { + return 'whatever_random_class_name'; + }, }, }, }, @@ -968,6 +919,55 @@ module.exports = { }; ``` +##### `exportlocalsConvention` + +Type: `String` +Default: `'asIs'` + +Style of exported class names. + +By default, the exported JSON keys mirror the class names (i.e `asIs` value). + +| Name | Type | Description | +| :-------------------: | :--------: | :----------------------------------------------------------------------------------------------- | +| **`'asIs'`** | `{String}` | Class names will be exported as is. | +| **`'camelCase'`** | `{String}` | Class names will be camelized, the original class name will not to be removed from the locals | +| **`'camelCaseOnly'`** | `{String}` | Class names will be camelized, the original class name will be removed from the locals | +| **`'dashes'`** | `{String}` | Only dashes in class names will be camelized | +| **`'dashesOnly'`** | `{String}` | Dashes in class names will be camelized, the original class name will be removed from the locals | + +**file.css** + +```css +.class-name { +} +``` + +**file.js** + +```js +import { className } from 'file.css'; +``` + +**webpack.config.js** + +```js +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + loader: 'css-loader', + options: { + mode: 'local', + localsConvention: 'camelCase', + }, + }, + ], + }, +}; +``` + ##### `exportOnlyLocals` Type: `Boolean` diff --git a/src/options.json b/src/options.json index 4ec5b263..25eed479 100644 --- a/src/options.json +++ b/src/options.json @@ -95,7 +95,11 @@ } ] }, - "localsConvention": { + "namedExport": { + "description": "Use the named export ES modules.", + "type": "boolean" + }, + "exportLocalsConvention": { "description": "Style of exported classnames (https://github.com/webpack-contrib/css-loader#localsconvention).", "enum": [ "asIs", @@ -105,10 +109,6 @@ "dashesOnly" ] }, - "namedExport": { - "description": "Use the named export ES modules.", - "type": "boolean" - }, "exportOnlyLocals": { "description": "Export only locals (https://github.com/webpack-contrib/css-loader#exportonlylocals).", "type": "boolean" diff --git a/src/utils.js b/src/utils.js index 9afb971a..928a4c4c 100644 --- a/src/utils.js +++ b/src/utils.js @@ -127,8 +127,8 @@ function getModulesOptions(rawOptions, loaderContext) { // eslint-disable-next-line no-undefined localIdentRegExp: undefined, getLocalIdent, - localsConvention: 'asIs', namedExport: false, + exportLocalsConvention: 'asIs', exportOnlyLocals: false, }; @@ -440,7 +440,7 @@ function getExportCode(exports, icssReplacements, options) { }; for (const { name, value } of exports) { - switch (options.modules.localsConvention) { + switch (options.modules.exportLocalsConvention) { case 'camelCase': { addExportToLocalsCode(name, value); diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap index 776b3f31..c9d6f9a1 100644 --- a/test/__snapshots__/validate-options.test.js.snap +++ b/test/__snapshots__/validate-options.test.js.snap @@ -39,7 +39,7 @@ exports[`validate options should throw an error on the "importLoaders" option wi exports[`validate options should throw an error on the "modules" option with "{"auto":"invalid"}" 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules). Details: * options.modules.auto should be one of these: @@ -55,6 +55,13 @@ exports[`validate options should throw an error on the "modules" option with "{" - options.modules.exportGlobals should be a boolean." `; +exports[`validate options should throw an error on the "modules" option with "{"exportLocalsConvention":"unknown"}" value 1`] = ` +"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. + - options.modules.exportLocalsConvention should be one of these: + \\"asIs\\" | \\"camelCase\\" | \\"camelCaseOnly\\" | \\"dashes\\" | \\"dashesOnly\\" + -> Style of exported classnames (https://github.com/webpack-contrib/css-loader#localsconvention)." +`; + exports[`validate options should throw an error on the "modules" option with "{"exportOnlyLocals":"invalid"}" value 1`] = ` "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - options.modules.exportOnlyLocals should be a boolean. @@ -64,7 +71,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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules). Details: * options.modules.getLocalIdent should be one of these: @@ -92,7 +99,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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules). Details: * options.modules.localIdentRegExp should be one of these: @@ -102,17 +109,10 @@ exports[`validate options should throw an error on the "modules" option with "{" * options.modules.localIdentRegExp should be an instance of RegExp." `; -exports[`validate options should throw an error on the "modules" option with "{"localsConvention":"unknown"}" value 1`] = ` -"Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - - options.modules.localsConvention should be one of these: - \\"asIs\\" | \\"camelCase\\" | \\"camelCaseOnly\\" | \\"dashes\\" | \\"dashesOnly\\" - -> Style of exported classnames (https://github.com/webpack-contrib/css-loader#localsconvention)." -`; - 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules). Details: * options.modules.mode should be one of these: @@ -126,7 +126,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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules). Details: * options.modules.mode should be one of these: @@ -140,7 +140,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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules). Details: * options.modules.mode should be one of these: @@ -154,7 +154,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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> Enables/Disables CSS Modules and their configuration (https://github.com/webpack-contrib/css-loader#modules). Details: * options.modules.mode should be one of these: @@ -174,53 +174,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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? }" + object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? }" `; 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? }" + object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? }" `; 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? }" + object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? }" `; 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } -> 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, localsConvention?, namedExport?, exportOnlyLocals? }" + object { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? }" `; exports[`validate options should throw an error on the "sourceMap" option with "true" value 1`] = ` diff --git a/test/modules-option.test.js b/test/modules-option.test.js index 810e960b..99a653f0 100644 --- a/test/modules-option.test.js +++ b/test/modules-option.test.js @@ -865,7 +865,7 @@ describe('"modules" option', () => { { modules: { mode: 'local', - localsConvention: 'asIs', + exportLocalsConvention: 'asIs', }, } ); @@ -887,7 +887,7 @@ describe('"modules" option', () => { { modules: { mode: 'local', - localsConvention: 'camelCase', + exportLocalsConvention: 'camelCase', }, } ); @@ -909,7 +909,7 @@ describe('"modules" option', () => { { modules: { mode: 'local', - localsConvention: 'camelCaseOnly', + exportLocalsConvention: 'camelCaseOnly', }, } ); @@ -931,7 +931,7 @@ describe('"modules" option', () => { { modules: { mode: 'local', - localsConvention: 'dashes', + exportLocalsConvention: 'dashes', }, } ); @@ -953,7 +953,7 @@ describe('"modules" option', () => { { modules: { mode: 'local', - localsConvention: 'dashesOnly', + exportLocalsConvention: 'dashesOnly', }, } ); diff --git a/test/validate-options.test.js b/test/validate-options.test.js index 10d4dead..e74a3528 100644 --- a/test/validate-options.test.js +++ b/test/validate-options.test.js @@ -32,11 +32,11 @@ describe('validate options', () => { { auto: false }, { auto: /custom-regex/ }, { auto: () => true }, - { localsConvention: 'asIs' }, - { localsConvention: 'camelCase' }, - { localsConvention: 'camelCaseOnly' }, - { localsConvention: 'dashes' }, - { localsConvention: 'dashesOnly' }, + { exportLocalsConvention: 'asIs' }, + { exportLocalsConvention: 'camelCase' }, + { exportLocalsConvention: 'camelCaseOnly' }, + { exportLocalsConvention: 'dashes' }, + { exportLocalsConvention: 'dashesOnly' }, { namedExport: true }, { namedExport: false }, { exportOnlyLocals: true }, @@ -58,7 +58,7 @@ describe('validate options', () => { { localIdentRegExp: true }, { exportGlobals: 'invalid' }, { auto: 'invalid' }, - { localsConvention: 'unknown' }, + { exportLocalsConvention: 'unknown' }, { namedExport: 'invalid' }, { exportOnlyLocals: 'invalid' }, ],