From 535ccba1a28bfb5ae766398d59d01708410960a2 Mon Sep 17 00:00:00 2001
From: Johnny Seyd <johnnyseyd@gmail.com>
Date: Wed, 15 Jun 2022 16:38:25 +0200
Subject: [PATCH] + element mixin + selector-trim function +
 selector-trim-combinators function

---
 package.json                                  |   4 +-
 src/_private.mixins.scss                      |  41 ++++-
 src/_public.functions.scss                    |  31 +++-
 src/_public.mixins.scss                       | 146 ++++++++++++++++++
 src/_spot-css.scss                            |   2 +-
 .../element.error.already-registered-1.css    |   1 +
 .../element.error.already-registered-2.css    |   7 +
 .../element/element.error.duplicate.css       |   1 +
 .../element/element.error.in-default.css      |   1 +
 .../element/element.error.in-modifier.css     |   1 +
 .../element.error.missing-separator.css       |   1 +
 .../element/element.error.no-component.css    |   1 +
 .../element/element.error.no-selector.css     |   1 +
 .../element/element.error.no-selectors-1.css  |   1 +
 .../element/element.error.no-selectors-2.css  |   1 +
 .../element/element.error.simple-selector.css |   1 +
 .../element/element.error.single-selector.css |   1 +
 .../element.error.unknown-unregistered.css    |   1 +
 .../element.mixin.multiple-selectors.css      |  31 ++++
 .../public/element/element.mixins.css         |  39 +++++
 ...tate.modifier.error.unknown-modifier-3.css |   1 -
 .../state.modifier.error.unknown-modifier.css |   2 +-
 ...iant.modifier.error.unknown-modifier-3.css |   1 -
 ...ariant.modifier.error.unknown-modifier.css |   2 +-
 .../element.error.already-registered-1.sass   |  15 ++
 .../element.error.already-registered-2.sass   |  14 ++
 .../element/element.error.duplicate.sass      |  19 +++
 .../element/element.error.in-default.sass     |  14 ++
 .../element/element.error.in-modifier.sass    |  13 ++
 .../element.error.missing-separator.sass      |  13 ++
 .../element/element.error.no-component.sass   |  10 ++
 .../element/element.error.no-selector.sass    |   8 +
 .../element/element.error.no-selectors-1.sass |   7 +
 .../element/element.error.no-selectors-2.sass |   7 +
 .../element.error.simple-selector.sass        |   5 +
 .../element.error.single-selector.sass        |   5 +
 .../element.error.unknown-unregistered.sass   |  14 ++
 .../element.mixin.multiple-selectors.sass     |  25 +++
 .../input/public/element/element.mixins.sass  |  50 ++++++
 ...ate.modifier.error.unknown-modifier-3.sass |  27 ----
 ...ant.modifier.error.unknown-modifier-3.sass |  27 ----
 41 files changed, 522 insertions(+), 70 deletions(-)
 create mode 100644 test/sass/expected-output/public/element/element.error.already-registered-1.css
 create mode 100644 test/sass/expected-output/public/element/element.error.already-registered-2.css
 create mode 100644 test/sass/expected-output/public/element/element.error.duplicate.css
 create mode 100644 test/sass/expected-output/public/element/element.error.in-default.css
 create mode 100644 test/sass/expected-output/public/element/element.error.in-modifier.css
 create mode 100644 test/sass/expected-output/public/element/element.error.missing-separator.css
 create mode 100644 test/sass/expected-output/public/element/element.error.no-component.css
 create mode 100644 test/sass/expected-output/public/element/element.error.no-selector.css
 create mode 100644 test/sass/expected-output/public/element/element.error.no-selectors-1.css
 create mode 100644 test/sass/expected-output/public/element/element.error.no-selectors-2.css
 create mode 100644 test/sass/expected-output/public/element/element.error.simple-selector.css
 create mode 100644 test/sass/expected-output/public/element/element.error.single-selector.css
 create mode 100644 test/sass/expected-output/public/element/element.error.unknown-unregistered.css
 create mode 100644 test/sass/expected-output/public/element/element.mixin.multiple-selectors.css
 create mode 100644 test/sass/expected-output/public/element/element.mixins.css
 delete mode 100644 test/sass/expected-output/public/state/state.modifier.error.unknown-modifier-3.css
 delete mode 100644 test/sass/expected-output/public/variant/variant.modifier.error.unknown-modifier-3.css
 create mode 100644 test/sass/input/public/element/element.error.already-registered-1.sass
 create mode 100644 test/sass/input/public/element/element.error.already-registered-2.sass
 create mode 100644 test/sass/input/public/element/element.error.duplicate.sass
 create mode 100644 test/sass/input/public/element/element.error.in-default.sass
 create mode 100644 test/sass/input/public/element/element.error.in-modifier.sass
 create mode 100644 test/sass/input/public/element/element.error.missing-separator.sass
 create mode 100644 test/sass/input/public/element/element.error.no-component.sass
 create mode 100644 test/sass/input/public/element/element.error.no-selector.sass
 create mode 100644 test/sass/input/public/element/element.error.no-selectors-1.sass
 create mode 100644 test/sass/input/public/element/element.error.no-selectors-2.sass
 create mode 100644 test/sass/input/public/element/element.error.simple-selector.sass
 create mode 100644 test/sass/input/public/element/element.error.single-selector.sass
 create mode 100644 test/sass/input/public/element/element.error.unknown-unregistered.sass
 create mode 100644 test/sass/input/public/element/element.mixin.multiple-selectors.sass
 create mode 100644 test/sass/input/public/element/element.mixins.sass
 delete mode 100644 test/sass/input/public/state/state.modifier.error.unknown-modifier-3.sass
 delete mode 100644 test/sass/input/public/variant/variant.modifier.error.unknown-modifier-3.sass

