+ @container queries support

Author: seyd

src/_private.functions.scss

@@ -241,7 +241,7 @@
 /// @access private
 /// @return {Boolean} True if mixin register was already called in current selector.
 @function _default-mixin-was-already-called() {
-    $current-media-selector: _wrap-into-media-selector(&);
+    $current-media-selector: _wrap-into-media-selector(_wrap-into-container-selector(&));
     @return index($_default-called-on, $current-media-selector) != null;
 }
 
@@ -262,6 +262,22 @@
 }
 
 
+/// Wraps given selector into current container query stack to return unique selector
+/// to avoid duplicite usage of modifiers.
+@function _wrap-into-container-selector($selector) {
+    $current-container-selector: '';
+    $is_container: length($_current-container-stack)>0;
+    @if $is_container {
+        $current-container-selector: '@container ' + inspect($_current-container-stack) + ' { ';
+    }    
+    $current-container-selector: $current-container-selector + $selector;
+    @if $is_container {
+        $current-container-selector:  $current-container-selector + inspect($_current-container-stack) + ' }';
+    }    
+    @return $current-container-selector;
+}
+
+
 /// Check if given modifier name is context-like modifier.
 /// @access private
 /// @param {String} $modifier-name - name of modifier

src/_private.mixins.scss

@@ -155,6 +155,7 @@
 @mixin _apply-modifier($modifier-name, $args...) {
     $selectors: ();
     $medias: ();
+    $containers: ();
     $original-modifier-name: str-replace($modifier-name, ' &', '');
     $component: component();
     $component-to-extend: str-trim(self());
@@ -328,6 +329,9 @@
                         @if str-index($extension, '@media')==1 {
                             $medias: append($medias, str-replace(str-replace($extension, '@media ', ''), ' &', ''), 'comma');
                         }
+                        @else if str-index($extension, '@container')==1 {
+                            $containers: append($containers, str-replace(str-replace($extension, '@container ', ''), ' &', ''), 'comma');
+                        }
                         @else {   
                             @if str-index($extension, '&') {
                                 $context-extension: str-replace($extension, ' &', '');
@@ -350,7 +354,7 @@
                     }
                 }
             }
-            @if length($selectors)==0 and length($medias)==0 {
+            @if length($selectors)==0 and length($medias)==0 and length($containers)==0 {
                 // @feature Forcing to register all modifiers at first
                 @error $SPOT_ERROR_PREFIX + $original-modifier-name+"/wrong-modifier-type - the modifier '"+$identifier+"' is not registered in component '"+&+"' as "+$modifier-name+". Check it out!";
             }
@@ -363,6 +367,9 @@
                 @if str-index($extension, '@media')==1 {
                     $medias: append($medias, str-replace(str-replace($extension, '@media ', ''), ' &', ''), 'comma');
                 }
+                @else if str-index($extension, '@container')==1 {
+                    $containers: append($containers, str-replace(str-replace($extension, '@container ', ''), ' &', ''), 'comma');
+                }
                 @else {    
                     @if str-index($extension, '&') {
                         $context-extension: str-replace($extension, ' &', '');
@@ -402,7 +409,7 @@
     @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+'', '&', &) )+$second-param-index;
+        $single-selector: _wrap-into-media-selector( _wrap-into-container-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+".";
         }
@@ -422,7 +429,18 @@
         $_current-media-stack: pop($_current-media-stack) !global;
     }
 
-    @if length($selectors)>0 {
+    @else if length($containers)>0 {
+        // store current container selector (into stack)
+        $_current-container-stack: append($_current-container-stack, $containers, 'space') !global;
+        
+        @container #{$containers} {
+            @content;
+        }        
+        // remove current container selector (from stack)
+        $_current-container-stack: pop($_current-container-stack) !global;
+    }
+
+    @else if length($selectors)>0 {
         @at-root #{$selectors} {
             @content;
         }

src/_private.variables.scss

@@ -62,6 +62,13 @@ $_current-component-mode: $_default-component-mode;
 $_current-media-stack: [];
 
 
+/// Current container or stack of current container queries (if multiple are used).
+/// @group Component
+/// @access private
+/// @type List
+$_current-container-stack: [];
+
+
 /// Flag of register mode - if parser enters mixin register.
 /// @group Component
 /// @access private

src/_public.mixins.scss

@@ -403,7 +403,7 @@
     }
 
     // run only once per component selector
-    $current-media-selector: _wrap-into-media-selector(&);
+    $current-media-selector: _wrap-into-media-selector(_wrap-into-container-selector(&));
     @if index($_default-called-on, $current-media-selector) and $_is-in-only-for-block==false {
         @error $SPOT_ERROR_PREFIX + "default/already-called - the mixin default was already called for element '"+$current-media-selector+"'.";
     }

test/sass/input/public/responsive/responsive.mixins.sass

@@ -67,4 +67,40 @@
 
     +responsive('{lg}')
 
-    +responsive('{xl}')
+    +responsive('{xl}')
+
+
+
+  
++component("my-component-3")
+    +register
+        +state(':hover')
+        +responsive('@container (max-width: 1024px)')
+        +responsive('{container}', '@container (min-width: 700px)')
+        +responsive('{container-with-name}', '@container nickname (min-width: 450px)')
+        +element('.wrapper')
+
+    +default
+        display: block
+
+    +responsive('@container (max-width: 1024px)')
+        display: table
+
+    +responsive('{container}')
+        display: flex
+
+    +responsive('{container-with-name}')
+        display: grid
+
+    +______________________
+    +element('.wrapper')
+        +default
+
+        +state(':hover')
+            +default
+                color: blue
+
+            +responsive('{container-with-name}')
+                color: green
+            
+