From d6b4f0aff230848cf6ee8b9bd91c581606190aa1 Mon Sep 17 00:00:00 2001 From: reverend Date: Wed, 10 Mar 2021 02:58:14 +0100 Subject: [PATCH] BEM Generator shorthand for block modifiers --- components/00_Tools/_bemGenerator.styl | 16 +++++++++++++--- .../02_ContentShape/alignment/_alignment.styl | 2 +- .../02_ContentShape/alignment/alignment.hbs | 12 ++++++------ .../aspectRatio/_aspectRatio.styl | 2 +- .../02_ContentShape/aspectRatio/aspectRatio.hbs | 4 ++-- .../02_ContentShape/focalPoint/_focalPoint.styl | 2 +- .../02_ContentShape/focalPoint/focalPoint.hbs | 4 ++-- components/02_ContentShape/shape/_shape.styl | 2 +- components/02_ContentShape/shape/shape.hbs | 2 +- .../02_ContentShape/truncation/_truncation.styl | 2 +- .../truncation/truncation.config.json | 3 +++ .../02_ContentShape/truncation/truncation.hbs | 2 +- 12 files changed, 33 insertions(+), 20 deletions(-) diff --git a/components/00_Tools/_bemGenerator.styl b/components/00_Tools/_bemGenerator.styl index 48ff5a4..a22a9ab 100644 --- a/components/00_Tools/_bemGenerator.styl +++ b/components/00_Tools/_bemGenerator.styl @@ -102,11 +102,13 @@ RV-Level(name, name_delimiter, allowed_parent_levels, selector_callback, squash_ if squash_if_parent_nested && is_any_parent_nested() {block} else - {selector_callback(name)} + selector_name = selector_callback(name) + if name == '' + selector_name = split(name_delimiter, selector_name)[0] + {selector_name} {block} - RV-Block(name) .{name} {block} @@ -114,6 +116,10 @@ RV-Block(name) _bem_context._alias_map = {} _bem_context._alias_stacks = {} +RV-Block--shorthand(name) + +RV-Block(name) + {block} + RV-Element(name=null) +RV-Level(name, '__', ('RV-Block' 'RV-Block--modifier'), @(name){ if is_nested_in('RV-Block--modifier') { @@ -131,7 +137,11 @@ RV-Element--modifier(name=null) {block} RV-Block--modifier(name=null) - +RV-Level(name, '--', ('RV-Block'), @(name){return '&--' + name}, true) + +RV-Level(name, '--', ('RV-Block' 'RV-Block--shorthand'), @(name){return '&--' + name}, true) + if is_nested_in('RV-Block--shorthand') && length(called-from) > 0 + mixin_name = split('--', called-from[0])[0] + p(mixin_name) + convert(unquote(mixin_name)+'()') {block} RV-Squash() diff --git a/components/02_ContentShape/alignment/_alignment.styl b/components/02_ContentShape/alignment/_alignment.styl index 2b39d4e..0f4c46c 100644 --- a/components/02_ContentShape/alignment/_alignment.styl +++ b/components/02_ContentShape/alignment/_alignment.styl @@ -30,7 +30,7 @@ RV-Alignment--center() align-items center justify-content center -+RV-Block('RV-Alignment') ++RV-Block--shorthand('RV-Alignment') RV-Alignment() RV-Alignment--top() diff --git a/components/02_ContentShape/alignment/alignment.hbs b/components/02_ContentShape/alignment/alignment.hbs index ecef8b9..72d9b7d 100644 --- a/components/02_ContentShape/alignment/alignment.hbs +++ b/components/02_ContentShape/alignment/alignment.hbs @@ -7,37 +7,37 @@
-
+

Aligned Top

-
+

Aligned Left

-
+

Aligned Bottom

-
+

Aligned Right

-
+

Aligned v center

-
+

Aligned

h

center

diff --git a/components/02_ContentShape/aspectRatio/_aspectRatio.styl b/components/02_ContentShape/aspectRatio/_aspectRatio.styl index 65ceee5..1866367 100644 --- a/components/02_ContentShape/aspectRatio/_aspectRatio.styl +++ b/components/02_ContentShape/aspectRatio/_aspectRatio.styl @@ -51,7 +51,7 @@ RV-AspectRatio() bottom 0 right 0 -+RV-Block('RV-AspectRatio') ++RV-Block--shorthand('RV-AspectRatio') RV-AspectRatio() RV-AspectRatio--1to2() diff --git a/components/02_ContentShape/aspectRatio/aspectRatio.hbs b/components/02_ContentShape/aspectRatio/aspectRatio.hbs index a01d61c..ba4048b 100644 --- a/components/02_ContentShape/aspectRatio/aspectRatio.hbs +++ b/components/02_ContentShape/aspectRatio/aspectRatio.hbs @@ -1,11 +1,11 @@ {{#if modifier}} -
+
{{else}}
{{#each modifier_list}}
-
+
{{/each}}
diff --git a/components/02_ContentShape/focalPoint/_focalPoint.styl b/components/02_ContentShape/focalPoint/_focalPoint.styl index a6c8f30..2fd666a 100644 --- a/components/02_ContentShape/focalPoint/_focalPoint.styl +++ b/components/02_ContentShape/focalPoint/_focalPoint.styl @@ -44,7 +44,7 @@ RV-FocalPoint(focalX=50%, focalY=50%) object-fit cover object-position --focalX --focalY -+RV-Block('RV-FocalPoint') ++RV-Block--shorthand('RV-FocalPoint') RV-FocalPoint() RV-FocalPoint--upperHalf() diff --git a/components/02_ContentShape/focalPoint/focalPoint.hbs b/components/02_ContentShape/focalPoint/focalPoint.hbs index b89b832..2cda4c3 100644 --- a/components/02_ContentShape/focalPoint/focalPoint.hbs +++ b/components/02_ContentShape/focalPoint/focalPoint.hbs @@ -14,9 +14,9 @@
- +
- +
diff --git a/components/02_ContentShape/shape/_shape.styl b/components/02_ContentShape/shape/_shape.styl index bcadf60..6e9e289 100644 --- a/components/02_ContentShape/shape/_shape.styl +++ b/components/02_ContentShape/shape/_shape.styl @@ -37,6 +37,6 @@ RV-Shape--circle() bottom 0 right 0 -+RV-Block('RV-Shape') ++RV-Block--shorthand('RV-Shape') RV-Shape--square() RV-Shape--circle() \ No newline at end of file diff --git a/components/02_ContentShape/shape/shape.hbs b/components/02_ContentShape/shape/shape.hbs index 8ab86b2..aec1358 100644 --- a/components/02_ContentShape/shape/shape.hbs +++ b/components/02_ContentShape/shape/shape.hbs @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/components/02_ContentShape/truncation/_truncation.styl b/components/02_ContentShape/truncation/_truncation.styl index b0a8dfc..f05e022 100644 --- a/components/02_ContentShape/truncation/_truncation.styl +++ b/components/02_ContentShape/truncation/_truncation.styl @@ -70,7 +70,7 @@ RV-Truncation(line-height=1.3em, height=100%, background-color=white) background --background-color line-height --line-height -+RV-Block('RV-Truncation') ++RV-Block--shorthand('RV-Truncation') RV-Truncation() RV-Truncation--fade(--background-color) diff --git a/components/02_ContentShape/truncation/truncation.config.json b/components/02_ContentShape/truncation/truncation.config.json index a923e83..396569e 100644 --- a/components/02_ContentShape/truncation/truncation.config.json +++ b/components/02_ContentShape/truncation/truncation.config.json @@ -1,5 +1,8 @@ { "name": "Truncation", + "context": { + "modifier": "RV-Truncation" + }, "variants": [ { "name": "Fade", diff --git a/components/02_ContentShape/truncation/truncation.hbs b/components/02_ContentShape/truncation/truncation.hbs index b4849fe..63365bf 100644 --- a/components/02_ContentShape/truncation/truncation.hbs +++ b/components/02_ContentShape/truncation/truncation.hbs @@ -1,4 +1,4 @@ -
+

You could see there was text coming out of her eyes, text coming out of her wherever. . Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.