reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Advanced BEM generator with overridung

Browse Source
This commit is contained in:
reverend 2021-01-07 00:15:19 +01:00
parent fff7e73064
commit a1c4a6f883
1 changed files with 59 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/00_Global/_bemGenerator.styl
View File

@ -7,6 +7,7 @@
_css-prefix = 'RV' _css-prefix = 'RV'
_element-modifier = () _element-modifier = ()
_additional-element-modifier-blocks = ()
/* /*
* Gets the selector of the parent class * Gets the selector of the parent class
@ -20,6 +21,11 @@ _get_parent_selector()
_get_block_selector() _get_block_selector()
return unquote(split('__', _get_parent_selector())[0]) return unquote(split('__', _get_parent_selector())[0])
_get_element_selector()
p(_get_parent_selector())
element--modifier = split('__', _get_parent_selector())[1]
return unquote(split('--', element--modifier)[0])
/* /*
* Generates a CSS class for an * Generates a CSS class for an
* Block according to BEM * Block according to BEM
@ -27,40 +33,52 @@ _get_block_selector()
RV-Block(name) RV-Block(name)
.{_css-prefix}-{name} .{_css-prefix}-{name}
{block} {block}
/* /*
* Generates a CSS class for an block modifier * Generates a CSS class for an block modifier
* according to BEM. * according to BEM.
*/ */
RV-Block__Modifier(name) RV-Block__Modifier(name)
&{_get_block_selector()}--{name} if 'RV-Block__Modifier' in called-from
{block} {block}
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']
)
/* /*
* Generates an CSS class for an element * Generates an CSS class for an element
* according to BEM. Also minds the element modifiers * according to BEM. Also minds the element modifiers
* For more see RV-Element___Modifier * For more see RV-Element___Modifier
*/ */
RV-Element(name) RV-Element(name)
block-selector = _get_block_selector() block-selector = _get_block_selector()
// Are we in a block? // Are we in a block?
if block-selector != '&' if block-selector != '&'
//Create Selector and output the CSS for the element //Create Selector and output the CSS for the element
{block-selector}__{name}
{block} //Detect if the selector will be generated
//by an earlier call of RV-Element
// Checking for modifiers if 'RV-Element' in called-from
l = length(_element-modifier) - 1 _create_element(name, block)
for i in range(0, l) else
modifier = pop(_element-modifier) {block-selector}__{name}
callback = modifier['callback'] _create_element(name, block)
// Calling the modifiers block,
// passing the name of the element
callback(
element: name,
name: modifier['name'],
modifier_block: modifier['block']
)
else else
warn('No block found. Creating One instead') warn('No block found. Creating One instead')
+RV-Block(name) +RV-Block(name)
@ -75,13 +93,27 @@ RV-Element(name)
* from RV-Element * from RV-Element
*/ */
RV-Element__Modifier(name) RV-Element__Modifier(name)
callback = @(element, name, modifier_block){ if 'RV-Element__Modifier' in called-from
&{_get_block_selector()}__{element}--{name}{ //What the actual fuch this language is to utterly buggy
{modifier_block} 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}
}
}
} }
} block_list = ()
push(_element-modifier, { push(block_list, @block{block})
callback: callback l = length(_additional-element-modifier-blocks)
name: name for i in range(0, l)
block: block, b = pop(_additional-element-modifier-blocks)
}) push(block_list, b)
push(_element-modifier, {
callback: callback
name: name
block_list: block_list,
})