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

I think i finally got it

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
components/00_Global/_bemGenerator.styl
View File

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

108
components/00_Global/_laneHandling.styl
View File

@ -1,50 +1,36 @@
_lanes = {}
_stacks = {}
_last_name = {}
_being_towed = {}
_reset_last_name(block_type=null)
_block_type(block_type)
if block_type == null
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
remove(_last_name, block_type)
_set_last_name(name, block_type=null)
if block_type == null
block_type = called-from[1]
block_type = _block_type(block_type)
_last_name[block_type] = name
_get_last_name(block_type)
if block_type == null
block_type = called-from[1]
block_type = _block_type(block_type)
if block_type in _last_name
return _last_name[block_type]
else
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)
if block_type == null
block_type = called-from[1]
block_type = _block_type(block_type)
if block_type in _stacks
stack = _stacks[block_type]
@ -55,8 +41,7 @@ _push_onto_stack(block, block_type=null)
_stacks[block_type] = stack
_pop_from_stack(block_type=null)
if block_type == null
block_type = called-from[1]
block_type = _block_type(block_type)
if block_type in _stacks
stack = _stacks[block_type]
@ -69,8 +54,7 @@ _pop_from_stack(block_type=null)
return null
_pop_stack(block_type=null)
if block_type == null
block_type = called-from[1]
block_type = _block_type(block_type)
if block_type in _stacks
stack = _stacks[block_type]
@ -79,27 +63,43 @@ _pop_stack(block_type=null)
else
return ()
_add_to_lane(key, value, block_type=null)
if block_type == null
block_type = called-from[1]
_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
_set_lane(lane_name, value, block_type=null)
block_type = _block_type(block_type)
if block_type in _lanes
lane = _lanes[block_type]
else
lane = {}
if key in lane
stack = lane[key]
if lane_name in lane
stack = lane[lane_name]
else
stack = ()
push(stack, value)
lane[key] = stack
lane[lane_name] = stack
_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)
if block_type == null
block_type = called-from[1]
block_type = _block_type(block_type)
if block_type in _lanes
lane = _lanes[block_type]
@ -110,8 +110,7 @@ _put_into_lane(key, value, block_type=null)
_lanes[block_type] = lane
_pop_lane(block_type=null)
if block_type == null
block_type = called-from[1]
block_type = _block_type(block_type)
if block_type in _lanes
lane = _lanes[block_type]
@ -119,38 +118,3 @@ _pop_lane(block_type=null)
return lane
else
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)

59
components/01_Layouts/fan/_fan.styl
View File

@ -14,7 +14,6 @@
* Base is fixed, given size, Surface is given height
* but will fill the parent's width
*/
/*
RV-Fan--horizontal(base-height, base-width)
+RV-Block__Modifier('horizontal')
flex-direction row
@ -28,7 +27,6 @@ RV-Fan--horizontal(base-height, base-width)
* Base is fixed, given size, base is given width
* minimal height is given height, will grow with content
*/
/*
RV-Fan--vertical(base-height, base-width)
+RV-Block__Modifier('vertical')
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
* Width of the base and surface in vertical are base-width
*/
/*
RV-Fan--auto(base-height, base-width)
+RV-Block__Modifier('auto')
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
* are 100% of the parent width
*/
/*
RV-Fan--fullWidth(base-height, base-width)
+RV-Block__Modifier('fullWidth')
RV-Fan--auto(base-height, base-width)
@ -70,14 +66,9 @@ RV-Fan--fullWidth(base-height, base-width)
+RV-Element('Surface')
flex-grow 1
RV-Fan__Base--wurst()
+RV-Element__Modifier('wurst')
--wurst wasser
/* ###############
* Element Mixins
* ############### */
/*
RV-Fan__Base(base-height, base-width)
+RV-Element('Base')
height base-height
@ -99,15 +90,26 @@ RV-Fan__Surface()
/* ############
* Block Mixin
* ############ */
/*
RV-Fan()
display flex
/* #########
* 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({
base-height: 280px,
base-width: 320px
@ -125,18 +127,35 @@ RV-Fan()
RV-Fan--vertical(base-height, base-width)
RV-Fan--horizontal(base-height, base-width)
RV-Fan--auto(base-height, base-width)
*/
.test
--test 'test'
/*
RV-Test()
+RV-Block('Fächer')
+RV-Block('Block')
--wurst yeet
RV-Fan__Surface(50px, 50px)
+RV-Element('susses')
+RV-Element('BLubb')
//RV-Fan__Surface(50px, 50px)
+RV-Element('Element')
+RV-Element('Subelement')
color black
--blubb wasser
+RV-Element__Modifier('pp')
+RV-Element__Modifier('Wurst')
--wasser 'wurst'
+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()
*/