Merge pull request #109 from Akkuma/custom-localsConvention

Added custom function support to localsConvention

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.2.0
+
+### Changed
+
+- [`localsConvention` option] now supports a custom function `(originalClassName: string, generatedClassName: string, inputFile: string) => className: string`
+
 ## 3.1.0
 
 ### Added

README.md

@@ -195,10 +195,10 @@ postcss([
 
 ### localsConvention
 
-Type: `String`
+Type: `String | (originalClassName: string, generatedClassName: string, inputFile: string) => className: string`
 Default: `null`
 
-Style of exported classnames.
+Style of exported classnames, the keys in your json.
 
 |         Name          |    Type    | Description                                                                                      |
 | :-------------------: | :--------: | :----------------------------------------------------------------------------------------------- |
@@ -207,6 +207,8 @@ Style of exported classnames.
 |    **`'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 |
 
+In lieu of a string, a custom function can generate the exported class names.
+
 ## Integration with templates
 
 The plugin only transforms CSS classes to CSS modules.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-modules",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "PostCSS plugin to use CSS Modules everywhere",
   "main": "build/index.js",
   "keywords": [

src/index.js

@@ -90,8 +90,15 @@ module.exports = postcss.plugin(PLUGIN_NAME, (opts = {}) => {
     if (out) css.prepend(out);
 
     if (opts.localsConvention) {
+      const isFunc = typeof opts.localsConvention === 'function';
       parser.exportTokens = Object.entries(parser.exportTokens).reduce(
         (tokens, [className, value]) => {
+          if (isFunc) {
+            tokens[opts.localsConvention(className, value, inputFile)] = value;
+
+            return tokens;
+          }
+
           switch (opts.localsConvention) {
             case "camelCase":
               tokens[className] = value;

test/test.js

@@ -180,6 +180,30 @@ it("processes localsConvention with dashes option", async () => {
   });
 });
 
+
+it("processes localsConvention with function option", async () => {
+  const sourceFile = path.join(fixturesPath, "in", "camelCase.css");
+  const source = fs.readFileSync(sourceFile).toString();
+  const jsonFile = path.join(fixturesPath, "in", "camelCase.css.json");
+
+  if (fs.existsSync(jsonFile)) fs.unlinkSync(jsonFile);
+
+  await postcss([
+    plugin({ generateScopedName, localsConvention: (className) => {
+      return className.replace('camel-case', 'cc');
+    } }),
+  ]).process(source, { from: sourceFile });
+
+  const json = fs.readFileSync(jsonFile).toString();
+  fs.unlinkSync(jsonFile);
+
+  expect(JSON.parse(json)).toMatchObject({
+    cc: "_camelCase_camel-case",
+    'cc-extra': "_camelCase_camel-case-extra",
+    FooBar: "_camelCase_FooBar",
+  });
+});
+
 it("processes hashPrefix option", async () => {
   const generateScopedName = "[hash:base64:5]";
   const hashPrefix = "prefix";