From c3e69cd0ccebf51b5b418a2d006024baf671c0e0 Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 10 Jan 2021 15:27:00 +0100 Subject: [PATCH] i have no clue what im doing ... da da da da --- components/00_Global/_bemGenerator.styl | 115 +++++++++++++++--- components/00_Global/_global.styl | 1 - ..._blockAppendix.styl => _laneHandling.styl} | 34 ++++-- components/01_Layouts/fan/_fan.styl | 27 ++-- public/rcss.css | 16 +-- 5 files changed, 139 insertions(+), 54 deletions(-) rename components/00_Global/{_blockAppendix.styl => _laneHandling.styl} (87%) diff --git a/components/00_Global/_bemGenerator.styl b/components/00_Global/_bemGenerator.styl index 1d0ce31..c6ae336 100644 --- a/components/00_Global/_bemGenerator.styl +++ b/components/00_Global/_bemGenerator.styl @@ -6,15 +6,43 @@ */ _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: {} +} -// Cache for Blocks -_last_block_name = null +_block_building_lane = () +_element_building_lange = () -_element_building_lane = {} -_element_block_stack = () +_work_lane(lane, callback) + l = length(lane) + for _ in (0..l) + piece = pop(lane) + callback(piece) -_block_modifier_building_lane = {} -_block_modifier_block_stack = () +/* + * 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]) /* @@ -22,7 +50,17 @@ _block_modifier_block_stack = () * Block according to BEM */ RV-Block(name) - tow(name, block) + .{name} + {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} /* @@ -30,8 +68,11 @@ RV-Block(name) * according to BEM. */ RV-Block__Modifier(name) - attach('RV-Block', unquote('--' + name), block) - + if 'RV-Block__Modifier' in called-from + {block} + else + &{_get_block_selector()}--{name} + {block} /* * Generates an CSS class for an element @@ -39,12 +80,27 @@ RV-Block__Modifier(name) * For more see RV-Element___Modifier */ RV-Element(name) - attach('RV-Block', unquote('__' + name), block) - tow(name, block) + push(_global_scope['_element_block_stack'], block) + + current_block = _block_building_lane[-1] + + //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'] + + //Reseting + _global_scope['_element_block_stack'] = () + _global_scope['_element_modifier_stack'] = {} + + //Saving element + _global_scope['_selector_blocks_to_generate'][name] = element + _global_scope['_last_element_name'] = name - - -/* p(_block_building_lane) +/* * Generates a CSS class for an element modifier * according to BEM. These are ment to be part of the * content block of an element and since child-mixins @@ -54,5 +110,34 @@ RV-Element(name) * from RV-Element */ RV-Element__Modifier(name) - attach('RV-Element', '--' + name, block) + 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 + + //Is this modifier beeing included by another modifier + 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 + last_element_name = _global_scope['_last_element_name'] + + //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 + else + //No + _global_scope['_element_modifier_stack'][name] = _global_scope['_element_modifier_block_stack'] + + _global_scope['_element_modifier_block_stack'] = () \ No newline at end of file diff --git a/components/00_Global/_global.styl b/components/00_Global/_global.styl index 78ef85c..c53a1cb 100644 --- a/components/00_Global/_global.styl +++ b/components/00_Global/_global.styl @@ -1,4 +1,3 @@ -@import './_blockAppendix' @import './_bemGenerator' @import './_selectorHook' @import './_cssParameter' diff --git a/components/00_Global/_blockAppendix.styl b/components/00_Global/_laneHandling.styl similarity index 87% rename from components/00_Global/_blockAppendix.styl rename to components/00_Global/_laneHandling.styl index 7107f6b..03e66a1 100644 --- a/components/00_Global/_blockAppendix.styl +++ b/components/00_Global/_laneHandling.styl @@ -79,6 +79,23 @@ _pop_stack(block_type=null) else return () +_add_to_lane(key, value, block_type=null) + if block_type == null + block_type = called-from[1] + + if block_type in _lanes + lane = _lanes[block_type] + else + lane = {} + + if key in lane + stack = lane[key] + else + stack = () + + push(stack, value) + lane[key] = stack + _lanes[block_type] = lane _put_into_lane(key, value, block_type=null) if block_type == null @@ -119,26 +136,19 @@ attach(parent_type, suffix, block) // Is there a block to attach to _last_parent_name = _get_last_name(parent_type) if _last_parent_name != null - &.{_last_parent_name}{suffix} - --attach 'blubb' + & .{_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] - if not block_type in _being_towed - prefix = '.'+name - {prefix} - {block} - else - prefix = '' - - {prefix} + .{name} + {block} if block_type in _lanes for suffix, block_list in _pop_lane(block_type) - p('name' name 'suffix' suffix) - & {name}{suffix} + p(name suffix selector()) + &{name}{suffix} for current_block in block_list {current_block} diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl index f5076ec..233f7e3 100644 --- a/components/01_Layouts/fan/_fan.styl +++ b/components/01_Layouts/fan/_fan.styl @@ -126,18 +126,17 @@ RV-Fan() RV-Fan--horizontal(base-height, base-width) RV-Fan--auto(base-height, base-width) */ -+RV-Block('Fächer') - --wurst yeet - RV-Fan__Surface(50px, 50px) - +RV-Element('BLubb') - color black - --blubb wasser +RV-Test() + +RV-Block('Fächer') + --wurst yeet + RV-Fan__Surface(50px, 50px) + +RV-Element('susses') + +RV-Element('BLubb') + color black + --blubb wasser - +RV-Element__Modifier('Wurst') - --wurst 'wurst' - -+RV-Element('Affter') - --hasi 'lein' - -+RV-Block__Modifier('Mafter') - --blubb 'bernd' \ No newline at end of file + +RV-Element__Modifier('pp') + +RV-Element__Modifier('Wurst') + --wasser 'wurst' +.wurstwasser + RV-Test() \ No newline at end of file diff --git a/public/rcss.css b/public/rcss.css index 32f05dc..b99cdf2 100644 --- a/public/rcss.css +++ b/public/rcss.css @@ -318,23 +318,15 @@ bottom: 0; right: 0; } -.Fächer { +.wurstwasser .Fächer { --wurst: yeet; } -.Fächer BLubb--Wurst { - --wurst: 'wurst'; -} -.Fächer Fächer__BLubb { +.wurstwasser .Fächer .Fächer__BLubb { color: #000; --blubb: wasser; } -.Fächer__Affter { - --attach: 'blubb'; - --hasi: 'lein'; -} -.Fächer--Mafter { - --attach: 'blubb'; - --blubb: 'bernd'; +.wurstwasser .Fächer .Fächer__BLubb--pp { + --wasser: 'wurst'; } .RV-FlexGrid__Container { display: grid;