feat: customizable delimiters via new options (#17)

- `elementDelimiter`
- `modifierDelimiter`

Author: ybiquitous

README.md

@@ -5,7 +5,7 @@
 [![dependencies Status](https://david-dm.org/ybiquitous/bem-ts/status.svg)](https://david-dm.org/ybiquitous/bem-ts)
 [![MIT License](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-BEM class names generator for TypeScript
+BEM class names generator for TypeScript.
 
 Inspired by [`bem-cn`](https://npm.im/bem-cn).
 
@@ -40,6 +40,27 @@ b("element", { a: true, b: false, c: true });
 //=> "block__element--a block__element--c"
 ```
 
+### `elementDelimiter`
+
+```ts
+const b = block("block", { elementDelimiter: "_" });
+
+b("element");
+//=> "block_element"
+```
+
+### `modifierDelimiter`
+
+```ts
+const b = block("block", { modifierDelimiter: "-" });
+
+b({ a: true });
+//=> "block-a"
+
+b("element", { a: true });
+//=> "block__element-a"
+```
+
 ## Install
 
 ```sh

index.ts

@@ -1,6 +1,9 @@
 type Modifiers = { [key: string]: boolean; };
 
-export default function bem(block: string) {
+export default function bem(
+  block: string,
+  { elementDelimiter = "__", modifierDelimiter =  "--" } = {},
+) {
   return (elementOrModifiers?: string | Modifiers, modifiers?: Modifiers) => {
     if (!elementOrModifiers) {
       return block;
@@ -10,7 +13,7 @@ export default function bem(block: string) {
     let mods = modifiers;
 
     if (typeof elementOrModifiers === "string") {
-      base = `${base}__${elementOrModifiers}`;
+      base = `${base}${elementDelimiter}${elementOrModifiers}`;
     } else {
       mods = elementOrModifiers;
     }
@@ -21,7 +24,7 @@ export default function bem(block: string) {
 
     return Object.keys(mods)
       .filter((mod) => mods && mods[mod])
-      .map((mod) => `${base}--${mod}`)
+      .map((mod) => `${base}${modifierDelimiter}${mod}`)
       .join(" ");
   };
 }

test.ts

@@ -1,28 +1,88 @@
 import block from ".";
 
-const b = block("block");
+describe("default", () => {
+  const b = block("block");
 
-it("returns block", () => {
-  expect(b()).toBe("block");
-});
+  it("returns block", () => {
+    expect(b()).toBe("block");
+  });
 
-it("returns block with modifier", () => {
-  expect(b({ a: true, b: false })).toBe("block--a");
-});
+  it("returns block with modifier", () => {
+    expect(b({ a: true, b: false })).toBe("block--a");
+  });
 
-it("returns block with multiple modifiers", () => {
-  expect(b({ a: true, b: false, c: true })).toBe("block--a block--c");
-});
+  it("returns block with multiple modifiers", () => {
+    expect(b({ a: true, b: false, c: true })).toBe("block--a block--c");
+  });
+
+  it("returns block with element", () => {
+    expect(b("element")).toBe("block__element");
+  });
+
+  it("returns block with element and modifier", () => {
+    expect(b("element", { a: true, b: false })).toBe("block__element--a");
+  });
 
-it("returns block with element", () => {
-  expect(b("element")).toBe("block__element");
+  it("returns block with element and multiple modifiers", () => {
+    expect(b("element", { a: true, b: false, c: true }))
+      .toBe("block__element--a block__element--c");
+  });
 });
 
-it("returns block with element and modifier", () => {
-  expect(b("element", { a: true, b: false })).toBe("block__element--a");
+describe("`elementDelimiter` option", () => {
+  const b = block("block", { elementDelimiter: "_" });
+
+  it("returns block", () => {
+    expect(b()).toBe("block");
+  });
+
+  it("returns block with modifier", () => {
+    expect(b({ a: true, b: false })).toBe("block--a");
+  });
+
+  it("returns block with multiple modifiers", () => {
+    expect(b({ a: true, b: false, c: true })).toBe("block--a block--c");
+  });
+
+  it("returns block with element", () => {
+    expect(b("element")).toBe("block_element");
+  });
+
+  it("returns block with element and modifier", () => {
+    expect(b("element", { a: true, b: false })).toBe("block_element--a");
+  });
+
+  it("returns block with element and multiple modifiers", () => {
+    expect(b("element", { a: true, b: false, c: true }))
+      .toBe("block_element--a block_element--c");
+  });
 });
 
-it("returns block with element and multiple modifiers", () => {
-  expect(b("element", { a: true, b: false, c: true }))
-    .toBe("block__element--a block__element--c");
+describe("`modifierDelimiter` option", () => {
+  const b = block("block", { modifierDelimiter: "-" });
+
+  it("returns block", () => {
+    expect(b()).toBe("block");
+  });
+
+  it("returns block with modifier", () => {
+    expect(b({ a: true, b: false })).toBe("block-a");
+  });
+
+  it("returns block with multiple modifiers", () => {
+    expect(b({ a: true, b: false, c: true })).toBe("block-a block-c");
+  });
+
+  it("returns block with element", () => {
+    expect(b("element")).toBe("block__element");
+  });
+
+  it("returns block with element and modifier", () => {
+    expect(b("element", { a: true, b: false })).toBe("block__element-a");
+  });
+
+  it("returns block with element and multiple modifiers", () => {
+    expect(b("element", { a: true, b: false, c: true }))
+      .toBe("block__element-a block__element-c");
+  });
 });