+ mode mixin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spotcss",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "SPOT CSS Framework { Single Place Of Truth Methodology }",
   "main": "index.scss",
   "scripts": {

src/_private.mixins.scss

@@ -229,11 +229,13 @@
             }
         }
         @if not $found {
-            @if $_super-component-index == null {
-                @error $SPOT_ERROR_PREFIX + $original-modifier-name+"/super-unknown-modifier - the "+$original-modifier-name+" '"+$identifier+"' is not registered in any super component '"+&+"'.";
-            }
-            @else {
-                @error $SPOT_ERROR_PREFIX + $original-modifier-name+"/super-modifier-not-found - the "+$original-modifier-name+" '"+$identifier+"' is was not found on given super component index '"+$sub-component-name-for-error+"'.";
+            @if $is-super-modifier or ($second-param-is-number and $second-param-index<0) {
+                @if $_super-component-index == null {
+                    @error $SPOT_ERROR_PREFIX + $original-modifier-name+"/super-unknown-modifier - the "+$original-modifier-name+" '"+$identifier+"' is not registered in any super component '"+&+"'.";
+                }
+                @else {
+                    @error $SPOT_ERROR_PREFIX + $original-modifier-name+"/super-modifier-not-found - the "+$original-modifier-name+" '"+$identifier+"' is was not found on given super component index '"+$sub-component-name-for-error+"'.";
+                }
             }
         }
         $component-to-extend: last($sub-component-stack);
@@ -251,7 +253,7 @@
     }
 
     // force using 'default' mixin when using modifiers
-    @if not _default-mixin-was-already-called() {
+    @if not _default-mixin-was-already-called() and $_current-component-mode!='draft' {
         @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).";
     }
 
