feat: allow generateScopedName configuration as a function

Author: gajus

README.md

@@ -170,14 +170,30 @@ NODE_ENV=production ./test
 
 ## Configuration
 
-|Name|Description|Default|
-|---|---|---|
-|`context`|Must match webpack [`context`](https://webpack.github.io/docs/configuration.html#context) configuration. [`css-loader`](https://github.com/webpack/css-loader) inherits `context` values from webpack. Other CSS module implementations might use different context resolution logic.|`process.cwd()`|
-|`exclude`| a RegExp that will exclude otherwise included files e.g., to exclude all styles from node_modules `exclude: 'node_modules'`|
-|`filetypes`|Configure [postcss syntax loaders](https://github.com/postcss/postcss#syntaxes) like sugerss, LESS and SCSS and extra plugins for them. ||
-|`generateScopedName`|Refer to [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names)|`[path]___[name]__[local]___[hash:base64:5]`|
-|`removeImport`|Remove the matching style import. This option is used to enable server-side rendering.|`false`|
-|`webpackHotModuleReloading`|Enables hot reloading of CSS in webpack|`false`|
+```js
+type FiletypeOptionsType = {|
+  +syntax: string,
+  +plugins?: $ReadOnlyArray<string>
+|};
+
+type FiletypesConfigurationType = {
+  [key: string]: FiletypeOptionsType
+};
+
+type GenerateScopedNameType = (localName: string, resourcePath: string) => string;
+
+type GenerateScopedNameConfigurationType = GenerateScopedNameType | string;
+
+```
+
+|Name|Type|Description|Default|
+|---|---|---|---|
+|`context`|`string`|Must match webpack [`context`](https://webpack.github.io/docs/configuration.html#context) configuration. [`css-loader`](https://github.com/webpack/css-loader) inherits `context` values from webpack. Other CSS module implementations might use different context resolution logic.|`process.cwd()`|
+|`exclude`|`string`|A RegExp that will exclude otherwise included files e.g., to exclude all styles from node_modules `exclude: 'node_modules'`|
+|`filetypes`|`?FiletypesConfigurationType`|Configure [postcss syntax loaders](https://github.com/postcss/postcss#syntaxes) like sugerss, LESS and SCSS and extra plugins for them. ||
+|`generateScopedName`|`?GenerateScopedNameConfigurationType`|Refer to [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names)|`[path]___[name]__[local]___[hash:base64:5]`|
+|`removeImport`|`boolean`|Remove the matching style import. This option is used to enable server-side rendering.|`false`|
+|`webpackHotModuleReloading`|`boolean`|Enables hot reloading of CSS in webpack|`false`|
 
 Missing a configuration? [Raise an issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/new?title=New%20configuration:).
 

package.json

@@ -6,6 +6,7 @@
   },
   "dependencies": {
     "ajv": "^4.11.4",
+    "ajv-keywords": "^2.1.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-types": "^6.19.0",
     "generic-names": "^1.0.2",

src/index.js

@@ -6,6 +6,7 @@ import {
 } from 'path';
 import babelPluginJsxSyntax from 'babel-plugin-syntax-jsx';
 import BabelTypes from 'babel-types';
+import ajvKeywords from 'ajv-keywords';
 import Ajv from 'ajv';
 import optionsSchema from './schemas/optionsSchema.json';
 import createObjectExpression from './createObjectExpression';
@@ -15,6 +16,8 @@ import replaceJsxExpressionContainer from './replaceJsxExpressionContainer';
 
 const ajv = new Ajv();
 
+ajvKeywords(ajv);
+
 const validate = ajv.compile(optionsSchema);
 
 export default ({

src/requireCssModule.js

@@ -15,6 +15,7 @@ import Parser from 'postcss-modules-parser';
 import Scope from 'postcss-modules-scope';
 import Values from 'postcss-modules-values';
 import type {
+  GenerateScopedNameConfigurationType,
   StyleModuleMapType
 } from './types';
 
@@ -80,18 +81,24 @@ const getTokens = (runner, cssSourceFilePath: string, filetypeOptions: ?Filetype
 };
 
 type OptionsType = {|
-  generateScopedName?: string,
   filetypes: FiletypesConfigurationType,
+  generateScopedName?: GenerateScopedNameConfigurationType,
   context?: string
 |};
 
 export default (cssSourceFilePath: string, options: OptionsType): StyleModuleMapType => {
   // eslint-disable-next-line prefer-const
   let runner;
 
-  const scopedName = genericNames(options.generateScopedName || '[path]___[name]__[local]___[hash:base64:5]', {
-    context: options.context || process.cwd()
-  });
+  let generateScopedName;
+
+  if (options.generateScopedName && typeof options.generateScopedName === 'function') {
+    generateScopedName = options.generateScopedName;
+  } else {
+    generateScopedName = genericNames(options.generateScopedName || '[path]___[name]__[local]___[hash:base64:5]', {
+      context: options.context || process.cwd()
+    });
+  }
 
   const filetypeOptions = getFiletypeOptions(cssSourceFilePath, options.filetypes);
 
@@ -110,7 +117,7 @@ export default (cssSourceFilePath: string, options: OptionsType): StyleModuleMap
     LocalByDefault,
     ExtractImports,
     new Scope({
-      generateScopedName: scopedName
+      generateScopedName
     }),
     new Parser({
       fetch

src/schemas/optionsSchema.json

@@ -29,7 +29,14 @@
       "type": "object"
     },
     "generateScopedName": {
-      "type": "string"
+      "oneOf": [
+        {
+          "type": "string"
+        },
+        {
+          "typeof": "function"
+        }
+      ]
     },
     "removeImport": {
       "type": "boolean"

src/types.js

@@ -7,3 +7,7 @@ export type StyleModuleMapType = {
 export type StyleModuleImportMapType = {
   [key: string]: StyleModuleMapType
 };
+
+export type GenerateScopedNameType = (localName: string, resourcePath: string) => string;
+
+export type GenerateScopedNameConfigurationType = GenerateScopedNameType | string;