diff --git a/packages/classname/classname.ts b/packages/classname/classname.ts index 92507149..d0367587 100644 --- a/packages/classname/classname.ts +++ b/packages/classname/classname.ts @@ -48,6 +48,9 @@ export type Preset = { v?: string } +const elemDelim = '-' +const modDelim = '_' + /** * BEM className configure function. * @@ -65,14 +68,15 @@ export type Preset = { */ export function withNaming(preset: Preset): ClassNameInitilizer { const nameSpace = preset.n || '' - const modValueDelimiter = preset.v || preset.m + const modDelimiter = preset.m || modDelim + const modValueDelimiter = preset.v || modDelimiter function stringify(b: string, e?: string, m?: NoStrictEntityMods | null, mix?: ClassNameList) { - const entityName = e ? nameSpace + b + preset.e + e : nameSpace + b + const entityName = e ? nameSpace + b + (preset.e || elemDelim) + e : nameSpace + b let className = entityName if (m) { - const modPrefix = ' ' + className + preset.m + const modPrefix = ' ' + className + modDelimiter for (const k in m) { if (m.hasOwnProperty(k)) { @@ -149,6 +153,6 @@ export function withNaming(preset: Preset): ClassNameInitilizer { * @see https://en.bem.info/methodology/naming-convention/#react-style */ export const cn = withNaming({ - e: '-', - m: '_', + e: elemDelim, + m: modDelim, }) diff --git a/packages/classname/test/classname.test.ts b/packages/classname/test/classname.test.ts index e6f736ee..f1a32f85 100644 --- a/packages/classname/test/classname.test.ts +++ b/packages/classname/test/classname.test.ts @@ -206,6 +206,21 @@ describe('@bem-react/classname', () => { expect(block('element', { mod: false })).toEqual('block__element') expect(block('element', { mod: 'value' })).toEqual('block__element block__element--mod_value') }) + + const partialCustomCn = withNaming({ + e: '--', + }) + + test('variants', () => { + const block = partialCustomCn('block') + + expect(block({ mod: true })).toEqual('block block_mod') + expect(block({ mod: false })).toEqual('block') + expect(block({ mod: 'value' })).toEqual('block block_mod_value') + expect(block('element', { mod: true })).toEqual('block--element block--element_mod') + expect(block('element', { mod: false })).toEqual('block--element') + expect(block('element', { mod: 'value' })).toEqual('block--element block--element_mod_value') + }) }) describe('carry', () => {