I think i finally got it
This commit is contained in:
parent
c3e69cd0cc
commit
1a44e24805
@ -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
|
for modifier_block in _pop_stack('after_element_modifiers_to_generate'){
|
||||||
{current_block}
|
{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}
|
||||||
|
}
|
||||||
|
|
||||||
|
for modifier_block in _pop_stack('element_modifiers_to_generate'){
|
||||||
|
{modifier_block}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//Reseting
|
_push_onto_stack(element_block, stack_name)
|
||||||
_global_scope['_element_block_stack'] = ()
|
_set_last_name(element_name)
|
||||||
_global_scope['_element_modifier_stack'] = {}
|
|
||||||
|
|
||||||
//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
|
//Is this modifier beeing included by another modifier
|
||||||
if fn is 'RV-Element'
|
if not 'RV-Element__Modifier' in called-from
|
||||||
counter += 1
|
//No, store all blocks under the give name
|
||||||
|
//Is this modifier beeing called in in- or postfix
|
||||||
if counter <= 1
|
if 'RV-Element' in called-from
|
||||||
element_modifier_block_stack = _global_scope['_element_modifier_block_stack']
|
//Infix, store for handling by element
|
||||||
append(element_modifier_block_stack, block)
|
modifier_block = @block{
|
||||||
_global_scope['_element_modifier_block_stack'] = element_modifier_block_stack
|
& .{element_name}--{element_modifier_name}{
|
||||||
|
for current_block in _pop_stack(){
|
||||||
//Is this modifier beeing included by another modifier
|
{current_block}
|
||||||
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
|
_push_onto_stack(modifier_block, 'element_modifiers_to_generate')
|
||||||
last_element_name = _global_scope['_last_element_name']
|
else
|
||||||
|
//Postfix, append to existing element
|
||||||
//Accesing the last generated element and appending the modifier
|
last_element_name = _get_last_name('RV-Element')
|
||||||
element = _global_scope['_selector_blocks_to_generate'][last_element_name]
|
modifier_block = @block {
|
||||||
modifier_list = element['modifier_list']
|
& .__{last_element_name}.__{last_element_name}--{element_modifier_name}{
|
||||||
modifier_list[name] = _global_scope['_element_modifier_block_stack']
|
for current_block in _pop_stack(){
|
||||||
element['modifier_list'] = modifier_list
|
{current_block}
|
||||||
|
}
|
||||||
_global_scope['_selector_blocks_to_generate'][last_element_name] = element
|
}
|
||||||
else
|
}
|
||||||
//No
|
_push_onto_stack(modifier_block, 'after_element_modifiers_to_generate')
|
||||||
_global_scope['_element_modifier_stack'][name] = _global_scope['_element_modifier_block_stack']
|
|
||||||
|
|
||||||
_global_scope['_element_modifier_block_stack'] = ()
|
|
||||||
|
|
@ -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]
|
||||||
@ -78,28 +62,44 @@ _pop_stack(block_type=null)
|
|||||||
return stack
|
return stack
|
||||||
else
|
else
|
||||||
return ()
|
return ()
|
||||||
|
|
||||||
|
_last_element_of_stack(block_type=null)
|
||||||
|
block_type = _block_type(block_type)
|
||||||
|
|
||||||
|
if block_type in _stacks
|
||||||
|
stack = _stacks[block_type]
|
||||||
|
return stack[-1]
|
||||||
|
else
|
||||||
|
return null
|
||||||
|
|
||||||
_add_to_lane(key, value, block_type=null)
|
_set_lane(lane_name, 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]
|
||||||
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)
|
|
||||||
|
|
||||||
|
@ -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)
|
||||||
@ -69,15 +65,10 @@ 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()
|
||||||
|
*/
|
Loading…
Reference in New Issue
Block a user