diff --git a/package.json b/package.json
index 7d021e4..a424aba 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spotcss",
-  "version": "1.0.22",
+  "version": "2.0.0",
   "description": "SPOT CSS Framework { Single Place Of Truth Methodology }",
   "main": "index.scss",
   "scripts": {
@@ -45,7 +45,7 @@
   "bugs": {
     "url": "https://github.com/seyd/spot-css/issues"
   },
-  "homepage": "https://www.spotcss.page",
+  "homepage": "https://www.spotcss.io",
   "dependencies": {},
   "devDependencies": {
     "cli-color": "^2.0.0",
diff --git a/src/_private.mixins.scss b/src/_private.mixins.scss
index 74ba309..77e9274 100644
--- a/src/_private.mixins.scss
+++ b/src/_private.mixins.scss
@@ -166,6 +166,20 @@
     $component: component();
     $component-to-extend: self();
     $is-internal-state: $modifier-name=='internal-state';
+    $is-super-modifier: str-index($modifier-name, 'super-')==1;
+    $second-param-is-number: length($args)==2 and type-of(nth($args, 2))=='number';
+    $second-param-index: '';
+    $super-component-index: 0;
+    @if $second-param-is-number { 
+        $second-param-index: nth($args, 2); 
+        $super-component-index: $second-param-index;
+    }
+
+    // for all non "super-" modifiers clear this index
+    @if not $is-super-modifier {
+        // clear this global variable
+        $_super-component-index: null !global;
+    }
 
     @if $is-internal-state {
         // for internal-state is relevant whole selector (every sub-child) 
@@ -176,14 +190,20 @@
     @else if _is-modifier-context-like($modifier-name) {
         $component: top-component();
     }
-    @else if str-index($modifier-name, 'super-')==1 {
+    @else {
         // convert super-state and super-variant into modifier state and variant
         $modifier-name: str-replace($modifier-name, 'super-', '');
         $sub-component-stack: $_current-components;
+        @if not $is-super-modifier {
+            // changing logic to parse as super-modifier also state and variant, we add extra (useless) item here
+            $sub-component-stack: append($_current-components, 'PLACEHOLDER_TO_REMOVE', 'space');
+        }
+
         $found: false;
         $sub-component-name-for-error: '';
         // just find component only for first identifier (all others are expected on the same component)
         $identifier: first($args);
+
         // find $identifier in parent component
         @while not $found and length($sub-component-stack)>1 {
             @if $_super-component-index != null {
@@ -192,14 +212,19 @@
             $sub-component-stack: pop($sub-component-stack);
             $component: #{$sub-component-stack};
             // if no index is given or current super component is given index
-            @if $_super-component-index == null or $_super-component-index == 0 {
+            @if $_super-component-index == null or $_super-component-index == 0 {                
                 $sub-component-name-for-error: $component;
                 $component-with-identifier: _get-component-identifier($component, $identifier);
                 $component-with-modifier: str-replace(_get-component-modifier($component, $modifier-name), ' &', '');
                 $modifiers: map-get($_registered-modifiers, $component-with-modifier);
                 $is-alias: index($_registered-aliases, str-replace($component-with-identifier, ' &', ''));
-                @if $is-alias or ($modifiers!=null and map-has-key($modifiers, $identifier)) {
-                    $found: true;
+                @if $is-alias or ($modifiers!=null and map-has-key($modifiers, $identifier)) {                    
+                    @if $super-component-index < 0 {
+                        $super-component-index: $super-component-index + 1;
+                    }
+                    @else {
+                        $found: true;
+                    }
                 }
             }
         }
@@ -230,6 +255,10 @@
         @error $SPOT_ERROR_PREFIX + $original-modifier-name+"/default-is-missing - the "+$original-modifier-name+" '"+inspect($args)+"' in component '"+$component+"' was used but default mixin wasn't used before it. Add 'default' mixin before all modifiers at first (even if it stays empty).";
     }
 
+    @if $second-param-is-number {
+        $args: pop($args);
+    }
+
     $current-modifier: $modifier-name + '(' + $args + ')';
     // add current modifier to the stack
     $current-modifier-stack: map-get($_current-modifiers-stack, $component); // for this component
@@ -327,9 +356,11 @@
 
     // check all selectors if wasn't used already
     $i: 0;
+    // for super-state|variant add index string to distinct already used state
+    @if $second-param-index!='' { $second-param-index: '[['+$second-param-index+']]'; }
     @each $single-selector in $selectors {
         $i: $i + 1;
-        $single-selector: _wrap_into_media_selector( str-replace($single-selector+'', '&', &) );
+        $single-selector: _wrap_into_media_selector( str-replace($single-selector+'', '&', &) )+$second-param-index;
         @if index($_already-used-selectors, $single-selector) {
             @error $SPOT_ERROR_PREFIX + $original-modifier-name+"/already-used-modifier - the "+$original-modifier-name+"('" + nth($args,$i) + "') is already used somewhere higher! Do not break the SPOT rule and use just single place for every variant "+$modifier-name+".";
         }
diff --git a/src/_public.functions.scss b/src/_public.functions.scss
index 2af1cce..30772a8 100644
--- a/src/_public.functions.scss
+++ b/src/_public.functions.scss
@@ -378,13 +378,13 @@
 
 @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 str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
     }
-    
+
     @return $string;
-  }
+}
 
 
 @function str-trim-left($s) {
@@ -423,6 +423,29 @@
     @return $selector;
 }
 
+// replace $search from the beginning or from the end of given single selector
+@function selector-trim($selector, $search) {
+    $selector: str-trim($selector);
+    $index: str-index($selector, $search);
+    $max: str-length($selector);
+
+    @while $index==1 or $index==$max  {
+        $selector: str-trim(str-slice($selector, 1, $index - 1) + str-slice($selector, $index + str-length($search)));
+        $index: str-index($selector, $search);
+        $max: str-length($selector);
+    }
+
+    @return $selector;
+}
+
+// it replaces '>', '~', '+' from the beginning or from the end of single selector
+@function selector-trim-combinators($selector) {
+    $selector: selector-trim($selector, '>');
+    $selector: selector-trim($selector, '~');
+    $selector: selector-trim($selector, '+');
+    @return $selector;
+}
+
 // It has to be simple selector (not contain comma separated selectors)
 // @return How many selector levels given selector contains.
 // @example:
diff --git a/src/_public.mixins.scss b/src/_public.mixins.scss
index 972dd74..013c93e 100644
--- a/src/_public.mixins.scss
+++ b/src/_public.mixins.scss
@@ -77,8 +77,10 @@
 ///
 /// 2) Components can be nested one into another.
 ///
+/// @deprecated from version 2
 /// @group Component
 /// @access public
+/// @deprecated from version 2+, instead use +element() mixin.
 /// @param { String } $selector - single selector of sub-component
 /// @content
 /// @throw SPOT CSS: sub-component/no-selector - selector was expected but nothing passed.
@@ -177,8 +179,10 @@
 ///
 /// 2) Components can be nested one into another.
 ///
+/// @deprecated from version 2
 /// @group Component
 /// @access public
+/// @deprecated from version 2+, instead use +element() mixin.
 /// @param { String } $selector - single selector of sub-component
 /// @content
 /// @throw SPOT CSS: sub-component/no-selector - selector was expected but nothing passed.
@@ -399,6 +403,7 @@
 ///
 /// @group Component
 /// @access public
+/// @deprecated from version 2+, use just +state('identifier',-1) or other negative index.
 /// @param { String } $args... - selector extension(s) = state names
 /// @content
 /// @throw See errors of mixin _super-modifier and _apply-modifier.
@@ -418,6 +423,7 @@
 ///
 /// @group Component
 /// @access public
+/// @deprecated from version 2+, use just +variant('identifier',-1) or other negative index.
 /// @param { String } $args... - selector extension(s) = variant names
 /// @content
 /// @throw See errors of mixin _super-modifier and _apply-modifier.
@@ -495,9 +501,148 @@
 }
 
 
+/// Element mixin to define sub elements in component.
+///
+/// Context, responsive and browser modifiers are inherited from parent component but element can register also its own.
+///
+/// 1) It checks if same element is defined multiple times. It is not allowed because Single Place Of Truth.
+///
+/// 2) Elements can be nested one into another.
+///
+/// @group Component
+/// @access public
+/// @since from version 2.0.0
+/// @param { String } $selector - single selector of sub element of component. It has to be single and simple selector.
+/// @content
+/// @throw SPOT CSS: element/no-selectors - at least one selector is expected.
+/// @throw SPOT CSS: element/no-component - you cannot use mixin element outside of component.
+/// @throw SPOT CSS: element/in-modifier - it is not allowed to use element in modifier '{current_modifier}'.
+/// @throw SPOT CSS: element/in-default - it is not allowed to call element mixin in default mixin (in component '{component}).
+/// @throw SPOT CSS: element/missing-separator - there is sub-element separator mixin (_______) missing before element mixin (in component '{component}').
+/// @throw SPOT CSS: element/already-registered - trying to register already registered element '{selector}' for component '{component}'.
+/// @throw SPOT CSS: element/unknown-unregistered - given element '{selector}' is not registered in direct parent component ('{component}').
+/// @throw SPOT CSS: element/duplicate - given element selector is already used in current block ('{selector}').";
+/// @throw SPOT CSS: element/no-selector - selector was expected but nothing passed.
+/// @throw SPOT CSS: element/single-selector - given selector is not a single selector, because contains comma(s): '{selector}'.
+/// @output Given selector with given content.
+@mixin element($selectors...) {
+    @if length($selectors)==0 {
+        @error $SPOT_ERROR_PREFIX + "element/no-selectors - at least one selector is expected.";
+    }
+
+    @if component()=='' {
+        @error $SPOT_ERROR_PREFIX + "element/no-component - you cannot use mixin element outside of component.";
+    }
+
+    // do not allow in modifier
+    @if $_is-modifier-mode {
+        @error $SPOT_ERROR_PREFIX + "element/in-modifier - it is not allowed to use element in modifier '"+$_current_modifier+"'.";
+    }
+
+    // do not allow in default mutation
+    @if $_is-default-mode {
+        @error $SPOT_ERROR_PREFIX + "element/in-default - it is not allowed to call element mixin in default mixin (in component '"+component()+"').";
+    }
+
+    // check for separator ____________________________
+    @if not $_is-register-mode and not $_was-used-sub-element-separator {
+        @error $SPOT_ERROR_PREFIX + "element/missing-separator - there is sub-element separator mixin (_______) missing before element mixin in component ('"+component()+"').";
+    }
+    // reset flag for next (sub)element
+    $_was-used-sub-element-separator: false !global;
+
+    // test for not empty and single selector
+    @each $selector in $selectors {
+        @if not $selector or $selector=="" {
+            @error $SPOT_ERROR_PREFIX + "element/no-selector - selector was expected but nothing passed.";
+        }
+        $parts: selector-parse($selector);
+        @if length($parts) > 1 {
+            @error $SPOT_ERROR_PREFIX + "element/single-selector - given selector is not a single selector, because contains comma(s): '"+$selector+"'.";
+        }
+
+        @if length-of-simple-selector(selector-trim-combinators($selector)) > 1 {            
+            @error $SPOT_ERROR_PREFIX + "element/simple-selector - given selector has to be simple selector withou spaces, '>' and '~' but is: '"+$selector+"'.";
+        }
+    }
+    
+    @if $_is-register-mode { 
+        // TODOS
+        // {alias} and selector(s)
+
+        @each $selector in $selectors {
+            $sub-component-selector: #{ & + ' ' + $selector };
+            
+            // guarding duplicity of sub-selectors
+            @if index($_already-used-selectors, $sub-component-selector) or index($_registered-sub-components, $sub-component-selector) {
+                @error $SPOT_ERROR_PREFIX + "element/already-registered - trying to register already registered element '"+$selector+"' for component '"+component()+"'.";
+            }
+            // store unique sub-component
+            $_already-used-selectors: append($_already-used-selectors, $sub-component-selector, 'comma') !global;
+            $_registered-sub-components: append($_registered-sub-components, $sub-component-selector, 'comma') !global;
+
+            // store current component selector (into stack)
+            $_current-components: append($_current-components, $selector, 'space') !global;
+
+            $_is-child-component-mode: true !global;
+
+            @at-root
+            #{$sub-component-selector} {
+                @content;
+            }
+
+            $_is-child-component-mode: false !global;
+
+            // remove current component selector (from stack)
+            $_current-components: pop($_current-components) !global;
+        }
+    }
+    @else {
+        // store appling sub element in current selector to avoid calling state, variant, etc. after element section (see error "/invalid-order")
+        @if not index($_selectors-with-sub-elements, &) {
+            $_selectors-with-sub-elements: append($_selectors-with-sub-elements, &) !global;
+        }
+
+        @each $selector in $selectors {
+            $sub-component-selector: #{ & + ' ' + $selector };
+            // check if element is registered
+            @if not index($_already-used-selectors, $sub-component-selector) {
+                @error $SPOT_ERROR_PREFIX + "element/unknown-unregistered - given element '"+$selector+"' is not registered in direct parent component ('"+component()+"').";
+            }
+            // 1)
+            // if already registred
+            @if index($_registered-components, $sub-component-selector)!=null {
+                @error $SPOT_ERROR_PREFIX + "element/duplicate - given element selector is already used in current block ('"+$sub-component-selector+"').";
+            }
+            @else {
+                // store component selector if is not stored yet
+                $_registered-components: append($_registered-components, $sub-component-selector, 'comma') !global;
+            }
+
+            // 2)
+            // store current component selector (into stack)
+            $_current-components: append($_current-components, $selector, 'space') !global;
+
+            $_is-child-component-mode: true !global;
+
+            @at-root
+            #{$sub-component-selector} {
+                @content;
+            }
+
+            $_is-child-component-mode: false !global;
+
+            // remove current component selector (from stack)
+            $_current-components: pop($_current-components) !global;
+        }
+    }
+}
+
+
 /// Declares direct child block in current component selector.
 /// @group Component
 /// @access public
+/// @deprecated from version 2+, instead use +element() mixin.
 /// @param { String } $selectors... - One or more selectors of direct childs. Each selector as a single selector in separate argument.
 /// @content
 /// @throw SPOT CSS: child-element/no-selectors - at least one child selector is expected.
@@ -520,6 +665,7 @@
 /// Note: It is strongly recomended to use <b>child-element</b> mixin everytime it is possible!
 /// @group Component
 /// @access public
+/// @deprecated from version 2+, instead use +element() mixin.
 /// @param { String } $selectors... - One or more selectors. Each selector as a single selector in separate argument.
 /// @content
 /// @throw SPOT CSS: sub-element/no-selectors - at least one selector is expected.
diff --git a/src/_spot-css.scss b/src/_spot-css.scss
index d126f33..4cb7ae5 100644
--- a/src/_spot-css.scss
+++ b/src/_spot-css.scss
@@ -4,7 +4,7 @@
 /// @author Johnny Seyd (johnnyseyd@gmail.com)
 /// @link https://github.com/seyd/spot-css
 ///
-$SPOT-CSS-FRAMEWORK: '1.0.22';
+$SPOT-CSS-FRAMEWORK: '2.0.0';
 //
 // Usage:
 //    @import "~spotcss";
diff --git a/test/sass/expected-output/public/element/element.error.already-registered-1.css b/test/sass/expected-output/public/element/element.error.already-registered-1.css
new file mode 100644
index 0000000..1265210
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.already-registered-1.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/already-registered */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.already-registered-2.css b/test/sass/expected-output/public/element/element.error.already-registered-2.css
new file mode 100644
index 0000000..de97c3a
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.already-registered-2.css
@@ -0,0 +1,7 @@
+.component {
+  property: value;
+}
+
+.component:hover {
+  property: value-2;
+}
diff --git a/test/sass/expected-output/public/element/element.error.duplicate.css b/test/sass/expected-output/public/element/element.error.duplicate.css
new file mode 100644
index 0000000..38a3d86
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.duplicate.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/duplicate */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.in-default.css b/test/sass/expected-output/public/element/element.error.in-default.css
new file mode 100644
index 0000000..bc3a873
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.in-default.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/in-default */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.in-modifier.css b/test/sass/expected-output/public/element/element.error.in-modifier.css
new file mode 100644
index 0000000..6b6721d
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.in-modifier.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/in-modifier */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.missing-separator.css b/test/sass/expected-output/public/element/element.error.missing-separator.css
new file mode 100644
index 0000000..9f5eebb
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.missing-separator.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/missing-separator */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.no-component.css b/test/sass/expected-output/public/element/element.error.no-component.css
new file mode 100644
index 0000000..9bdc52b
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.no-component.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/no-component */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.no-selector.css b/test/sass/expected-output/public/element/element.error.no-selector.css
new file mode 100644
index 0000000..3ff4a88
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.no-selector.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/no-selector */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.no-selectors-1.css b/test/sass/expected-output/public/element/element.error.no-selectors-1.css
new file mode 100644
index 0000000..587ecf7
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.no-selectors-1.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/no-selectors */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.no-selectors-2.css b/test/sass/expected-output/public/element/element.error.no-selectors-2.css
new file mode 100644
index 0000000..587ecf7
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.no-selectors-2.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/no-selectors */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.simple-selector.css b/test/sass/expected-output/public/element/element.error.simple-selector.css
new file mode 100644
index 0000000..720482c
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.simple-selector.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/simple-selector */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.single-selector.css b/test/sass/expected-output/public/element/element.error.single-selector.css
new file mode 100644
index 0000000..e4ba368
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.single-selector.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/single-selector */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.error.unknown-unregistered.css b/test/sass/expected-output/public/element/element.error.unknown-unregistered.css
new file mode 100644
index 0000000..ac3b012
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.error.unknown-unregistered.css
@@ -0,0 +1 @@
+/* Error SPOT CSS: element/unknown-unregistered */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/element/element.mixin.multiple-selectors.css b/test/sass/expected-output/public/element/element.mixin.multiple-selectors.css
new file mode 100644
index 0000000..bf1bd2b
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.mixin.multiple-selectors.css
@@ -0,0 +1,31 @@
+my-component {
+  property: value;
+}
+
+my-component[disabled] {
+  property: value-2;
+}
+
+my-component .wrapper-1 {
+  property: value-3;
+}
+
+my-component .wrapper-1[disabled] {
+  property: value-4;
+}
+
+my-component[disabled] .wrapper-1 {
+  property: value-5;
+}
+
+my-component .wrapper-2 {
+  property: value-3;
+}
+
+my-component .wrapper-2[disabled] {
+  property: value-4;
+}
+
+my-component[disabled] .wrapper-2 {
+  property: value-5;
+}
diff --git a/test/sass/expected-output/public/element/element.mixins.css b/test/sass/expected-output/public/element/element.mixins.css
new file mode 100644
index 0000000..8246040
--- /dev/null
+++ b/test/sass/expected-output/public/element/element.mixins.css
@@ -0,0 +1,39 @@
+my-component {
+  property: value;
+}
+
+my-component[disabled] {
+  property: value-2;
+}
+
+my-component .wrapper {
+  property: value-3;
+}
+
+my-component .wrapper[disabled] {
+  property: value-4;
+}
+
+my-component[disabled] .wrapper {
+  property: value-5;
+}
+
+my-component .wrapper > .wrapper-2 > .wrapper-3 {
+  property: value-6;
+}
+
+my-component .wrapper > .wrapper-2 > .wrapper-3[disabled] {
+  property: value-7;
+}
+
+my-component .wrapper[disabled] > .wrapper-2 > .wrapper-3 {
+  property: value-8;
+}
+
+my-component[disabled] .wrapper > .wrapper-2 > .wrapper-3 {
+  property: value-9;
+}
+
+my-component .wrapper > .wrapper-2 ~ .wrapper-4 {
+  property: value-10;
+}
diff --git a/test/sass/expected-output/public/state/state.modifier.error.unknown-modifier-3.css b/test/sass/expected-output/public/state/state.modifier.error.unknown-modifier-3.css
deleted file mode 100644
index fa16424..0000000
--- a/test/sass/expected-output/public/state/state.modifier.error.unknown-modifier-3.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Error SPOT CSS: state/unknown-modifier */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/state/state.modifier.error.unknown-modifier.css b/test/sass/expected-output/public/state/state.modifier.error.unknown-modifier.css
index fa16424..dcca083 100644
--- a/test/sass/expected-output/public/state/state.modifier.error.unknown-modifier.css
+++ b/test/sass/expected-output/public/state/state.modifier.error.unknown-modifier.css
@@ -1 +1 @@
-/* Error SPOT CSS: state/unknown-modifier */
\ No newline at end of file
+/* Error SPOT CSS: state/super-unknown-modifier */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/variant/variant.modifier.error.unknown-modifier-3.css b/test/sass/expected-output/public/variant/variant.modifier.error.unknown-modifier-3.css
deleted file mode 100644
index 01c117c..0000000
--- a/test/sass/expected-output/public/variant/variant.modifier.error.unknown-modifier-3.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Error SPOT CSS: variant/unknown-modifier */
\ No newline at end of file
diff --git a/test/sass/expected-output/public/variant/variant.modifier.error.unknown-modifier.css b/test/sass/expected-output/public/variant/variant.modifier.error.unknown-modifier.css
index 01c117c..96b7f9d 100644
--- a/test/sass/expected-output/public/variant/variant.modifier.error.unknown-modifier.css
+++ b/test/sass/expected-output/public/variant/variant.modifier.error.unknown-modifier.css
@@ -1 +1 @@
-/* Error SPOT CSS: variant/unknown-modifier */
\ No newline at end of file
+/* Error SPOT CSS: variant/super-unknown-modifier */
\ No newline at end of file
diff --git a/test/sass/input/public/element/element.error.already-registered-1.sass b/test/sass/input/public/element/element.error.already-registered-1.sass
new file mode 100644
index 0000000..b70388a
--- /dev/null
+++ b/test/sass/input/public/element/element.error.already-registered-1.sass
@@ -0,0 +1,15 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +state(':hover')
+        +element('.wrapper')
+        +element('.wrapper') // throw error - already registered
+    
+    +default
+        property: value
+    
+    +state(':hover')
+    
+    +____________________
+    +element('.wrapper') 
diff --git a/test/sass/input/public/element/element.error.already-registered-2.sass b/test/sass/input/public/element/element.error.already-registered-2.sass
new file mode 100644
index 0000000..ba7e230
--- /dev/null
+++ b/test/sass/input/public/element/element.error.already-registered-2.sass
@@ -0,0 +1,14 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +state(':hover')
+        +element('.wrapper') // this element has different position in DOM tree
+            +element('.other-parent')
+                +element('.wrapper') // so no error here
+
+    +default
+        property: value
+
+    +state(':hover')
+        property: value-2
\ No newline at end of file
diff --git a/test/sass/input/public/element/element.error.duplicate.sass b/test/sass/input/public/element/element.error.duplicate.sass
new file mode 100644
index 0000000..e78851a
--- /dev/null
+++ b/test/sass/input/public/element/element.error.duplicate.sass
@@ -0,0 +1,19 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +state(':hover')
+        +element('.wrapper')
+    
+    +default
+        property: value
+        
+    +state(':hover')
+
+    +___________________
+    +element('.wrapper')
+        property: value-2
+
+    +___________________
+    +element('.wrapper')
+        property: value-3
diff --git a/test/sass/input/public/element/element.error.in-default.sass b/test/sass/input/public/element/element.error.in-default.sass
new file mode 100644
index 0000000..15cd783
--- /dev/null
+++ b/test/sass/input/public/element/element.error.in-default.sass
@@ -0,0 +1,14 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +state(':hover')
+        +element('.wrapper')
+    
+    +default
+        property: value
+        
+        +___________________
+        +element('.wrapper') // throw error - in modifier
+
+    +state(':hover')
diff --git a/test/sass/input/public/element/element.error.in-modifier.sass b/test/sass/input/public/element/element.error.in-modifier.sass
new file mode 100644
index 0000000..1c8b717
--- /dev/null
+++ b/test/sass/input/public/element/element.error.in-modifier.sass
@@ -0,0 +1,13 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +state(':hover')
+        +element('.wrapper')
+    
+    +default
+        property: value
+
+    +state(':hover')
+        +___________________
+        +element('.wrapper') // throw error - in modifier
diff --git a/test/sass/input/public/element/element.error.missing-separator.sass b/test/sass/input/public/element/element.error.missing-separator.sass
new file mode 100644
index 0000000..fd2fc8e
--- /dev/null
+++ b/test/sass/input/public/element/element.error.missing-separator.sass
@@ -0,0 +1,13 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +state(':hover')
+        +element('.wrapper')
+    
+    +default
+        property: value
+    
+    +state(':hover')
+    
+    +element('.wrapper') // throw error - missign separator
diff --git a/test/sass/input/public/element/element.error.no-component.sass b/test/sass/input/public/element/element.error.no-component.sass
new file mode 100644
index 0000000..263c075
--- /dev/null
+++ b/test/sass/input/public/element/element.error.no-component.sass
@@ -0,0 +1,10 @@
+@import "./src/spot-css"
+
++element('.wrapper') // throw error - no component
+    
++component(".component")
+    +register
+        +state(':hover')
+    
+    +default
+        property: value
diff --git a/test/sass/input/public/element/element.error.no-selector.sass b/test/sass/input/public/element/element.error.no-selector.sass
new file mode 100644
index 0000000..51d789e
--- /dev/null
+++ b/test/sass/input/public/element/element.error.no-selector.sass
@@ -0,0 +1,8 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +element('') // throw error - no selector
+
+    property: value
+
diff --git a/test/sass/input/public/element/element.error.no-selectors-1.sass b/test/sass/input/public/element/element.error.no-selectors-1.sass
new file mode 100644
index 0000000..639adfb
--- /dev/null
+++ b/test/sass/input/public/element/element.error.no-selectors-1.sass
@@ -0,0 +1,7 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +element() // throw error - missing selector
+    
+    property: value
diff --git a/test/sass/input/public/element/element.error.no-selectors-2.sass b/test/sass/input/public/element/element.error.no-selectors-2.sass
new file mode 100644
index 0000000..0498c3e
--- /dev/null
+++ b/test/sass/input/public/element/element.error.no-selectors-2.sass
@@ -0,0 +1,7 @@
+@import "./src/spot-css"
+
++component(".component")
+    property: value
+
+    +_____________
+    +element() // throw error - missing selector
diff --git a/test/sass/input/public/element/element.error.simple-selector.sass b/test/sass/input/public/element/element.error.simple-selector.sass
new file mode 100644
index 0000000..9c6b9b5
--- /dev/null
+++ b/test/sass/input/public/element/element.error.simple-selector.sass
@@ -0,0 +1,5 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +element('.something .deeper') // throw error - simple selector
diff --git a/test/sass/input/public/element/element.error.single-selector.sass b/test/sass/input/public/element/element.error.single-selector.sass
new file mode 100644
index 0000000..3aaf04a
--- /dev/null
+++ b/test/sass/input/public/element/element.error.single-selector.sass
@@ -0,0 +1,5 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +element('.something, .deeper') // throw error - single selector
diff --git a/test/sass/input/public/element/element.error.unknown-unregistered.sass b/test/sass/input/public/element/element.error.unknown-unregistered.sass
new file mode 100644
index 0000000..7700a2a
--- /dev/null
+++ b/test/sass/input/public/element/element.error.unknown-unregistered.sass
@@ -0,0 +1,14 @@
+@import "./src/spot-css"
+
++component(".component")
+    +register
+        +state(':hover')
+        +element('.wrapper')
+    
+    +default
+        property: value
+        
+    +state(':hover')
+
+    +___________________
+    +element('.other-wrapper') // throw error - unknown / unregistered
diff --git a/test/sass/input/public/element/element.mixin.multiple-selectors.sass b/test/sass/input/public/element/element.mixin.multiple-selectors.sass
new file mode 100644
index 0000000..f421ef7
--- /dev/null
+++ b/test/sass/input/public/element/element.mixin.multiple-selectors.sass
@@ -0,0 +1,25 @@
+@import "./src/spot-css"
+
+// element selector
++component('my-component')
+    +register
+        +state('[disabled]')
+        +element('.wrapper-1', '.wrapper-2')
+            +state('[disabled]')
+
+    +default
+        property: value
+
+    +state('[disabled]')
+        property: value-2
+
+    +________________________
+    +element('.wrapper-1', '.wrapper-2')
+        +default
+            property: value-3
+
+        +state('[disabled]')
+            property: value-4
+
+        +state('[disabled]', -1)
+            property: value-5
diff --git a/test/sass/input/public/element/element.mixins.sass b/test/sass/input/public/element/element.mixins.sass
new file mode 100644
index 0000000..7dd36b5
--- /dev/null
+++ b/test/sass/input/public/element/element.mixins.sass
@@ -0,0 +1,50 @@
+@import "./src/spot-css"
+
+// element selector
++component('my-component')
+    +register
+        +state('[disabled]')
+        +element('.wrapper')
+            +state('[disabled]')
+            +element('> .wrapper-2')
+                +element('> .wrapper-3')
+                    +state('[disabled]')
+                +element('~ .wrapper-4')
+
+    +default
+        property: value
+
+    +state('[disabled]')
+        property: value-2
+
+    +________________________
+    +element('.wrapper')
+        +default
+            property: value-3
+
+        +state('[disabled]')
+            property: value-4
+
+        +state('[disabled]', -1)
+            property: value-5
+        
+        +________________________
+        +element('> .wrapper-2')
+
+            +________________________
+            +element('> .wrapper-3')
+                +default
+                    property: value-6
+
+                +state('[disabled]')
+                    property: value-7
+                
+                +state('[disabled]', -1)
+                    property: value-8
+                
+                +state('[disabled]', -2)
+                    property: value-9
+
+            +________________________
+            +element('~ .wrapper-4')
+                property: value-10
\ No newline at end of file
diff --git a/test/sass/input/public/state/state.modifier.error.unknown-modifier-3.sass b/test/sass/input/public/state/state.modifier.error.unknown-modifier-3.sass
deleted file mode 100644
index 6350db1..0000000
--- a/test/sass/input/public/state/state.modifier.error.unknown-modifier-3.sass
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "./src/spot-css"
-
-// element selector
-+component("my-component")
-    +register
-        +state(':hover')
-
-        +child-element('span.sub')
-            +sub-component("a")
-            +sub-component("strong")
-
-    property: value
-
-    +_________________________
-    +child-element('span.sub')
-
-        +__________________
-        +sub-component("a")
-            +default
-                property: value
-            
-            +state(':hover')    // unknown-modifier (it is state of parent component)
-                property: value-2
-
-        +_______________________
-        +sub-component("strong")
-            property: value
diff --git a/test/sass/input/public/variant/variant.modifier.error.unknown-modifier-3.sass b/test/sass/input/public/variant/variant.modifier.error.unknown-modifier-3.sass
deleted file mode 100644
index 2dff81d..0000000
--- a/test/sass/input/public/variant/variant.modifier.error.unknown-modifier-3.sass
+++ /dev/null
@@ -1,27 +0,0 @@
-@import "./src/spot-css"
-
-// element selector
-+component("my-component")
-    +register
-        +variant('.transparent')
-
-        +child-element('span.sub')
-            +sub-component("a")
-            +sub-component("strong")
-
-    property: value
-
-    +_________________________
-    +child-element('span.sub')
-
-        +__________________
-        +sub-component("a")
-            +default
-                property: value
-            
-            +variant('.transparent')    // unknown-modifier (it is state of parent component)
-                property: value-2
-
-        +_______________________
-        +sub-component("strong")
-            property: value