diff --git a/README.md b/README.md index 8010955..1e18bbc 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,7 @@ import { configure, DefaultBEMDelimiters } from 'bem-composer'; // Configure BEM constructor with custom delimiters. const cbem = configure({ + prefix: 'bem-', element: '__', modifier: '~~', modifierValue: '~' @@ -98,7 +99,7 @@ console.log( name: 'active', value: 'hover' }).toString() -); // block__icon~~active~hover +); // bem-block__icon~~active~hover ``` ## Curried API diff --git a/src/bem.test.ts b/src/bem.test.ts index cb99ff0..e695b29 100644 --- a/src/bem.test.ts +++ b/src/bem.test.ts @@ -259,6 +259,7 @@ describe('curried api', () => { describe('custom delimiters', () => { const cbem = configure({ + prefix: 'bem-', element: '__', modifier: '~~', modifierValue: '~' @@ -271,6 +272,7 @@ describe('custom delimiters', () => { }).toString() ).toBe( [ + 'bem-', BlockName, '__', ElementName, diff --git a/src/bem.ts b/src/bem.ts index 48616ed..96be525 100644 --- a/src/bem.ts +++ b/src/bem.ts @@ -8,6 +8,7 @@ import { import { block } from './block'; export const DefaultBEMDelimiters: BEMDelimiters = { + prefix: '', element: '--', modifier: '__', modifierValue: '-' diff --git a/src/block.ts b/src/block.ts index cda6999..60d2d97 100644 --- a/src/block.ts +++ b/src/block.ts @@ -30,7 +30,7 @@ export function block(name: string, delimiters: BEMDelimiters): BEMBlock { } const toString = (): string => { - return name; + return delimiters.prefix + name; }; const toSelector = (): string => { diff --git a/src/element.ts b/src/element.ts index 57323ad..dba95bb 100644 --- a/src/element.ts +++ b/src/element.ts @@ -22,7 +22,9 @@ export function element( } const toString = (): string => { - return name ? blockName + delimiters.element + name : blockName; + return delimiters.prefix + name + ? blockName + delimiters.element + name + : blockName; }; const toSelector = (): string => { diff --git a/src/modifier.ts b/src/modifier.ts index b763c3e..cb8748b 100644 --- a/src/modifier.ts +++ b/src/modifier.ts @@ -32,6 +32,7 @@ export function modifier( const toString = (): string => { return ( + delimiters.prefix + blockName + (elementName ? delimiters.element + elementName : '') + (modifierString ? delimiters.modifier + modifierString : '') diff --git a/src/types.ts b/src/types.ts index f3dc6b5..0701bf8 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,5 @@ export interface BEMDelimiters { + prefix: string; element: string; modifier: string; modifierValue: string;