5 files changed, 233 insertions, 420 deletions

diff --git a/src/_easing.scss b/src/_easing.scss
index 8bcfd39..6d66ea7 100644
--- a/src/_easing.scss
+++ b/src/_easing.scss
@@ -10,6 +10,8 @@
 ////
 
 @use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
 
 ///
 /// @access private
@@ -73,14 +75,14 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
 
     $sample-pool-key: $x1 + '_' + $x2;
 
-    @if not map-has-key($cubic-bezier-sample-pool, $sample-pool-key) {
+    @if not map.has-key($cubic-bezier-sample-pool, $sample-pool-key) {
         $samples: ();
 
         @for $i from 0 through $cubic-bezier-sample-pool-size {
-            $samples: append($samples, cubic-bezier-func($x1, $x2, math.div($i, $cubic-bezier-sample-pool-size)));
+            $samples: list.append($samples, cubic-bezier-func($x1, $x2, math.div($i, $cubic-bezier-sample-pool-size)));
         }
 
-        $cubic-bezier-sample-pool: map-merge($cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global;
+        $cubic-bezier-sample-pool: map.merge($cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global;
     }
 
     //
@@ -169,7 +171,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
             $a: $cur-t;
         }
 
-        @if abs($cur-x) < $cubic-bezier-subdiv-precision {
+        @if math.abs($cur-x) < $cubic-bezier-subdiv-precision {
             @return $cur-t;
         }
     }
@@ -184,19 +186,19 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
 ///
 @function cubic-bezier-t-for-x($x1, $x2, $x) {
     $sample-pool-key: $x1 + '_' + $x2;
-    $samples:         map-get($cubic-bezier-sample-pool, $sample-pool-key);
+    $samples:         map.get($cubic-bezier-sample-pool, $sample-pool-key);
 
     $intv-start:  0;
     $cur-sample:  1;
     $last-sample: $cubic-bezier-sample-pool-size;
 
-    @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) {
+    @while ($cur-sample != $last-sample) and (list.nth($samples, $cur-sample) <= $x) {
         $intv-start: $intv-start + math.div(1, $cubic-bezier-sample-pool-size);
         $cur-sample: $cur-sample + 1;
     }
     $cur-sample: $cur-sample - 1;
 
-    $dist:    math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample));
+    $dist:    math.div($x - list.nth($samples, $cur-sample), list.nth($samples, $cur-sample + 1) - list.nth($samples, $cur-sample));
     $guess-t: $intv-start + math.div($dist, $cubic-bezier-sample-pool-size);
 
     $init-slope: cubic-bezier-func-slope($x1, $x2, $guess-t);
@@ -210,6 +212,17 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
 }
 
 /// 
+/// Linear easing function.
+///
+/// @param {number} $x - Progress between 0 and 1 inclusive
+///
+/// @return {number}
+///
+@function linear($x) {
+    @return $x;
+}
+
+/// 
 /// Sinusoidal easing function (in direction).
 ///
 /// @param {number} $x - Progress between 0 and 1 inclusive
diff --git a/src/_functions.scss b/src/_functions.scss
index 9dd14b1..0d139b4 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -10,9 +10,32 @@
 ////
 
 @use 'sass:map';
+@use 'sass:list';
 @use 'sass:math';
+@use 'sass:string';
+@use 'sass:meta';
 @use './vars';
 
+$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
+
+$units: (
+    'px':   1px,
+    'cm':   1cm,
+    'mm':   1mm,
+    '%':    1%,
+    'ch':   1ch,
+    'pc':   1pc,
+    'in':   1in,
+    'em':   1em,
+    'rem':  1rem,
+    'pt':   1pt,
+    'ex':   1ex,
+    'vw':   1vw,
+    'vh':   1vh,
+    'vmin': 1vmin,
+    'vmax': 1vmax
+);
+
 /// 
 /// Replace a substring with a new string.
 ///
@@ -23,10 +46,10 @@
 /// @return {string} A string with all instances of $search replaced with $replace
 ///
 @function str-replace($string, $search, $replace) {
-    $index: str-index($string, $search);
+    $index: string.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.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
     }
 
     @return $string;
