Converting Layouts to Stylus

components/00_Global/_alignment.scss

@@ -1,9 +0,0 @@
-@mixin RV-Reset {
-	margin: 0;
-	padding: 0;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	border: none;
-}

components/00_Global/_alignment.styl

@@ -0,0 +1,8 @@
+RV-Reset()
+	margin 0
+	padding 0
+	top 0
+	bottom 0
+	left 0
+	right 0
+	border none

components/00_Global/_elementAmount.scss

@@ -1,9 +0,0 @@
-@mixin RV-Utils__ElementAmount($-up-to: 20) {
-    @for $i from 1 through $-up-to {
-
-        *:first-child:nth-last-child(#{$i}),
-        *:first-child:nth-last-child(#{$i})~* {
-            @content($i);
-        }
-    }
-}

components/00_Global/_elementAmount.styl

@@ -0,0 +1,6 @@
+RV-Utils__ElementAmount(callback, up-to=20) 
+	for i in (1..up-to)
+
+		*:first-child:nth-last-child({i}),
+		*:first-child:nth-last-child({i})~*
+			callback(i, up-to)

components/00_Global/_global.scss

@@ -1,4 +0,0 @@
-@import './selectorHook';
-@import './elementAmount';
-
-@import './alignment';

components/00_Global/_global.styl

@@ -0,0 +1,4 @@
+@import './_selectorHook'
+
+@import './_elementAmount'
+@import './_alignment'

components/00_Global/_selectorHook.scss

@@ -1,90 +0,0 @@
-$-hooks: ();
-@use "sass:meta";
-
-
-/*
- * A system to store a context for a CSS-Selector.
- * Can be used to apply speacial rules when mixins are combined
- */
-
-@function str-replace($string, $search, $replace: '') {
-    $index: str-index($string, $search);
-
-    @if $index {
-        @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-    }
-
-    @return $string;
-}
-
-/*
- * Generates a key-safe version of the selector
- */
-@function _generate_selector_identifier() {
-    $-path: str-replace(#{&}, '.', '');
-    $-path: str-replace(#{$-path}, ' ', '');
-
-    @return $-path;
-}
-
-@function hook($-key, $-value) {
-
-    $-path: _generate_selector_identifier();
-
-    $-context: ();
-
-    @if map-has-key($-hooks, $-path) {
-        $-context: map-get($-hooks, $-path);
-    }
-
-    $-context: map-merge($-context, ($-key: $-value));
-
-    $-hooks: map-merge($-hooks, ($-path: $-context)) !global;
-
-    @return 'Creating Hook for '+#{&}+' with '+#{$-key}+': '+#{$-value};
-}
-
-@function append-hook($-kwargs) {
-    $-path: _generate_selector_identifier();
-
-    $-hooks: map-merge($-hooks, ($-path: map-merge(get-hook(), $-kwargs))) !global;
-    @return 'Added '+inspect($-kwargs)+' to the hook of '+#{&};
-}
-
-@function has-hook() {
-    @return map-has-key($-hooks, _generate_selector_identifier());
-}
-
-@function get-hook() {
-    $-map: map-get($-hooks, _generate_selector_identifier());
-
-    @if $-map !=null {
-        @return $-map;
-    }
-
-    @return ('selectors': ());
-}
-
-@function get-hook-value($-key) {
-
-    $-hook: get-hook();
-
-    @if $-hook !=null {
-        @if map-has-key($-hook, $-key) {
-            @return map-get($-hook, $-key);
-        }
-    }
-
-    @return null;
-}
-
-@mixin RV-Utils__Hook--catch {
-
-    @if has-hook() {
-        @content;
-    }
-}
-
-@mixin RV-Utils__Hook--throw($-kwargs, $-css-selectors...) {
-    @debug append-hook($-kwargs);
-}

components/00_Global/_selectorHook.styl

@@ -0,0 +1,32 @@
+_thrown_hooks = {}
+_caught_hooks = {}
+
+RV-Utils__Hook--throw(name, callback)
+	if name in _thrown_hooks
+		hook = _thrown_hooks[name]
+	else    
+		hook = {}
+	
+	hook[selector()] = callback
+	_thrown_hooks[name] = hook
+
+RV-Utils__Hook--catch(name, context)
+	if selector() in _caught_hooks
+		_catches = _caught_hooks[selector()]
+	else
+		_catches = {}
+	_catches[name] = context
+	_caught_hooks[selector()] = _catches
+	
+	for name, hook in _thrown_hooks
+		if selector() in hook
+			hook[selector()](context)
+
+_generate_hooks()
+	for catched_selector, catches in _caught_hooks
+		for name, context in catches
+			if name in _thrown_hooks
+				hook = _thrown_hooks[name]
+				for thrown_selector, callback in hook
+					{thrown_selector}{catched_selector}
+						callback(context)