feat: support multiple namespaces (#169)

Author: ybiquitous

README.md

@@ -57,12 +57,12 @@ b("element", { mod1: true, mod2: false, mod3: true });
 
 ## Options
 
-| Name                                        | Type     | Default |
-| ------------------------------------------- | -------- | ------- |
-| [`elementDelimiter`](#elementdelimiter)     | `string` | `"__"`  |
-| [`modifierDelimiter`](#modifierdelimiter)   | `string` | `"--"`  |
-| [`namespace`](#namespace)                   | `string` | `""`    |
-| [`namespaceDelimiter`](#namespacedelimiter) | `string` | `"-"`   |
+| Name                                        | Type                 | Default |
+| ------------------------------------------- | -------------------- | ------- |
+| [`elementDelimiter`](#elementdelimiter)     | `string`             | `"__"`  |
+| [`modifierDelimiter`](#modifierdelimiter)   | `string`             | `"--"`  |
+| [`namespace`](#namespace)                   | `string`, `string[]` | `""`    |
+| [`namespaceDelimiter`](#namespacedelimiter) | `string`             | `"-"`   |
 
 ### `elementDelimiter`
 
@@ -97,6 +97,16 @@ b("element", { mod1: true, mod2: true });
 //=> "ns-block__element ns-block__element--mod1 ns-block__element--mod2"
 ```
 
+```ts
+const b = block("block", { namespace: ["ns1", "ns2"] });
+
+b();
+//=> "ns1-ns2-block"
+
+b("element", { mod1: true, mod2: true });
+//=> "ns1-ns2-block__element ns1-ns2-block__element--mod1 ns1-ns2-block__element--mod2"
+```
+
 ### `namespaceDelimiter`
 
 ```ts

index.ts

@@ -44,8 +44,12 @@ export default function bem(block: string, options: PartialOptions = {}) {
     ...options,
   };
 
-  const nsDelim = namespace ? namespaceDelimiter : "";
-  const baseBlock = `${namespace}${nsDelim}${block}`;
+  const namespaces = ([] as string[])
+    .concat(namespace)
+    .filter(Boolean) // compact
+    .reduce((joined, ns) => joined + `${ns}${namespaceDelimiter}`, "");
+
+  const baseBlock = `${namespaces}${block}`;
 
   return function bemBlock(elementOrModifiers?: string | Modifiers, modifiers?: Modifiers) {
     let base = baseBlock;

test.ts

@@ -50,6 +50,30 @@ const testCases = [
       "ns-block__element ns-block__element--mod1 ns-block__element--mod2",
     ],
   },
+  {
+    description: "`namespace` option (array)",
+    tested: () => block("block", { namespace: ["ns1", "ns2"] }),
+    expectations: [
+      "ns1-ns2-block",
+      "ns1-ns2-block ns1-ns2-block--mod1",
+      "ns1-ns2-block ns1-ns2-block--mod1 ns1-ns2-block--mod2",
+      "ns1-ns2-block__element",
+      "ns1-ns2-block__element ns1-ns2-block__element--mod1",
+      "ns1-ns2-block__element ns1-ns2-block__element--mod1 ns1-ns2-block__element--mod2",
+    ],
+  },
+  {
+    description: "`namespace` option (empty array)",
+    tested: () => block("block", { namespace: [] }),
+    expectations: [
+      "block",
+      "block block--mod1",
+      "block block--mod1 block--mod2",
+      "block__element",
+      "block__element block__element--mod1",
+      "block__element block__element--mod1 block__element--mod2",
+    ],
+  },
   {
     description: "`namespaceDelimiter` option",
     tested: () => block("block", { namespace: "ns", namespaceDelimiter: "---" }),