diff --git a/README.md b/README.md index b9763702..daec7159 100644 --- a/README.md +++ b/README.md @@ -549,7 +549,7 @@ module.exports = { Type: `Boolean|RegExp|Function` Default: `'true'` -Allows auto enable css modules based on filename. +Allows auto enable CSS modules based on filename. ###### `Boolean` @@ -694,39 +694,12 @@ module.exports = { }; ``` -##### `exportGlobals` - -Type: `Boolean` -Default: `false` - -Allow `css-loader` to export names from global class or id, so you can use that as local name. - -**webpack.config.js** - -```js -module.exports = { - module: { - rules: [ - { - test: /\.css$/i, - loader: 'css-loader', - options: { - modules: { - exportGlobals: true, - }, - }, - }, - ], - }, -}; -``` - ##### `localIdentName` Type: `String` Default: `'[hash:base64]'` -You can configure the generated ident with the `localIdentName` option. +Allows to configure the generated local ident name. See [loader-utils's documentation](https://github.com/webpack/loader-utils#interpolatename) for more information on options. Recommendations: @@ -763,7 +736,7 @@ module.exports = { Type: `String` Default: `compiler.context` -Allow to redefine basic loader context for local ident name. +Allows to redefine basic loader context for local ident name. **webpack.config.js** @@ -790,7 +763,7 @@ module.exports = { Type: `String` Default: `undefined` -Allow to add custom hash to generate more unique classes. +Allows to add custom hash to generate more unique classes. **webpack.config.js** @@ -842,7 +815,7 @@ module.exports = { Type: `Function` Default: `undefined` -You can also specify the absolute path to your custom `getLocalIdent` function to generate classname based on a different schema. +Allows to specify a function to generate the classname. By default we use built-in function to generate a classname. **webpack.config.js** @@ -872,8 +845,8 @@ module.exports = { Type: `Boolean` Default: `false` -Enable/disable ES modules named export for css classes. -Names of exported classes are converted to camelCase. +Enables/disables ES modules named export for locals. +Names of locals are converted to camelCase. > i It is not allowed to use JavaScript reserved words in css class names @@ -919,6 +892,33 @@ module.exports = { }; ``` +##### `exportGlobals` + +Type: `Boolean` +Default: `false` + +Allow `css-loader` to export names from global class or id, so you can use that as local name. + +**webpack.config.js** + +```js +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + loader: 'css-loader', + options: { + modules: { + exportGlobals: true, + }, + }, + }, + ], + }, +}; +``` + ##### `exportlocalsConvention` Type: `String` diff --git a/src/options.json b/src/options.json index dfb0df31..9629553a 100644 --- a/src/options.json +++ b/src/options.json @@ -37,6 +37,7 @@ "additionalProperties": false, "properties": { "auto": { + "description": "Allows auto enable CSS modules based on filename (https://github.com/webpack-contrib/css-loader#auto).", "anyOf": [ { "instanceof": "RegExp" @@ -50,6 +51,7 @@ ] }, "mode": { + "description": "Setup `mode` option (https://github.com/webpack-contrib/css-loader#mode).", "anyOf": [ { "enum": ["local", "global", "pure"] @@ -59,22 +61,23 @@ } ] }, - "exportGlobals": { - "type": "boolean" - }, "localIdentName": { + "description": "Allows to configure the generated local ident name (https://github.com/webpack-contrib/css-loader#localidentname).", "type": "string", "minLength": 1 }, "localIdentContext": { + "description": "Allows to redefine basic loader context for local ident name (https://github.com/webpack-contrib/css-loader#localidentcontext).", "type": "string", "minLength": 1 }, "localIdentHashPrefix": { + "description": "Allows to add custom hash to generate more unique classes (https://github.com/webpack-contrib/css-loader#localidenthashprefix).", "type": "string", "minLength": 1 }, "localIdentRegExp": { + "description": "Allows to specify custom RegExp for local ident name (https://github.com/webpack-contrib/css-loader#localidentregexp).", "anyOf": [ { "type": "string", @@ -86,10 +89,15 @@ ] }, "getLocalIdent": { + "description": "Allows to specify a function to generate the classname (https://github.com/webpack-contrib/css-loader#getlocalident).", "instanceof": "Function" }, "namedExport": { - "description": "Use the named export ES modules.", + "description": "Enables/disables ES modules named export for locals (https://github.com/webpack-contrib/css-loader#namedexport).", + "type": "boolean" + }, + "exportGlobals": { + "description": "Allows to export names from global class or id, so you can use that as local name (https://github.com/webpack-contrib/css-loader#exportglobals).", "type": "boolean" }, "exportLocalsConvention": { diff --git a/test/__snapshots__/validate-options.test.js.snap b/test/__snapshots__/validate-options.test.js.snap index a7fd7334..c48b0b1a 100644 --- a/test/__snapshots__/validate-options.test.js.snap +++ b/test/__snapshots__/validate-options.test.js.snap @@ -39,11 +39,12 @@ 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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: RegExp | function | boolean + -> Allows auto enable CSS modules based on filename (https://github.com/webpack-contrib/css-loader#auto). Details: * options.modules.auto should be an instance of RegExp. * options.modules.auto should be an instance of function. @@ -52,7 +53,8 @@ exports[`validate options should throw an error on the "modules" option with "{" exports[`validate options should throw an error on the "modules" option with "{"exportGlobals":"invalid"}" value 1`] = ` "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - - options.modules.exportGlobals should be a boolean." + - options.modules.exportGlobals should be a boolean. + -> Allows to export names from global class or id, so you can use that as local name (https://github.com/webpack-contrib/css-loader#exportglobals)." `; exports[`validate options should throw an error on the "modules" option with "{"exportLocalsConvention":"unknown"}" value 1`] = ` @@ -70,32 +72,37 @@ 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.getLocalIdent should be an instance of function." + - options.modules.getLocalIdent should be an instance of function. + -> Allows to specify a function to generate the classname (https://github.com/webpack-contrib/css-loader#getlocalident)." `; exports[`validate options should throw an error on the "modules" option with "{"localIdentContext":true}" value 1`] = ` "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - - options.modules.localIdentContext should be a non-empty string." + - options.modules.localIdentContext should be a non-empty string. + -> Allows to redefine basic loader context for local ident name (https://github.com/webpack-contrib/css-loader#localidentcontext)." `; exports[`validate options should throw an error on the "modules" option with "{"localIdentHashPrefix":true}" value 1`] = ` "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - - options.modules.localIdentHashPrefix should be a non-empty string." + - options.modules.localIdentHashPrefix should be a non-empty string. + -> Allows to add custom hash to generate more unique classes (https://github.com/webpack-contrib/css-loader#localidenthashprefix)." `; exports[`validate options should throw an error on the "modules" option with "{"localIdentName":true}" value 1`] = ` "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - - options.modules.localIdentName should be a non-empty string." + - options.modules.localIdentName should be a non-empty string. + -> Allows to configure the generated local ident name (https://github.com/webpack-contrib/css-loader#localidentname)." `; 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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: non-empty string | RegExp + -> Allows to specify custom RegExp for local ident name (https://github.com/webpack-contrib/css-loader#localidentregexp). Details: * options.modules.localIdentRegExp should be a non-empty string. * options.modules.localIdentRegExp should be an instance of RegExp." @@ -104,11 +111,12 @@ 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 { auto?, mode?, exportGlobals?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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: \\"local\\" | \\"global\\" | \\"pure\\" | function + -> Setup \`mode\` option (https://github.com/webpack-contrib/css-loader#mode). Details: * options.modules.mode should be one of these: \\"local\\" | \\"global\\" | \\"pure\\" @@ -118,11 +126,12 @@ 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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: \\"local\\" | \\"global\\" | \\"pure\\" | function + -> Setup \`mode\` option (https://github.com/webpack-contrib/css-loader#mode). Details: * options.modules.mode should be one of these: \\"local\\" | \\"global\\" | \\"pure\\" @@ -132,11 +141,12 @@ 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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: \\"local\\" | \\"global\\" | \\"pure\\" | function + -> Setup \`mode\` option (https://github.com/webpack-contrib/css-loader#mode). Details: * options.modules.mode should be one of these: \\"local\\" | \\"global\\" | \\"pure\\" @@ -146,11 +156,12 @@ 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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: \\"local\\" | \\"global\\" | \\"pure\\" | function + -> Setup \`mode\` option (https://github.com/webpack-contrib/css-loader#mode). Details: * options.modules.mode should be one of these: \\"local\\" | \\"global\\" | \\"pure\\" @@ -160,59 +171,59 @@ exports[`validate options should throw an error on the "modules" option with "{" exports[`validate options should throw an error on the "modules" option with "{"namedExport":"invalid"}" value 1`] = ` "Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - options.modules.namedExport should be a boolean. - -> Use the named export ES modules." + -> Enables/disables ES modules named export for locals (https://github.com/webpack-contrib/css-loader#namedexport)." `; 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? }" + object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? }" + object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? }" + object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? } + boolean | \\"local\\" | \\"global\\" | \\"pure\\" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, 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?, namedExport?, exportLocalsConvention?, exportOnlyLocals? }" + object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashPrefix?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, exportLocalsConvention?, exportOnlyLocals? }" `; exports[`validate options should throw an error on the "sourceMap" option with "true" value 1`] = `