From 0292e2c872825d83dd494c5a180ed4c6b86632ed Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Wed, 6 Jan 2021 19:01:29 +0100
Subject: [PATCH] Implementing BEM Generator/Helper

---
 components/00_Global/_bemGenerator.styl | 85 +++++++++++++++++++++++++
 components/00_Global/_global.styl       |  1 +
 2 files changed, 86 insertions(+)
 create mode 100644 components/00_Global/_bemGenerator.styl

diff --git a/components/00_Global/_bemGenerator.styl b/components/00_Global/_bemGenerator.styl
new file mode 100644
index 0000000..c161e3d
--- /dev/null
+++ b/components/00_Global/_bemGenerator.styl
@@ -0,0 +1,85 @@
+/*
+ * This is set of mixins to help generating
+ * CSS classes according to the Block__Element--Modifier pattern.
+ * It also helps nesting those classes in any fashion imaganible
+ * and still produces clean BEM CSS
+ */
+
+_css-prefix = 'RV'
+_element-modifier = ()
+
+/*
+ * 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 split('__', _get_parent_selector())[0]
+
+/*
+ * Generates a CSS class for an
+ * Block according to BEM
+ */
+RV-Block(name)
+	{_css-prefix}-{name}
+		{block}
+
+/*
+ * Generates a CSS class for an block modifier
+ * according to BEM. 
+ */
+RV-Block__Modifier(name)
+	&{get_block_selector()}--{name}
+		{block}
+
+/*
+ * Generates an CSS class for an element
+ * according to BEM. Also minds the element modifiers
+ * For more see RV-Element___Modifier
+ */
+RV-Element(name)
+	block-selector = get_block_selector()
+	// Are we in a block?
+	if length(block-selector) > 0
+	
+		//Create Selector and output the CSS for the element
+		{block-selector}__{name}
+			{block}
+			
+			// Checking for modifiers
+			l = length(_element-modifier) - 1
+			for i in range(0, l)
+				modifier = pop(_element-modifier)
+				callback = modifier['callback']
+				// Calling the modifiers block,
+				// passing the name of the element
+				callback(
+					element: name,
+					name: modifier['name'],
+					modifier_block: modifier['block']
+				)
+
+/*
+ * 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
+ * are called first there is no way of knowing what the
+ * current element is named. To solve this, we store
+ * a callback for the modifier and add the element name
+ * from RV-Element
+ */
+RV-Element__Modifier(name)
+	callback = @(element, name, modifier_block){
+		&{get_block_selector()}__{element}--{name}{
+			{modifier_block}
+		}
+	}
+	push(_element-modifier, {
+		callback: callback
+		name: name 
+		block: block,
+	})
\ No newline at end of file
diff --git a/components/00_Global/_global.styl b/components/00_Global/_global.styl
index d22fabe..7759695 100644
--- a/components/00_Global/_global.styl
+++ b/components/00_Global/_global.styl
@@ -1,3 +1,4 @@
+@import './_bemGenerator'
 @import './_selectorHook'
 
 @import './_elementAmount'