First Comopnent using the bem generator

This commit is contained in:
reverend 2021-01-11 20:50:07 +01:00
parent 5a503eec70
commit fb5fa8ce6c
3 changed files with 45 additions and 100 deletions

View File

@ -7,43 +7,6 @@
@import './_laneHandling' @import './_laneHandling'
_css-prefix = 'RV' _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: {}
}
_block_building_lane = ()
_element_building_lange = ()
_work_lane(lane, callback)
l = length(lane)
for _ in (0..l)
piece = pop(lane)
callback(piece)
/*
* Gets the selector of the parent class
*/
_get_parent_selector()
return split(' ', selector())[-1]
/*
* Gets the selector of the current block
*/
_get_block_selector()
return unquote(split('__', _get_parent_selector())[0])
_get_element_selector()
element--modifier = split('__', _get_parent_selector())[1]
return unquote(split('--', element--modifier)[0])
/* /*
@ -51,6 +14,7 @@ _get_element_selector()
* Block according to BEM * Block according to BEM
*/ */
RV-Block(block_name) RV-Block(block_name)
_pop_lane('element_aliases')
b = @block{ b = @block{
{block} {block}
& .{block_name}{ & .{block_name}{
@ -78,6 +42,8 @@ RV-Block(block_name)
else else
.{block_name} .{block_name}
{b} {b}
_reset_aliases()
/* /*
* Generates a CSS class for an block modifier * Generates a CSS class for an block modifier
@ -115,21 +81,23 @@ RV-Block__Modifier(block_modifier_name)
*/ */
RV-Element(element_name) RV-Element(element_name)
_push_onto_stack(block) _push_onto_stack(block)
//Detect if the selector will be generated //Detect if the selector will be generated
//by an earlier call of RV-Element //by an earlier call of RV-Element
if not 'RV-Element' in called-from if not 'RV-Element' in called-from
// Saving accumulated modifiers and blocks // Saving accumulated modifiers and blocks
for alias in _pop_stack('element_aliases')
_set_alias(alias, element_name)
stack_name = 'elements_to_generate' stack_name = 'elements_to_generate'
if 'RV-Block__Modifier' in called-from if 'RV-Block__Modifier' in called-from
stack_name = 'block_modifier_elements_to_generate' stack_name = 'block_modifier_elements_to_generate'
element_name = _get_alias(element_name)
element_block = @block{ element_block = @block{
&__{element_name}{ &__{element_name}{
for sub_block in _pop_stack(){ for sub_block in _pop_stack(){
{sub_block} {sub_block}
} }
&^[-3..-3]__{element_name}{ &^[-3..-3]__{element_name}{
for modifier_block in _pop_stack('element_modifiers_to_generate'){ for modifier_block in _pop_stack('element_modifiers_to_generate'){
{modifier_block} {modifier_block}
@ -140,7 +108,8 @@ RV-Element(element_name)
_push_onto_stack(element_block, stack_name) _push_onto_stack(element_block, stack_name)
_set_last_name(element_name) _set_last_name(element_name)
else
_push_onto_stack(element_name, 'element_aliases')
/* /*
* Generates a CSS class for an element modifier * Generates a CSS class for an element modifier

View File

@ -1,7 +1,9 @@
_lanes = {} _lanes = {}
_stacks = {} _stacks = {}
_aliases = {}
_last_name = {} _last_name = {}
_block_type(block_type) _block_type(block_type)
if block_type == null if block_type == null
@ -118,3 +120,30 @@ _pop_lane(block_type=null)
return lane return lane
else else
return {} return {}
_set_alias(name, alias, block_type=null)
block_type = _block_type(block_type)
if block_type in _aliases
alias_map = _aliases[block_type]
else
alias_map = {}
alias_map[name] = alias
_aliases[block_type] = alias_map
_get_alias(name, block_type=null)
block_type = _block_type(block_type)
if block_type in _aliases
alias_map = _aliases[block_type]
if name in alias_map
return alias_map[name]
else
return name
else
return name
_reset_aliases()
for key in keys(_aliases)
remove(_aliases, key)

View File

@ -66,8 +66,6 @@ RV-Fan--fullWidth(base-height, base-width)
+RV-Element('Surface') +RV-Element('Surface')
flex-grow 1 flex-grow 1
RV-Fan__Base--wurst()
--wurst 'wasser'
/* ############### /* ###############
* Element Mixins * Element Mixins
@ -79,10 +77,12 @@ RV-Fan__Base(base-height, base-width)
flex 0 0 auto flex 0 0 auto
RV-Fan__Surface--fixedHeight(height) RV-Fan__Surface--fixedHeight(height)
height height +RV-Element__Modifier('fixedHeight')
height height
RV-Fan__Surface--fixedWidth(width) RV-Fan__Surface--fixedWidth(width)
max-width width +RV-Element__Modifier('fixedWidth')
max-width width
RV-Fan__Surface() RV-Fan__Surface()
+RV-Element('Surface') +RV-Element('Surface')
@ -98,23 +98,6 @@ RV-Fan()
* CSS-Class * CSS-Class
* ######### */ * ######### */
.test
+RV-Block('Hasi')
RV-CSSParameter({
base-height: 280px,
base-width: 320px
})
RV-Fan()
+RV-Element('Flauschi')
RV-Fan__Base(base-height, base-width)
RV-Fan__Base--wurst()
+RV-Element('Löffel')
RV-Fan__Surface()
+RV-Block('RV-Fan') +RV-Block('RV-Fan')
RV-CSSParameter({ RV-CSSParameter({
base-height: 280px, base-height: 280px,
@ -124,48 +107,12 @@ RV-Fan()
RV-Fan() RV-Fan()
RV-Fan__Surface() RV-Fan__Surface()
+RV-Element__Modifier('fixedWidth') RV-Fan__Surface--fixedWidth(base-width)
RV-Fan__Surface--fixedWidth(base-width) RV-Fan__Surface--fixedHeight(base-height)
+RV-Element__Modifier('fixedHeight')
RV-Fan__Surface--fixedHeight(base-height)
RV-Fan__Base(base-height, base-width) RV-Fan__Base(base-height, base-width)
+RV-Element__Modifier('wurst')
RV-Fan__Base--wurst()
RV-Fan--fullWidth(base-height, base-width) RV-Fan--fullWidth(base-height, base-width)
RV-Fan--vertical(base-height, base-width) RV-Fan--vertical(base-height, base-width)
RV-Fan--horizontal(base-height, base-width) RV-Fan--horizontal(base-height, base-width)
RV-Fan--auto(base-height, base-width) RV-Fan--auto(base-height, base-width)
.test
--test 'test'
/*
RV-Test()
+RV-Block('Block')
--wurst yeet
//RV-Fan__Surface(50px, 50px)
+RV-Element('Element')
+RV-Element('Subelement')
color black
--blubb wasser
+RV-Element__Modifier('ElementModifier')
--pp 'wurst'
+RV-Element__Modifier('ElementModifierAfter')
--pipi 'kaka'
+RV-Block__Modifier('BlockModifier')
border 1px solid red
+RV-Element('ElementInBlockModifier')
color pink
+RV-Element__Modifier('ElementModifier')
color skyblue
.wurstwasser
RV-Test()
*/