@@ -327,7 +329,7 @@
         }
         // if not alias - just $identifier
         @else {
-            @if $modifiers!=null and map-has-key($modifiers, $identifier) {
+            @if ($modifiers!=null and map-has-key($modifiers, $identifier)) or $_current-component-mode=='draft' {
                 $extension: $identifier;
                 $extended-selector: '';
                 @if str-index($extension, '@media')==1 {
@@ -502,7 +504,7 @@
                 $selector: selector-normalize-spaces($selector);
             }
 
-            @if not index($_registered-sub-elements, $selector) {
+            @if not index($_registered-sub-elements, $selector) and $_current-component-mode!='draft' {
                 @error $SPOT_ERROR_PREFIX + $sub-element-type + "-element/unregistred-sub-element - the "+$sub-element-type+"-element('" + $selector + "') is not registered for component selector '"+component()+"'.";
             }
 

src/_private.variables.scss

@@ -17,6 +17,19 @@ $_registered-components: ();
 /// @type Map
 $_current-components: ();
 
+/// Default value of mode of strictness of evaluating SPOT rules.
+/// @group Component
+/// @access private
+/// @type String
+$_default-component-mode: 'strict';
+
+/// Current value of mode of strictness of evaluating SPOT rules which will be applied on next component.
+/// Allowed values are 'strict' and 'draft'.
+/// @group Component
+/// @access private
+/// @type String
+$_current-component-mode: $_default-component-mode;
+
 
 /// Current media or stack of current media queries (if multiple are used).
 /// @group Component

src/_public.functions.scss

@@ -1,3 +1,16 @@
+/// Sets mode of strictness of evaluating SPOT rules which will be applied on next component.
+/// When 'draft' is set then +register and +default mixin is not required.
+/// @group Component
+/// @access public
+/// @return { String } Current mode.
+@function mode($mode) {
+    @if $mode!='strict' and $mode!='draft' {
+        @error $SPOT_ERROR_PREFIX + "mode/invalid-input - mode mixin accepts only value 'strict' or 'draft'.";
+    }
+    $_current-component-mode: $mode !global;
+    @return $_current-component-mode;
+}
+
 /// @group Component
 /// @access public
 /// @return { String } Current component selector.

src/_public.mixins.scss

@@ -1,3 +1,16 @@
+/// Sets mode of strictness of evaluating SPOT rules which will be applied on next component.
+/// When 'draft' is set then +register and +default mixin is not required.
+///
+/// @group Component
+/// @access public
+/// @since from version 2.1.0
+/// @param { String } $mode - Allowed values are 'strict' and 'draft'.
+/// @throw SPOT CSS: mode/invalid-input - mode mixin accepts only value 'strict' or 'draft'.
+/// @output
+@mixin mode($mode) {
+    $new-mode: mode($mode);
+}
+
 /// Main top-level mixin to define component.
 ///
 /// 1) It checks if same component is defined multiple times. It is not allowed because Single Place Of Truth.
@@ -66,6 +79,9 @@
 
     // remove current component selector (from stack)
     $_current-components: pop($_current-components) !global;
+
+    // reset current mode to default after each component
+    $_current-component-mode: $_default-component-mode !global;
 }
 
 
@@ -140,7 +156,7 @@
     }
     @else {
         // check if sub-component is registered
-        @if not index($_already-used-selectors, $sub-component-selector) {
+        @if not index($_already-used-selectors, $sub-component-selector) and $_current-component-mode!='draft' {
             @error $SPOT_ERROR_PREFIX + "child-component/unknown-unregistered - given sub-component '"+$selector+"' is not registered in direct parent component ('"+$sub-component-selector+"').";
         }
         // 1)
@@ -242,7 +258,7 @@
     }
     @else {
         // check if sub-component is registered
-        @if not index($_already-used-selectors, $sub-component-selector) {
+        @if not index($_already-used-selectors, $sub-component-selector) and $_current-component-mode!='draft' {
             @error $SPOT_ERROR_PREFIX + "sub-component/unknown-unregistered - given sub-component '"+$selector+"' is not registered in direct parent component ('"+$sub-component-selector+"').";
         }
         // 1)
@@ -606,7 +622,7 @@
         @each $selector in $selectors {
             $sub-component-selector: #{ & + ' ' + $selector };
             // check if element is registered
-            @if not index($_already-used-selectors, $sub-component-selector) {
+            @if not index($_already-used-selectors, $sub-component-selector) and $_current-component-mode!='draft' {
                 @error $SPOT_ERROR_PREFIX + "element/unknown-unregistered - given element '"+$selector+"' is not registered in direct parent component ('"+component()+"').";
             }
             // 1)

src/_spot-css.scss

@@ -4,7 +4,7 @@
 /// @author Johnny Seyd (johnnyseyd@gmail.com)
 /// @link https://github.com/seyd/spot-css
 ///
-$SPOT-CSS-FRAMEWORK: '2.0.0';
+$SPOT-CSS-FRAMEWORK: '2.0.1';
 //
 // Usage:
 //    @import "~spotcss";

test/sass/expected-output/public/mode/mode.mixins.css

@@ -0,0 +1,39 @@
+my-component {
+  property: value;
+}
+
+my-component[disabled] {
+  property: value-2;
+}
+
+my-component-2 {
+  property: value;
+}
+
+my-component-2 .wrapper {
+  property: value-2;
+}
+
+my-component-2[disabled] .wrapper {
+  property: value-2;
+}
+
+my-component-3 {
+  property: value;
+}
+
+my-component-3::before {
+  property: value-2;
+}
+
+my-component-3[disabled]::before {
+  property: value-2;
+}
+
+my-component-4 {
+  property: value;
+}
+
+my-component-4[disabled] {
+  property: value-2;
+}

test/sass/expected-output/public/state/state.modifier.error.unknown-modifier-2.css

@@ -0,0 +1 @@
+/* Error SPOT CSS: state/unknown-modifier */

test/sass/expected-output/public/state/state.modifier.error.unknown-modifier.css

@@ -1 +1 @@
-/* Error SPOT CSS: state/super-unknown-modifier */
+/* Error SPOT CSS: state/unknown-modifier */

test/sass/expected-output/public/variant/variant.modifier.error.unknown-modifier.css

@@ -1 +1 @@
-/* Error SPOT CSS: variant/super-unknown-modifier */
+/* Error SPOT CSS: variant/unknown-modifier */

test/sass/input/public/mode/mode.mixins.sass

@@ -0,0 +1,60 @@
+@import "./src/spot-css"
+
++mode('draft')
+
+// no register needed for mutations
++component('my-component')
+    +default
+        property: value
+
+    +state('[disabled]')
+        property: value-2
+
+
+
+// #####################################################
+
+
++mode('draft')
+
+// no register needed for element
++component('my-component-2')
+    property: value
+
+    +____________________
+    +element('.wrapper')
+        property: value-2
+
+        +state('[disabled]')
+            property: value-2    
+
+
+
+// #####################################################
+
+
++mode('draft')
+
+// no register needed for pseudo-element
++component('my-component-3')
+    property: value
+
+    +____________________
+    +pseudo-element('before')
+        property: value-2
+
+        +state('[disabled]')
+            property: value-2    
+
+
+// #####################################################
+
+
++mode('draft')
+
+// no default needed
++component('my-component-4')
+    property: value
+
+    +state('[disabled]')
+        property: value-2

test/sass/input/public/state/state.modifier.error.unknown-modifier-2.sass

@@ -0,0 +1,13 @@
+@import "./src/spot-css"
+
++component("my-component")
+    +register
+        +state('.active')
+        +element('.wrapper')
+
+
+    +____________________
+    +element('.wrapper')
+        +default
+
+        +state(':pasive') // throws error - unknown modifier