fix: generate multi classes with modifiers (#43)

Author: ybiquitous

README.md

@@ -33,19 +33,19 @@ b()
 //=> 'block'
 
 b({ mod1: true, mod2: false })
-//=> 'block--mod1'
+//=> 'block block--mod1'
 
 b({ mod1: true, mod2: false, mod3: true })
-//=> 'block--mod1 block--mod3'
+//=> 'block block--mod1 block--mod3'
 
 b('element')
 //=> 'block__element'
 
 b('element', { mod1: true, mod2: false })
-//=> 'block__element--mod1'
+//=> 'block__element block__element--mod1'
 
 b('element', { mod1: true, mod2: false, mod3: true })
-//=> 'block__element--mod1 block__element--mod3'
+//=> 'block__element block__element--mod1 block__element--mod3'
 ```
 
 ### `elementDelimiter = '__'`
@@ -63,10 +63,10 @@ b('element')
 const b = block('block', { modifierDelimiter: '-' })
 
 b({ mod: true })
-//=> 'block-mod'
+//=> block 'block-mod'
 
 b('element', { mod: true })
-//=> 'block__element-mod'
+//=> 'block__element block__element-mod'
 ```
 
 ### `namespace = ''`
@@ -78,7 +78,7 @@ b()
 //=> 'ns-block'
 
 b('element', { mod1: true, mod2: true })
-//=> 'ns-block__element--mod1 ns-block__element--mod2'
+//=> 'ns-block__element ns-block__element--mod1 ns-block__element--mod2'
 ```
 
 ### `namespaceDelimiter = '-'`
@@ -90,7 +90,7 @@ b()
 //=> 'ns---block'
 
 b('element', { mod1: true, mod2: true })
-//=> 'ns---block__element--mod1 ns---block__element--mod2'
+//=> 'ns---block__element ns---block__element--mod1 ns---block__element--mod2'
 ```
 
 When `namespace` is not given, `namespaceDelimiter` will be ignored.
@@ -102,7 +102,7 @@ b()
 //=> 'block'
 
 b('element', { mod1: true, mod2: true })
-//=> 'block__element--mod1 block__element--mod2'
+//=> 'block__element block__element--mod1 block__element--mod2'
 ```
 
 ### `prefix = ''`
@@ -116,7 +116,7 @@ b()
 //=> 'pre---block'
 
 b('element', { mod1: true, mod2: true })
-//=> 'pre---block__element--mod1 pre---block__element--mod2'
+//=> 'pre---block__element pre---block__element--mod1 pre---block__element--mod2'
 ```
 
 ### `setup()`
@@ -136,7 +136,7 @@ setup({
 const b = block('block')
 
 b('element', { mod: true })
-//=> 'ns---block_element-mod'
+//=> 'ns---block_element ns---block_element-mod'
 ```
 
 ## Change Log

index.ts

@@ -73,7 +73,6 @@ export default function bem(
 
     return Object.keys(mods)
       .filter((mod) => (mods as Modifiers)[mod])
-      .map((mod) => `${base}${modifierDelimiter}${mod}`)
-      .join(' ')
+      .reduce((result, mod) => `${result} ${base}${modifierDelimiter}${mod}`, base)
   }
 }

test.ts

@@ -6,83 +6,83 @@ const testCases = [
     tested: () => block('block'),
     expectations: [
       'block',
-      'block--mod1',
-      'block--mod1 block--mod2',
+      'block block--mod1',
+      'block block--mod1 block--mod2',
       'block__element',
-      'block__element--mod1',
-      'block__element--mod1 block__element--mod2',
+      'block__element block__element--mod1',
+      'block__element block__element--mod1 block__element--mod2',
     ],
   },
   {
     description: '`elementDelimiter` option',
     tested: () => block('block', { elementDelimiter: '_' }),
     expectations: [
       'block',
-      'block--mod1',
-      'block--mod1 block--mod2',
+      'block block--mod1',
+      'block block--mod1 block--mod2',
       'block_element',
-      'block_element--mod1',
-      'block_element--mod1 block_element--mod2',
+      'block_element block_element--mod1',
+      'block_element block_element--mod1 block_element--mod2',
     ],
   },
   {
     description: '`modifierDelimiter` option',
     tested: () => block('block', { modifierDelimiter: '-' }),
     expectations: [
       'block',
-      'block-mod1',
-      'block-mod1 block-mod2',
+      'block block-mod1',
+      'block block-mod1 block-mod2',
       'block__element',
-      'block__element-mod1',
-      'block__element-mod1 block__element-mod2',
+      'block__element block__element-mod1',
+      'block__element block__element-mod1 block__element-mod2',
     ],
   },
   {
     description: '`namespace` option',
     tested: () => block('block', { namespace: 'ns' }),
     expectations: [
       'ns-block',
-      'ns-block--mod1',
-      'ns-block--mod1 ns-block--mod2',
+      'ns-block ns-block--mod1',
+      'ns-block ns-block--mod1 ns-block--mod2',
       'ns-block__element',
-      'ns-block__element--mod1',
-      'ns-block__element--mod1 ns-block__element--mod2',
+      'ns-block__element ns-block__element--mod1',
+      'ns-block__element ns-block__element--mod1 ns-block__element--mod2',
     ],
   },
   {
     description: '`namespaceDelimiter` option',
     tested: () => block('block', { namespace: 'ns', namespaceDelimiter: '---' }),
     expectations: [
       'ns---block',
-      'ns---block--mod1',
-      'ns---block--mod1 ns---block--mod2',
+      'ns---block ns---block--mod1',
+      'ns---block ns---block--mod1 ns---block--mod2',
       'ns---block__element',
-      'ns---block__element--mod1',
-      'ns---block__element--mod1 ns---block__element--mod2',
+      'ns---block__element ns---block__element--mod1',
+      'ns---block__element ns---block__element--mod1 ns---block__element--mod2',
     ],
   },
   {
     description: '`namespaceDelimiter` option without `namespace` option',
     tested: () => block('block', { namespaceDelimiter: '---' }),
     expectations: [
       'block',
-      'block--mod1',
-      'block--mod1 block--mod2',
+      'block block--mod1',
+      'block block--mod1 block--mod2',
       'block__element',
-      'block__element--mod1',
-      'block__element--mod1 block__element--mod2',
+      'block__element block__element--mod1',
+      'block__element block__element--mod1 block__element--mod2',
     ],
   },
   {
     description: '`prefix` option',
     tested: () => block('block', { prefix: 'pre---' }),
     expectations: [
       'pre---block',
-      'pre---block--mod1',
-      'pre---block--mod1 pre---block--mod2',
+      'pre---block pre---block--mod1',
+      'pre---block pre---block--mod1 pre---block--mod2',
       'pre---block__element',
-      'pre---block__element--mod1',
-      'pre---block__element--mod1 pre---block__element--mod2',
+      'pre---block__element pre---block__element--mod1',
+      'pre---block__element pre---block__element--mod1 pre---block__element--mod2',
     ],
   },
   {
@@ -93,17 +93,16 @@ const testCases = [
         modifierDelimiter: '-',
         namespace: 'ns',
         namespaceDelimiter: '---',
-        // prefix: 'pre---',
       })
       return block('block')
     },
     expectations: [
       'ns---block',
-      'ns---block-mod1',
-      'ns---block-mod1 ns---block-mod2',
+      'ns---block ns---block-mod1',
+      'ns---block ns---block-mod1 ns---block-mod2',
       'ns---block_element',
-      'ns---block_element-mod1',
-      'ns---block_element-mod1 ns---block_element-mod2',
+      'ns---block_element ns---block_element-mod1',
+      'ns---block_element ns---block_element-mod1 ns---block_element-mod2',
     ],
   },
 ]
@@ -114,6 +113,8 @@ testCases.forEach(({ description, tested, expectations }) => {
 
     it('returns block', () => {
       expect(b()).toBe(expectations[0])
+      expect(b({ mod1: false })).toBe(expectations[0])
+      expect(b({ mod1: false, mod2: false })).toBe(expectations[0])
     })
 
     it('returns block with modifier', () => {
@@ -161,16 +162,19 @@ describe('`setup()` additional case', () => {
       namespace: 'n',
       namespaceDelimiter: '=',
     })
-    expect(b('element', { mod: true })).toBe('n=block:element/mod')
+    expect(b('element', { mod: true }))
+      .toBe('n=block:element n=block:element/mod')
   })
 
   it('has no effect when empty options are passed', () => {
     setup({})
-    expect(block('block')('element', { mod: true })).toBe('ns---block_element-mod')
+    expect(block('block')('element', { mod: true }))
+      .toBe('ns---block_element ns---block_element-mod')
   })
 
   it('`prefix` option [deprecated]', () => {
     setup({ prefix: 'pre:', namespace: '' })
-    expect(block('block')('element', { mod: true })).toBe('pre:block_element-mod')
+    expect(block('block')('element', { mod: true }))
+      .toBe('pre:block_element pre:block_element-mod')
   })
 })