scss-library/components/00_Global/_bemGenerator.styl
2021-01-09 16:28:36 +01:00

105 lines
3.0 KiB
Stylus

/*
* This is set of mixins to help generating
* CSS classes according to the Block__Element--Modifier pattern.
* It also helps nesting those classes in any fashion imaganible
* and still produces clean BEM CSS
*/
_css-prefix = 'RV'
// Cache for Blocks
_last_block_name = null
_element_building_lane = {}
_element_block_stack = ()
_block_modifier_building_lane = {}
_block_modifier_block_stack = ()
/*
* Generates a CSS class for an
* Block according to BEM
*/
RV-Block(name)
tow(name, block)
/*
* Generates a CSS class for an block modifier
* according to BEM.
*/
RV-Block__Modifier(name)
// Determining if we are inside a block or after a block
call_stack = _call_stack_till_first_block()
if 'RV-Block' in call_stack
// We are called inside a block
push(_block_modifier_block_stack, @block{block})
//Detect if the selector will be generated
//by an earlier call of RV-Element
if not 'RV-Block__Modifier' in call_stack
block_list = _pop_stack(_block_modifier_block_stack)
_block_modifier_building_lane[name] = {
block_list: block_list
}
else
// We are not called inside a block
// Is there a block to attach to
if _last_block_name != null
.{_last_block_name}--{name}
{block}
/*
* Generates an CSS class for an element
* according to BEM. Also minds the element modifiers
* For more see RV-Element___Modifier
*/
RV-Element(name)
attach('RV-Block', unquote('__' + name), block)
/* p(_block_building_lane)
* Generates a CSS class for an element modifier
* according to BEM. These are ment to be part of the
* content block of an element and since child-mixins
* are called first there is no way of knowing what the
* current element is named. To solve this, we store
* a callback for the modifier and add the element name
* from RV-Element
*/
RV-Element__Modifier(name)
counter = 0
for fn in called-from
if fn is 'RV-Element'
counter += 1
if counter <= 1
element_modifier_block_stack = _global_scope['_element_modifier_block_stack']
append(element_modifier_block_stack, block)
_global_scope['_element_modifier_block_stack'] = element_modifier_block_stack
//Is this modifier beeing included by another modifier
if not 'RV-Element__Modifier' in called-from
//No
//Is this modifier beeing called in in- or postfix
if not 'RV-Element' in called-from
//Yes
last_element_name = _global_scope['_last_element_name']
//Accesing the last generated element and appending the modifier
element = _global_scope['_selector_blocks_to_generate'][last_element_name]
modifier_list = element['modifier_list']
modifier_list[name] = _global_scope['_element_modifier_block_stack']
element['modifier_list'] = modifier_list
_global_scope['_selector_blocks_to_generate'][last_element_name] = element
else
//No
_global_scope['_element_modifier_stack'][name] = _global_scope['_element_modifier_block_stack']
_global_scope['_element_modifier_block_stack'] = ()
else
p('wurstwasser')