@@ -44,9 +67,9 @@
     $result: '';
 
     @each $item in $list {
-        $result: $result + if(length($item) > 1, str-implode($item, $glue), $item);
+        $result: $result + if(list.length($item) > 1, str-implode($item, $glue), $item);
 
-        @if $item != nth($list, length($list)) {
+        @if $item != list.nth($list, list.length($list)) {
             $result: $result + $glue;
         }
     }
@@ -63,13 +86,13 @@
 ///
 /// @return {list} A slice of the list
 ///
-@function list-slice($list, $start: 1, $end: length($list)) {
+@function list-slice($list, $start: 1, $end: list.length($list)) {
     $result: ();
 
     @if $end >= $start {
         @for $i from $start through $end {
             @if $i != 0 {
-                $result: append($result, nth($list, $i), list-separator($list));
+                $result: list.append($result, list.nth($list, $i), list.separator($list));
             }
         }
     }
@@ -86,11 +109,11 @@
 /// @return {list} A list with $value at the beginning, followed by the other items
 ///
 @function list-prepend($list, $value) {
-    $result: append((), $value, list-separator($list));
+    $result: list.append((), $value, list.separator($list));
 
-    @if length($list) > 0 {
-        @for $i from 1 through length($list) {
-            $result: append($result, nth($list, $i), list-separator($list));
+    @if list.length($list) > 0 {
+        @for $i from 1 through list.length($list) {
+            $result: list.append($result, list.nth($list, $i), list.separator($list));
         }
     }
 
@@ -105,13 +128,13 @@
 /// @return {list} Teh reversed list
 ///
 @function list-reverse($list) {
-    @if length($list) == 0 {
+    @if list.length($list) == 0 {
         @return $list;
     }
 
     $result: ();
-    @for $i from length($list) * -1 through -1 {
-        $result: append($result, nth($list, abs($i)));
+    @for $i from list.length($list) * -1 through -1 {
+        $result: list.append($result, list.nth($list, math.abs($i)));
     }
     @return $result;
 }
@@ -126,11 +149,11 @@
 ///
 /// @return {list} Sorted list
 ///
-@function quicksort($l, $left: 1, $right: length($l)) {
+@function quicksort($l, $left: 1, $right: list.length($l)) {
     @if $left < $right {
         $pvr:   quicksort-partition($l, $left, $right);
-        $pivot: nth($pvr, 1);
-        $l:     nth($pvr, 2);
+        $pivot: list.nth($pvr, 1);
+        $l:     list.nth($pvr, 2);
         $l:     quicksort($l, $left, $pivot);
         $l:     quicksort($l, $pivot + 1, $right);
     }
@@ -145,30 +168,30 @@
     $start: true;
     $i:     $left;
     $j:     $right - 1;
-    $pivot: nth($l, $right);
+    $pivot: list.nth($l, $right);
 
     @while ($i < $j) or $start {
-        @while (nth($l, $i) < $pivot) and ($i < $right - 1) {
+        @while (list.nth($l, $i) < $pivot) and ($i < $right - 1) {
             $i: $i + 1;
         }
 
-        @while (nth($l, $j)>= $pivot) and ($j > $left) {
+        @while (list.nth($l, $j)>= $pivot) and ($j > $left) {
             $j: $j - 1;
         }
 
         @if $i < $j {
-            $i-val: nth($l, $i);
-            $l:     set-nth($l, $i, nth($l, $j));
-            $l:     set-nth($l, $j, $i-val);
+            $i-val: list.nth($l, $i);
+            $l:     list.set-nth($l, $i, list.nth($l, $j));
+            $l:     list.set-nth($l, $j, $i-val);
         }
 
         $start: false;
     }
 
-    @if nth($l, $i) > $pivot {
-        $i-val: nth($l, $i);
-        $l:     set-nth($l, $i, nth($l, $right));
-        $l:     set-nth($l, $right, $i-val);
+    @if list.nth($l, $i) > $pivot {
+        $i-val: list.nth($l, $i);
+        $l:     list.set-nth($l, $i, list.nth($l, $right));
+        $l:     list.set-nth($l, $right, $i-val);
     }
 
     @return $i $l;
@@ -185,10 +208,10 @@
 /// @return {any} Either the value assigned to $key or $default
 ///
 @function map-get-default($map, $key, $keys...) {
-    $default: nth($keys, length($keys));
-    $keys:    list-slice($keys, 1, length($keys) - 1);
+    $default: list.nth($keys, list.length($keys));
+    $keys:    list-slice($keys, 1, list.length($keys) - 1);
 
-    @return if(map-has-key($map, $key, $keys...), map-get($map, $key, $keys...), $default);
+    @return if(map.has-key($map, $key, $keys...), map.get($map, $key, $keys...), $default);
 }
 
 /// 
@@ -204,11 +227,11 @@
     @each $key, $value in $map {
         $value-str: '';
 
-        @if type-of($value) == map {
+        @if meta.type-of($value) == map {
             $value-str: '[ ' + map-print($value) + ' ]';
-        } @else if type-of($value) == list {
+        } @else if meta.type-of($value) == list {
             $value-str: '[ ' + str-implode($value, ', ') + ' ]';
-        } @else if type-of($value) == string {
+        } @else if meta.type-of($value) == string {
             $value-str: '\'' + $value + '\'';
         } @else {
             $value-str: $value;
@@ -243,8 +266,8 @@
                 @if not $sel-match {
                     $suf-match: true;
 
-                    @for $i from 1 through length($suffix) {
-                        @if $suf-match and (nth($sel, -$i) != nth($suffix, -$i)) {
+                    @for $i from 1 through list.length($suffix) {
+                        @if $suf-match and (list.nth($sel, -$i) != list.nth($suffix, -$i)) {
                             $suf-match: false;
                         }
                     }
@@ -287,6 +310,61 @@
     @return math.div($size, $base) * 1rem;
 }
 
+///
+/// Casts a string into a number
+///
+/// @param {string|number} $value
+///
+/// @return {number}
+///
+@function to-number($value) {
+    @if meta.type-of($value) == 'number' {
+        @return $value;
+    }
+    @if meta.type-of($value) != 'string' {
+        @error 'Value for `to-number` should be a number or a string.';
+    }
+    
+    $result:  0;
+    $digits:  0;
+    $minus:   string.slice($value, 1, 1) == '-';
+    
+    @for $i from if($minus, 2, 1) through string.length($value) {
+        $character: string.slice($value, $i, $i);
+        
+        @if not list.index(map.keys($numbers), $character) and $character != '.' {
+            @return to-length(if($minus, -$result, $result), string.slice($value, $i));
+        }
+        
+        @if $character == '.' {
+            $digits: 1; 
+        } @else if $digits == 0 {
+            $result: $result * 10 + map.get($numbers, $character);  
+        } @else {
+            $digits: $digits * 10;
+            $result: $result + math.div(map.get($numbers, $character), $digits);
+        }
+    }  
+  
+    @return if($minus, -$result, $result);
+}
+
+///
+/// Add $unit to $value
+///
+/// @param {number} $value - Value to add unit to
+/// @param {string} $unit  - String representation of the unit
+///
+/// @return {number} $value expressed in $unit
+///
+@function to-length($value, $unit) {
+    @if not list.index(map.keys($units), $unit) {
+        @error 'Invalid unit `#{$unit}`.';
+    }
+    
+    @return $value * map.get($units, $unit);
+}
+
 /// 
 /// A mixin with the sole purpose of letting you use temporary variables without polluting the global namespace.
 ///
diff --git a/src/index.scss b/src/_iro-sass.scss
index cc9cda7..d1b8ee3 100644
--- a/src/index.scss
+++ b/src/_iro-sass.scss
@@ -1,9 +1,9 @@
-@forward 'bem' as bem-*;
+@forward 'vars' as vars-*;
+@forward 'functions' as fn-*;
 @forward 'contexts' as ctx-*;
+@forward 'props' as props-*;
+@forward 'bem' as bem-*;
 @forward 'easing' as easing-*;
-@forward 'functions' as fn-*;
 @forward 'gradients' as gradients-*;
-@forward 'harmony' as harmony-*;
-@forward 'props' as props-*;
 @forward 'responsive' as responsive-*;
-@forward 'vars' as vars-*;
+@forward 'harmony' as harmony-*;
diff --git a/src/_props.scss b/src/_props.scss
index 8d84aa1..300fc28 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -1,423 +1,139 @@
-////
-/// Property trees.
-///
-/// Property trees allow you to organize properties in a tree structure (internally nested maps).
-/// The intended use is to store all your properties at the beginning and for the rest of the
-/// stylesheet you just get them.
-///
-/// @group Property trees
-///
-/// @access public
-////
-
+@use 'sass:list';
 @use 'sass:map';
-@use './functions';
-@use './contexts';
-
-///
-/// The maximum depth of resolved iro-prop-ref() references.
-///
-/// @type number
-///
-$native-assign-max-depth: 2 !default;
-
-///
-/// Indicate if property names must start with two dashes (--).
-/// This is required if property trees are also used for native CSS custom properties.
-///
-/// @type bool
-///
-$enforce-double-dashes: true !default;
-
-///
-/// Default tree name to use if no name is specified.
-///
-/// @type string
-///
-$default-tree: 'default' !default;
-
-///
-/// List of all created property trees.
-///
-/// @type list
-///
-/// @access private
-///
-$trees: ();
-
-///
-/// Default context name used for the namespace context.
-///
-/// @type string
-///
-$namespace-context-id: 'namespace' !default;
-
-///
-/// Declare a namespace, meaning that all variables declared and accessed.
-///
-/// @param {string} $name - Name of the namespace
-///
-@mixin namespace($name) {
-    $key: '--#{$name}';
+@use 'sass:meta';
 
-    $ns-key: get-ns-key();
-
-    @if $ns-key != null {
-        $key: append($ns-key, $key);
-    } @else {
-        $key: ($key);
+@function is-prop-ref($value) {
+    @if meta.type-of($value) != 'list' {
+        @return false;
     }
-
-    @include contexts.push($namespace-context-id, 'namespace', (
-        'name': $name,
-        'key':  $key
-    ));
-
-    @content;
-
-    @include contexts.pop($namespace-context-id);
-}
-
-///
-/// Get the current namespace name.
-///
-@function namespace() {
-    $noop: contexts.assert-stack-must-contain($namespace-context-id, 'namespace');
-
-    $data: nth(contexts.get($namespace-context-id, 'namespace'), 2);
-    $name: map-get($data, 'name');
-
-    @return $name;
-}
-
-/// 
-/// Save a property tree. If a tree with the sane name already exists, the trees
-/// will be merged.
-///
-/// @param {map}    $map                             - Map containing properties
-/// @param {string} $tree  [$default-tree] - ID the map is saved as
-/// @param {bool}   $merge [true]                    - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted.
-///
-@mixin store($map, $tree: $default-tree, $merge: true, $global: false) {
-    $noop: store($map, $tree, $merge, $global);
-}
-
-/// 
-/// Save a property tree.
-///
-/// @param {map}    $map                             - Map containing properties
-/// @param {string} $tree  [$default-tree] - ID the map is saved as
-/// @param {bool}   $merge [true]                    - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted.
-///
-@function store($map, $tree: $default-tree, $merge: true, $global: false) {
-    $prop-map: null;
-
-    @if $enforce-double-dashes {
-        @if not validate($map) {
-            @error 'Property tree keys must start with two dashes (--). If you don\'t use property trees for native CSS custom properties, set $enforce-double-dashes to false.';
-        }
+    @if list.length($value) != 4 {
+        @return false;
     }
-
-    @if not $global {
-        $ns-key: get-ns-key();
-
-        @if $ns-key != null {
-            $map: ($ns-key: $map);
-        }
+    @if list.nth($value, 1) != 'prop-ref' {
+        @return false;
     }
-
-    @if map-has-key($trees, $tree) {
-        @if $merge {
-            $map: map.deep-merge(map-get($trees, $tree), $map);
-        } @else {
-            @error 'Property tree #{inspect($tree)} does already exist.';
-        }
-    }
-
-    $trees: map-merge($trees, ($tree: $map)) !global;
-
-    @return null;
+    @return true;
 }
 
-/// 
-/// Delete a property tree.
-///
-/// @param {string} $tree [$default-tree] - ID of the tree to be deleted
-///
-@mixin clear($tree: $default-tree) {
-    $noop: clear($tree);
+@function def($name, $value: (), $metadata: ()) {
+    @return ('prop-ref' $name $value $metadata);
 }
 
-/// 
-/// Delete a property tree.
-///
-/// @param {string} $tree [$default-tree] - ID of the tree to be deleted
-///
-/// @throw If the property tree does not exist
-///
-@function clear($tree: $default-tree) {
-    @if not map-has-key($trees, $tree) {
-        @error 'Property tree "#{inspect($tree)}" does not exist.';
+@function merge($ref, $value) {
+    @if not is-prop-ref($ref) {
+        @return $ref;
     }
 
-    $trees: map-remove($trees, $tree) !global;
-
-    @return null;
+    $v:   list.nth($ref, 3);
+    $ref: list.set-nth($ref, 3, map.deep-merge($v, $value));
+    @return $ref;
 }
 
-/// 
-/// Access a whole property or a subsection (i.e. value) of it.
-///
-/// @param {string | list} $key     [null]                    - Key of the property to read. If this is a list of keys, the map will be traversed in that order.
-/// @param {string}        $tree    [$default-tree] - ID of the property tree to use
-/// @param {any}           $default [null]                    - Default value to return of no match was found. If null, this function will throw an error instead.
-///
-/// @return {any} Value assigned to property or $default
-///
-/// @throw If there was no match for $key and $default is null
-///
-@function get-static($key: (), $tree: $default-tree, $default: null, $global: false) {
-    @if not map-has-key($trees, $tree) {
-        @error 'Unknown tree "#{$tree}".';
+@function get-deep($name, $value, $key: null, $keys...) {
+    @if is-prop-ref($value) {
+        @return get($value, $key, $keys);
     }
-
-    $result: map-get($trees, $tree);
-
-    @if not $global {
-        $ns-key: get-ns-key();
-
-        @if $ns-key != null {
-            $orig-key: $key;
-            $key:      $ns-key;
-
-            @if type-of($orig-key) == list {
-                @each $subkey in $orig-key {
-                    $key: append($key, $subkey);
-                }
-            } @else {
-                $key: append($key, $orig-key);
-            }
+    @if meta.type-of($value) == 'map' and $key != null {
+        @if meta.type-of($key) != 'string' {
+            @error 'Expected string, got #{$key}';
         }
+        @return get-deep(#{$name}#{$key}, map.get($value, $key), $keys...);
     }
-
-    @if type-of($key) == list {
-        $stop: false;
-
-        @each $k in $key {
-            @if not $stop and map-has-key($result, $k) {
-                $result: map-get($result, $k);
-
-                @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' {
-                    @if length($result) == 2 {
-                        $result: get-static($tree: nth($result, 2), $global: true);
-                    } @else {
-                        $result: get-static(nth($result, 3), nth($result, 2), $global: true);
-                    }
-                }
-            } @else {
-                $stop: true;
-            }
-        }
-
-        @if $stop {
-            $result: null;
-        }
-    } @else {
-        $result: map-get($result, $key);
-
-        @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' {
-            @if length($result) == 2 {
-                $result: get-static($tree: nth($result, 2), $global: true);
-            } @else {
-                $result: get-static(nth($result, 3), nth($result, 2), $global: true);
-            }
-        }
-    }
-
-    @if $result == null {
-        @if $default == null {
-            @error '"#{$key}" is null.';
-        } @else {
-            @return $default;
-        }
-    }
-
-    @return $result;
+    @return $name $value;
 }
 
-/// 
-/// Generate a var() function call to get native CSS custom property.
-///
-/// @param {string | list} $key            - Key of the property to read. If this is a list of keys, the map will be traversed in that order.
-/// @param {string | null} $tree    [null] - Optional tree to check if the property actually exists.
-/// @param {any}           $default [null] - Default value to return of no match was found.
-///
-/// @return {string} var()
-///
-@function get($key, $tree: $default-tree, $default: null, $global: false) {
-    @if $tree != null {
-        $noop: get-static($key, $tree, $default, $global);
-    }
-
-    @if not $global {
-        $ns-key: get-ns-key();
-
-        @if $ns-key != null {
-            $orig-key: $key;
-            $key:      $ns-key;
-
-            @if type-of($orig-key) == list {
-                @each $subkey in $orig-key {
-                    $key: append($key, $subkey);
-                }
-            } @else {
-                $key: append($key, $orig-key);
-            }
+@function map-to-vars($name, $map) {
+    @if meta.type-of($map) != 'map' {
+        @if meta.type-of($name) != 'string' {
+            @error 'Expected variable name, got #{$name} instead';
         }
+        @return var($name);
     }
 
-    $native-var: '';
+    $out: ();
 
-    @if type-of($key) == list {
-        @each $subkey in $key {
-            $native-var: $native-var + $subkey;
-        }
-    } @else {
-        $native-var: $key;
+    @each $key, $value in $map {
+        $out: map.set($out, $key, map-to-vars(#{$name}#{$key}, $value));
     }
 
-    @if $default == null {
-        @return var(#{$native-var});
-    } @else {
-        @return var(#{$native-var}, #{$default});
-    }
+    @return $out;
 }
 
-/// 
-/// Generate assignments for native CSS custom properties with the values from the specified tree.
-///
-/// @param {string} $tree [$default-tree] - ID of the property tree to use
-/// @param {string} $root [()]                      - Sub-tree to use for assignment
-///
-@mixin assign($tree: $default-tree, $root: (), $skip: (), $prefix: '', $global: false) {
-    $map: get-static($root, $tree, $global: $global);
-    $map: map-remove($map, $skip...);
-
-    @if type-of($prefix) == list {
-        $prefix: functions.str-implode($prefix);
+@function get($ref, $key: null, $keys...) {
+    @if not is-prop-ref($ref) {
+        @return $ref;
     }
 
-    @if not $global {
-        $ns-key: get-ns-key();
+    $name:  list.nth($ref, 2);
+    $value: get(list.nth($ref, 3));
 
-        @if $ns-key != null {
-            $prefix: $prefix + functions.str-implode($ns-key);
+    @if meta.type-of($value) == 'map' {
+        $res:   get-deep($name, $value, $key, $keys...);
+        $name:  list.nth($res, 1);
+        $value: list.nth($res, 2);
+    } @else if meta.type-of($value) == 'list' {
+        $i: 1;
+        @each $item in $value {
+            $value: list.set-nth($value, $i, get($item));
+            $i: $i + 1;
         }
     }
 
-    @include assign-internal($map, $prefix);
+    @return map-to-vars($name, $value);
 }
 
-///
-/// @access private
-///
-@mixin assign-internal($map, $prefix: '', $ref-depth: $native-assign-max-depth) {
-    @each $key, $value in $map {
-        $rd: $ref-depth;
-        @if type-of($value) == list and length($value) > 0 and nth($value, 1) == 'iro-prop-ref' {
-            @if $ref-depth != 0 {
-                $rd: $rd - 1;
-                @if length($value) == 2 {
-                    $value: get-static($tree: nth($value, 2));
-                } @else {
-                    $value: get-static(nth($value, 3), nth($value, 2));
-                }
-            } @else {
-                $value: null;
-            }
-        }
-        @if type-of($value) != map and $value != () {
-            #{$prefix + $key}: #{$value};
-        } @else {
-            @include assign-internal($value, $prefix + $key, $rd);
+@mixin materialize-helper($name, $value) {
+    @if meta.type-of($value) == 'map' {
+        @each $key, $value in $value {
+            @include materialize-helper(#{$name}#{$key}, $value);
         }
+    } @else {
+        #{$name}: #{$value};
     }
 }
 
-/// 
-/// Validate property names.
-///
-/// @access private
-///
-@function validate($map) {
-    @each $key, $value in $map {
-        @if str-index($key, '--') != 1 {
-            @return false;
-        }
+@mixin materialize($ref, $match-meta: ()) {
+    @if is-prop-ref($ref) {
+        $name:  list.nth($ref, 2);
+        $value: get(list.nth($ref, 3));
+        $meta:  get(list.nth($ref, 4));
 
-        @if type-of($value) == map {
-            @if not validate($value) {
-                @return false;
+        $match: true;
+        @if meta.type-of($match-meta) == 'list' {
+            @each $item in $match-meta {
+                $match: $match and list.index($meta, $item) != null;
             }
+        } @else if $match-meta == null and list.length($meta) == 0 {
+            $match: true;
+        } @else {
+            $match: list.index($meta, $match-meta) != null;
         }
-    }
-
-    @return true;
-}
-
-/// 
-/// Generate a reference to another tree. Dereferencing is lazy, so you may specify a tree that hasn't been created yet.
-///
-/// @param {string}        $tree [$default-tree] - ID of the property tree to use
-/// @param {string | list} $key                            - Key of the property to read. If this is a list of keys, the map will be traversed in that order.
-///
-/// @return {list} A special list that let's Ignis know that this is a lazy value.
-///
-/// @throw If there was no match for $key and $default is null
-///
-@function ref($tree: $default-tree, $key: null, $global: false) {
-    @if not $global {
-        $ns-key: get-ns-key();
 
-        @if $ns-key != null {
-            $orig-key: $key;
-            $key:      $ns-key;
+        @if $match {
+            @include materialize-helper($name, $value);
+        }
+    } @else if meta.type-of($ref) == 'list' {
+        @each $r in $ref {
+            @if is-prop-ref($r) {
+                $name:  list.nth($r, 2);
+                $value: get(list.nth($r, 3));
+                $meta:  get(list.nth($r, 4));
 
-            @if $orig-key != null {
-                @if type-of($orig-key) == list {
-                    @each $subkey in $orig-key {
-                        $key: append($key, $subkey);
+                $match: true;
+                @if meta.type-of($match-meta) == 'list' {
+                    @each $item in $match-meta {
+                        $match: $match and list.index($meta, $item) != null;
                     }
+                } @else if $match-meta == null and list.length($meta) == 0 {
+                    $match: true;
                 } @else {
-                    $key: append($key, $orig-key);
+                    $match: list.index($meta, $match-meta) != null;
+                }
+        
+                @if $match {
+                    @include materialize-helper($name, $value);
                 }
             }
         }
     }
-
-    @if $key == null {
-        @return ('iro-prop-ref' $tree);
-    } @else {
-        @return ('iro-prop-ref' $tree $key);
-    }
-}
-
-/// 
-/// Get the current namespace key.
-///
-/// @access private
-///
-@function get-ns-key() {
-    $ctx: contexts.get($namespace-context-id, 'namespace');
-
-    @if $ctx == null {
-        @return null;
-    }
-
-    $data: nth($ctx, 2);
-    $key:  map-get($data, 'key');
-
-    @return $key;
 }
-
-@include contexts.create($namespace-context-id);
diff --git a/src/bem/_block.scss b/src/bem/_block.scss
index 49af04b..cfa9f33 100644
--- a/src/bem/_block.scss
+++ b/src/bem/_block.scss
@@ -56,7 +56,13 @@
 
     @include contexts.push(vars.$context-id, $context...);
     @at-root #{$selector} {
-        @content;
+        @if $type != null {
+            @layer #{$type} {
+                @content;
+            }
+        } @else {
+            @content;
+        }
     }
     @include contexts.pop(vars.$context-id);
 }