From fb5fa8ce6c50d84f28938c90020b14f3ff85607b Mon Sep 17 00:00:00 2001 From: reverend Date: Mon, 11 Jan 2021 20:50:07 +0100 Subject: [PATCH] First Comopnent using the bem generator --- components/00_Global/_bemGenerator.styl | 49 ++++-------------- components/00_Global/_laneHandling.styl | 29 +++++++++++ components/01_Layouts/fan/_fan.styl | 67 +++---------------------- 3 files changed, 45 insertions(+), 100 deletions(-) diff --git a/components/00_Global/_bemGenerator.styl b/components/00_Global/_bemGenerator.styl index 5e748e1..a0c76cf 100644 --- a/components/00_Global/_bemGenerator.styl +++ b/components/00_Global/_bemGenerator.styl @@ -7,43 +7,6 @@ @import './_laneHandling' _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 */ RV-Block(block_name) + _pop_lane('element_aliases') b = @block{ {block} & .{block_name}{ @@ -78,6 +42,8 @@ RV-Block(block_name) else .{block_name} {b} + + _reset_aliases() /* * Generates a CSS class for an block modifier @@ -115,21 +81,23 @@ RV-Block__Modifier(block_modifier_name) */ 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 + for alias in _pop_stack('element_aliases') + _set_alias(alias, element_name) stack_name = 'elements_to_generate' if 'RV-Block__Modifier' in called-from stack_name = 'block_modifier_elements_to_generate' + element_name = _get_alias(element_name) element_block = @block{ &__{element_name}{ for sub_block in _pop_stack(){ {sub_block} } - &^[-3..-3]__{element_name}{ for modifier_block in _pop_stack('element_modifiers_to_generate'){ {modifier_block} @@ -140,7 +108,8 @@ RV-Element(element_name) _push_onto_stack(element_block, stack_name) _set_last_name(element_name) - + else + _push_onto_stack(element_name, 'element_aliases') /* * Generates a CSS class for an element modifier diff --git a/components/00_Global/_laneHandling.styl b/components/00_Global/_laneHandling.styl index feb2d49..6b733e5 100644 --- a/components/00_Global/_laneHandling.styl +++ b/components/00_Global/_laneHandling.styl @@ -1,7 +1,9 @@ _lanes = {} _stacks = {} +_aliases = {} _last_name = {} + _block_type(block_type) if block_type == null @@ -118,3 +120,30 @@ _pop_lane(block_type=null) return lane else 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) \ No newline at end of file diff --git a/components/01_Layouts/fan/_fan.styl b/components/01_Layouts/fan/_fan.styl index 20f6e7c..bb20559 100644 --- a/components/01_Layouts/fan/_fan.styl +++ b/components/01_Layouts/fan/_fan.styl @@ -66,8 +66,6 @@ RV-Fan--fullWidth(base-height, base-width) +RV-Element('Surface') flex-grow 1 -RV-Fan__Base--wurst() - --wurst 'wasser' /* ############### * Element Mixins @@ -79,10 +77,12 @@ RV-Fan__Base(base-height, base-width) flex 0 0 auto RV-Fan__Surface--fixedHeight(height) - height height + +RV-Element__Modifier('fixedHeight') + height height RV-Fan__Surface--fixedWidth(width) - max-width width + +RV-Element__Modifier('fixedWidth') + max-width width RV-Fan__Surface() +RV-Element('Surface') @@ -98,23 +98,6 @@ RV-Fan() * 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-CSSParameter({ base-height: 280px, @@ -124,48 +107,12 @@ RV-Fan() RV-Fan() RV-Fan__Surface() - +RV-Element__Modifier('fixedWidth') - RV-Fan__Surface--fixedWidth(base-width) - +RV-Element__Modifier('fixedHeight') - RV-Fan__Surface--fixedHeight(base-height) + RV-Fan__Surface--fixedWidth(base-width) + RV-Fan__Surface--fixedHeight(base-height) RV-Fan__Base(base-height, base-width) - +RV-Element__Modifier('wurst') - RV-Fan__Base--wurst() RV-Fan--fullWidth(base-height, base-width) 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('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() -*/ \ No newline at end of file + RV-Fan--auto(base-height, base-width) \ No newline at end of file