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

120 lines
2.9 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'
_element-modifier = ()
2021-01-07 00:15:19 +01:00
_additional-element-modifier-blocks = ()
2021-01-06 19:01:29 +01:00
/*
* Gets the selector of the parent class
*/
_get_parent_selector()
return split(' ', selector())[-1]
/*
* 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()
p(_get_parent_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-06 19:09:08 +01:00
.{_css-prefix}-{name}
2021-01-06 19:01:29 +01:00
{block}
2021-01-07 00:15:19 +01:00
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}
_create_element(name, block)
{block}
// Checking for modifiers
l = length(_element-modifier) - 1
for i in range(0, l)
modifier = pop(_element-modifier)
callback = modifier['callback']
// Calling the modifiers block,
// passing the name of the element
callback(
element: name,
name: modifier['name'],
block_list: modifier['block_list']
)
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
*/
2021-01-07 00:15:19 +01:00
RV-Element(name)
2021-01-06 19:09:08 +01:00
block-selector = _get_block_selector()
2021-01-06 19:01:29 +01:00
// Are we in a block?
2021-01-06 19:09:08 +01:00
if block-selector != '&'
2021-01-06 19:01:29 +01:00
//Create Selector and output the CSS for the element
2021-01-07 00:15:19 +01:00
//Detect if the selector will be generated
//by an earlier call of RV-Element
if 'RV-Element' in called-from
_create_element(name, block)
else
{block-selector}__{name}
_create_element(name, block)
2021-01-06 19:09:08 +01:00
else
warn('No block found. Creating One instead')
+RV-Block(name)
{block}
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)
2021-01-07 00:15:19 +01:00
if 'RV-Element__Modifier' in called-from
//What the actual fuch this language is to utterly buggy
push(_additional-element-modifier-blocks, @block{block})
else
callback = @(element, name, block_list){
&{_get_block_selector()}__{element}--{name}{
for current_block in block_list{
{current_block}
}
}
2021-01-06 19:01:29 +01:00
}
2021-01-07 00:15:19 +01:00
block_list = ()
push(block_list, @block{block})
l = length(_additional-element-modifier-blocks)
for i in range(0, l)
b = pop(_additional-element-modifier-blocks)
push(block_list, b)
push(_element-modifier, {
callback: callback
name: name
block_list: block_list,
})