scss-library/components/00_Global/_bemGenerator.styl

154 lines
4.2 KiB
Stylus
Raw Normal View History

2021-01-06 19:01:29 +01:00
/*
* 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'
_global_scope = {
_selector_blocks_to_generate: {}
_element-modifier: ()
_additional-element-modifier-blocks: ()
_last_element_name: null
_blocks_to_generate: ()
_element_modifier_block_stack: ()
_element_block_stack: ()
_element_modifier_stack: {}
}
2021-01-06 19:01:29 +01:00
2021-01-08 17:55:56 +01:00
_block_building_lane = ()
_element_building_lange = ()
_work_lane(lane, callback)
l = length(lane)
for _ in (0..l)
piece = pop(lane)
callback(piece)
2021-01-06 19:01:29 +01:00
/*
* Gets the selector of the parent class
*/
_get_parent_selector()
return split(' ', selector())[-1]
2021-01-06 19:01:29 +01:00
/*
* Gets the selector of the current block
*/
_get_block_selector()
2021-01-06 19:09:08 +01:00
return unquote(split('__', _get_parent_selector())[0])
2021-01-06 19:01:29 +01:00
2021-01-07 00:15:19 +01:00
_get_element_selector()
element--modifier = split('__', _get_parent_selector())[1]
return unquote(split('--', element--modifier)[0])
2021-01-06 19:01:29 +01:00
/*
* Generates a CSS class for an
* Block according to BEM
*/
RV-Block(name)
2021-01-08 17:55:56 +01:00
.{name}
push(_block_building_lane, {
elements: {}
block_modifiers: {}
})
2021-01-06 19:01:29 +01:00
{block}
2021-01-08 17:55:56 +01:00
for name, element in _global_scope['_selector_blocks_to_generate']
& &__{name}
for current_block in element.block_list
{current_block}
for modifier_name, modifier_block_list in element.modifier_list
&--{modifier_name}
for current_block in modifier_block_list
{current_block}
2021-01-06 19:01:29 +01:00
/*
* Generates a CSS class for an block modifier
* according to BEM.
*/
RV-Block__Modifier(name)
2021-01-07 00:15:19 +01:00
if 'RV-Block__Modifier' in called-from
2021-01-06 19:01:29 +01:00
{block}
2021-01-07 00:15:19 +01:00
else
&{_get_block_selector()}--{name}
{block}
2021-01-06 19:01:29 +01:00
/*
* Generates an CSS class for an element
* according to BEM. Also minds the element modifiers
* For more see RV-Element___Modifier
*/
RV-Element(name)
2021-01-08 17:55:56 +01:00
// Is there a block to build
block_index = (index(called-from, 'RV-Block'))
p(called-from block_index slice(called-from, 0, block_index))
2021-01-08 17:55:56 +01:00
if length(_block_building_lane) >= 1
push(_block_building_lane, block)
2021-01-07 00:15:19 +01:00
2021-01-08 17:55:56 +01:00
current_block = _block_building_lane[-1]
2021-01-08 17:55:56 +01:00
//Detect if the selector will be generated
//by an earlier call of RV-Element
if not 'RV-Element' in called-from
// Saving accumulated modifiers and blocks
element = {}
element['block_list'] = _global_scope['_element_block_stack']
element['modifier_list'] = _global_scope['_element_modifier_stack']
//Reseting
_global_scope['_element_block_stack'] = ()
_global_scope['_element_modifier_stack'] = {}
//Saving element
_global_scope['_selector_blocks_to_generate'][name] = element
_global_scope['_last_element_name'] = name
2021-01-06 19:01:29 +01:00
/*
* 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
2021-01-07 00:15:19 +01:00
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')