I think i finally got it

This commit is contained in:
reverend 2021-01-11 01:37:08 +01:00
parent c3e69cd0cc
commit 1a44e24805
3 changed files with 180 additions and 157 deletions

View File

@ -4,6 +4,7 @@
* It also helps nesting those classes in any fashion imaganible * It also helps nesting those classes in any fashion imaganible
* and still produces clean BEM CSS * and still produces clean BEM CSS
*/ */
@import './_laneHandling'
_css-prefix = 'RV' _css-prefix = 'RV'
_global_scope = { _global_scope = {
@ -49,56 +50,98 @@ _get_element_selector()
* Generates a CSS class for an * Generates a CSS class for an
* Block according to BEM * Block according to BEM
*/ */
RV-Block(name) RV-Block(block_name)
.{name} b = @block{
{block} {block}
& .{block_name}{
for element_block in _pop_stack('elements_to_generate'){
{element_block}
}
}
for element_name, element in _global_scope['_selector_blocks_to_generate'] &.{block_name}{
& .{name}__{element_name} for modifier_block in _pop_stack('block_modifiers_to_generate'){
for current_block in element.block_list {modifier_block}
{current_block} }
for modifier_name, modifier_block_list in element.modifier_list }
&--{modifier_name}
for current_block in modifier_block_list
{current_block}
for modifier_block in _pop_stack('after_element_modifiers_to_generate'){
{modifier_block}
}
_reset_last_name('RV-Element')
_reset_last_name('RV-Element__Modifier')
_reset_last_name('RV-Block_Modifier')
}
if 'RV-Block' in called-from
{b}
else
.{block_name}
{b}
/* /*
* 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(block_modifier_name)
if 'RV-Block__Modifier' in called-from _push_onto_stack(block)
{block}
else //Detect if the selector will be generated
&{_get_block_selector()}--{name} //by an earlier call of RV-Block__Modifier
{block} if not 'RV-Block__Modifier' in called-from
// Saving accumulated modifiers and blocks
if 'RV-Block' in called-from
elements = _pop_stack('block_modifier_elements_to_generate')
modifier_block = @block{
&--{block_modifier_name}{
for sub_block in _pop_stack(){
{sub_block}
}
& ^[-2..-2]{
for element in elements{
{element}
}
}
}
}
_push_onto_stack(modifier_block, 'block_modifiers_to_generate')
/* /*
* 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(element_name)
push(_global_scope['_element_block_stack'], block) _push_onto_stack(block)
current_block = _block_building_lane[-1]
//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
element = {} stack_name = 'elements_to_generate'
element['block_list'] = _global_scope['_element_block_stack'] if 'RV-Block__Modifier' in called-from
element['modifier_list'] = _global_scope['_element_modifier_stack'] stack_name = 'block_modifier_elements_to_generate'
prefix = '.'
if block_name == '^[-2..-2]'
p('wurst')
prefix = ''
element_block = @block{
&__{element_name}{
for sub_block in _pop_stack(){
{sub_block}
}
//Reseting for modifier_block in _pop_stack('element_modifiers_to_generate'){
_global_scope['_element_block_stack'] = () {modifier_block}
_global_scope['_element_modifier_stack'] = {} }
}
}
_push_onto_stack(element_block, stack_name)
_set_last_name(element_name)
//Saving element
_global_scope['_selector_blocks_to_generate'][name] = element
_global_scope['_last_element_name'] = name
/* /*
* Generates a CSS class for an element modifier * Generates a CSS class for an element modifier
@ -109,35 +152,32 @@ RV-Element(name)
* a callback for the modifier and add the element name * a callback for the modifier and add the element name
* from RV-Element * from RV-Element
*/ */
RV-Element__Modifier(name) RV-Element__Modifier(element_modifier_name)
counter = 0 _push_onto_stack(block)
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 //Is this modifier beeing included by another modifier
if not 'RV-Element__Modifier' in called-from if not 'RV-Element__Modifier' in called-from
//No //No, store all blocks under the give name
//Is this modifier beeing called in in- or postfix //Is this modifier beeing called in in- or postfix
if not 'RV-Element' in called-from if 'RV-Element' in called-from
//Yes //Infix, store for handling by element
last_element_name = _global_scope['_last_element_name'] modifier_block = @block{
& .{element_name}--{element_modifier_name}{
for current_block in _pop_stack(){
{current_block}
}
}
}
//Accesing the last generated element and appending the modifier _push_onto_stack(modifier_block, 'element_modifiers_to_generate')
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 else
//No //Postfix, append to existing element
_global_scope['_element_modifier_stack'][name] = _global_scope['_element_modifier_block_stack'] last_element_name = _get_last_name('RV-Element')
modifier_block = @block {
_global_scope['_element_modifier_block_stack'] = () & .__{last_element_name}.__{last_element_name}--{element_modifier_name}{
for current_block in _pop_stack(){
{current_block}
}
}
}
_push_onto_stack(modifier_block, 'after_element_modifiers_to_generate')

View File

@ -1,50 +1,36 @@
_lanes = {} _lanes = {}
_stacks = {} _stacks = {}
_last_name = {} _last_name = {}
_being_towed = {}
_reset_last_name(block_type=null) _block_type(block_type)
if block_type == null if block_type == null
block_type = called-from[1] block_type = called-from[1]
return block_type
_reset_last_name(block_type=null)
block_type = _block_type(block_type)
if block_type in _last_name if block_type in _last_name
remove(_last_name, block_type) remove(_last_name, block_type)
_set_last_name(name, block_type=null) _set_last_name(name, block_type=null)
if block_type == null block_type = _block_type(block_type)
block_type = called-from[1]
_last_name[block_type] = name _last_name[block_type] = name
_get_last_name(block_type) _get_last_name(block_type)
if block_type == null block_type = _block_type(block_type)
block_type = called-from[1]
if block_type in _last_name if block_type in _last_name
return _last_name[block_type] return _last_name[block_type]
else else
return null return null
_current_block_type()
return called-from[1]
_call_stack_till_first(block_type)
striped = slice(called-from, 2)
block_index = (index(striped, block_type))
if block_index == null
if length(striped) <= 1
return (striped ())
return slice(striped, 1)
stack = ()
for i in (0..block_index)
push(stack, striped[i])
return stack
_push_onto_stack(block, block_type=null) _push_onto_stack(block, block_type=null)
if block_type == null block_type = _block_type(block_type)
block_type = called-from[1]
if block_type in _stacks if block_type in _stacks
stack = _stacks[block_type] stack = _stacks[block_type]
@ -55,8 +41,7 @@ _push_onto_stack(block, block_type=null)
_stacks[block_type] = stack _stacks[block_type] = stack
_pop_from_stack(block_type=null) _pop_from_stack(block_type=null)
if block_type == null block_type = _block_type(block_type)
block_type = called-from[1]
if block_type in _stacks if block_type in _stacks
stack = _stacks[block_type] stack = _stacks[block_type]
@ -69,8 +54,7 @@ _pop_from_stack(block_type=null)
return null return null
_pop_stack(block_type=null) _pop_stack(block_type=null)
if block_type == null block_type = _block_type(block_type)
block_type = called-from[1]
if block_type in _stacks if block_type in _stacks
stack = _stacks[block_type] stack = _stacks[block_type]
@ -79,27 +63,43 @@ _pop_stack(block_type=null)
else else
return () return ()
_add_to_lane(key, value, block_type=null) _last_element_of_stack(block_type=null)
if block_type == null block_type = _block_type(block_type)
block_type = called-from[1]
if block_type in _stacks
stack = _stacks[block_type]
return stack[-1]
else
return null
_set_lane(lane_name, value, block_type=null)
block_type = _block_type(block_type)
if block_type in _lanes if block_type in _lanes
lane = _lanes[block_type] lane = _lanes[block_type]
else else
lane = {} lane = {}
if key in lane if lane_name in lane
stack = lane[key] stack = lane[lane_name]
else else
stack = () stack = ()
push(stack, value) push(stack, value)
lane[key] = stack lane[lane_name] = stack
_lanes[block_type] = lane _lanes[block_type] = lane
_get_lane(block_type)
block_type = _block_type(block_type)
if block_type in _lanes
return _lanes[block_type]
else
return {}
_put_into_lane(key, value, block_type=null) _put_into_lane(key, value, block_type=null)
if block_type == null block_type = _block_type(block_type)
block_type = called-from[1]
if block_type in _lanes if block_type in _lanes
lane = _lanes[block_type] lane = _lanes[block_type]
@ -110,8 +110,7 @@ _put_into_lane(key, value, block_type=null)
_lanes[block_type] = lane _lanes[block_type] = lane
_pop_lane(block_type=null) _pop_lane(block_type=null)
if block_type == null block_type = _block_type(block_type)
block_type = called-from[1]
if block_type in _lanes if block_type in _lanes
lane = _lanes[block_type] lane = _lanes[block_type]
@ -119,38 +118,3 @@ _pop_lane(block_type=null)
return lane return lane
else else
return {} return {}
attach(parent_type, suffix, block)
_being_towed[_current_block_type()] = true
call_stack = _call_stack_till_first(parent_type)
if parent_type in call_stack
// We are called inside a block
_push_onto_stack(block)
//Detect if the selector will be generated
//by an earlier call of RV-Element
if not _current_block_type() in (call_stack)
block_list = _pop_stack()
_put_into_lane(suffix, block_list, parent_type)
else
// We are not called inside a block
// Is there a block to attach to
_last_parent_name = _get_last_name(parent_type)
if _last_parent_name != null
& .{_last_parent_name} .{_last_parent_name}{suffix}
{block}
tow(name, block, block_type=null)
if block_type == null // Determining if we are inside a block or after a block
block_type = called-from[0]
.{name}
{block}
if block_type in _lanes
for suffix, block_list in _pop_lane(block_type)
p(name suffix selector())
&{name}{suffix}
for current_block in block_list
{current_block}
_set_last_name(name, block_type)

View File

@ -14,7 +14,6 @@
* Base is fixed, given size, Surface is given height * Base is fixed, given size, Surface is given height
* but will fill the parent's width * but will fill the parent's width
*/ */
/*
RV-Fan--horizontal(base-height, base-width) RV-Fan--horizontal(base-height, base-width)
+RV-Block__Modifier('horizontal') +RV-Block__Modifier('horizontal')
flex-direction row flex-direction row
@ -28,7 +27,6 @@ RV-Fan--horizontal(base-height, base-width)
* Base is fixed, given size, base is given width * Base is fixed, given size, base is given width
* minimal height is given height, will grow with content * minimal height is given height, will grow with content
*/ */
/*
RV-Fan--vertical(base-height, base-width) RV-Fan--vertical(base-height, base-width)
+RV-Block__Modifier('vertical') +RV-Block__Modifier('vertical')
flex-direction column flex-direction column
@ -43,7 +41,6 @@ RV-Fan--vertical(base-height, base-width)
* the width of the parent is less than 2 x base-width * the width of the parent is less than 2 x base-width
* Width of the base and surface in vertical are base-width * Width of the base and surface in vertical are base-width
*/ */
/*
RV-Fan--auto(base-height, base-width) RV-Fan--auto(base-height, base-width)
+RV-Block__Modifier('auto') +RV-Block__Modifier('auto')
flex-flow row wrap flex-flow row wrap
@ -59,7 +56,6 @@ RV-Fan--auto(base-height, base-width)
* Width of the base and the surface in vertical mode * Width of the base and the surface in vertical mode
* are 100% of the parent width * are 100% of the parent width
*/ */
/*
RV-Fan--fullWidth(base-height, base-width) RV-Fan--fullWidth(base-height, base-width)
+RV-Block__Modifier('fullWidth') +RV-Block__Modifier('fullWidth')
RV-Fan--auto(base-height, base-width) RV-Fan--auto(base-height, base-width)
@ -70,14 +66,9 @@ RV-Fan--fullWidth(base-height, base-width)
+RV-Element('Surface') +RV-Element('Surface')
flex-grow 1 flex-grow 1
RV-Fan__Base--wurst()
+RV-Element__Modifier('wurst')
--wurst wasser
/* ############### /* ###############
* Element Mixins * Element Mixins
* ############### */ * ############### */
/*
RV-Fan__Base(base-height, base-width) RV-Fan__Base(base-height, base-width)
+RV-Element('Base') +RV-Element('Base')
height base-height height base-height
@ -99,15 +90,26 @@ RV-Fan__Surface()
/* ############ /* ############
* Block Mixin * Block Mixin
* ############ */ * ############ */
/*
RV-Fan() RV-Fan()
display flex display flex
/* ######### /* #########
* CSS-Class * CSS-Class
* ######### */ * ######### */
/*
+RV-Block('Fan') .test
+RV-Block('Hasi')
--hasi 'lein'
+RV-Element('Flauschi')
--hasi 'flauschi'
+RV-Element('Löffel')
--flauschi 'löffel'
+RV-Block('RV-Fan')
RV-CSSParameter({ RV-CSSParameter({
base-height: 280px, base-height: 280px,
base-width: 320px base-width: 320px
@ -125,18 +127,35 @@ RV-Fan()
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-Test()
+RV-Block('Fächer') +RV-Block('Block')
--wurst yeet --wurst yeet
RV-Fan__Surface(50px, 50px) //RV-Fan__Surface(50px, 50px)
+RV-Element('susses') +RV-Element('Element')
+RV-Element('BLubb') +RV-Element('Subelement')
color black color black
--blubb wasser --blubb wasser
+RV-Element__Modifier('pp') +RV-Element__Modifier('ElementModifier')
+RV-Element__Modifier('Wurst') --pp 'wurst'
--wasser '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 .wurstwasser
RV-Test() RV-Test()
*/