From f0f84513f8efe533b6ee670a6f1a0c074387b2ec Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 13 Aug 2025 12:01:46 +0200
Subject: Make use of SASS modules

---
 src/_responsive.scss | 475 ++++++++++++++++++++++++++-------------------------
 1 file changed, 240 insertions(+), 235 deletions(-)

(limited to 'src/_responsive.scss')

diff --git a/src/_responsive.scss b/src/_responsive.scss
index 4d98638..f613a6d 100644
--- a/src/_responsive.scss
+++ b/src/_responsive.scss
@@ -17,6 +17,11 @@
 /// @access public
 ////
 
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
 @use './functions';
 @use './contexts';
 
@@ -99,15 +104,15 @@ $named-viewports: () !default;
 ///   }
 ///
 @mixin property($props, $responsive-map, $fluid: true, $vertical: false) {
-    @include env(map-keys($responsive-map), $fluid, $vertical) {
-        @if type-of($props) == list {
-            @each $prop in $props {
-                #{$prop}: set(map-values($responsive-map));
-            }
-        } @else {
-            #{$props}: set(map-values($responsive-map));
-        }
-    }
+	@include env(map.keys($responsive-map), $fluid, $vertical) {
+		@if meta.type-of($props) == list {
+			@each $prop in $props {
+				#{$prop}: set(map.values($responsive-map));
+			}
+		} @else {
+			#{$props}: set(map.values($responsive-map));
+		}
+	}
 }
 
 /// 
@@ -150,153 +155,153 @@ $named-viewports: () !default;
 ///   }
 ///
 @mixin env($viewports, $fluid: true, $vertical: false) {
-    @if length($viewports) <= 1 {
-        @error '$viewports must contain at least two viewports.';
-    }
-
-    $new-viewports: ();
-
-    @each $viewport in $viewports {
-        @if map-has-key($named-viewports, $viewport) {
-            $viewport: map-get($named-viewports, $viewport);
-        }
-
-        @if (type-of($viewport) != number) or unitless($viewport) {
-            @error '$viewports contains invalid viewports.';
-        }
-
-        $new-viewports: append($new-viewports, $viewport);
-    }
-
-    $viewports: functions.quicksort($new-viewports);
-
-    @if $new-viewports != $viewports {
-        @error '$viewports was not sorted in ascending order.';
-    }
-
-    @if $fluid {
-        $first-vp: nth($viewports, 1);
-        $last-vp:  nth($viewports, length($viewports));
-
-        @include contexts.push($context-id, 'env', (
-            'viewports': $viewports,
-            'mode':      set,
-            'index':     1,
-            'fluid':     $fluid,
-            'vertical':  $vertical,
-        ));
-
-        @content;
-
-        @include contexts.pop($context-id);
-
-        @for $i from 1 to length($viewports) {
-            $prev-vp: nth($viewports, $i);
-            $next-vp: nth($viewports, $i + 1);
-
-            @if not $vertical {
-                @media (min-width: $prev-vp) and (max-width: $next-vp) {
-                    @include contexts.push($context-id, 'env', (
-                        'viewports': $viewports,
-                        'mode':      transition,
-                        'index':     $i,
-                        'fluid':     $fluid,
-                        'vertical':  $vertical,
-                    ));
-
-                    @content;
-
-                    @include contexts.pop($context-id);
-                }
-            } @else {
-                @media (min-height: $prev-vp) and (max-height: $next-vp) {
-                    @include contexts.push($context-id, 'env', (
-                        'viewports': $viewports,
-                        'mode':      transition,
-                        'index':     $i,
-                        'fluid':     $fluid,
-                        'vertical':  $vertical,
-                    ));
-
-                    @content;
-
-                    @include contexts.pop($context-id);
-                }
-            }
-        }
-
-        @if not $vertical {
-            @media (min-width: $last-vp) {
-                @include contexts.push($context-id, 'env', (
-                    'viewports': $viewports,
-                    'mode':      set,
-                    'index':     length($viewports),
-                    'fluid':     $fluid,
-                    'vertical':  $vertical,
-                ));
-
-                @content;
-
-                @include contexts.pop($context-id);
-            }
-        } @else {
-            @media (min-height: $last-vp) {
-                @include contexts.push($context-id, 'env', (
-                    'viewports': $viewports,
-                    'mode':      set,
-                    'index':     length($viewports),
-                    'fluid':     $fluid,
-                    'vertical':  $vertical,
-                ));
-
-                @content;
-
-                @include contexts.pop($context-id);
-            }
-        }
-    } @else {
-        @include contexts.push($context-id, 'env', (
-            'viewports': $viewports,
-            'mode':      set,
-            'index':     1,
-            'fluid':     $fluid,
-            'vertical':  $vertical,
-        ));
-
-        @content;
-
-        @include contexts.pop($context-id);
-
-        @for $i from 2 through length($viewports) {
-            $vp: nth($viewports, $i);
-
-            @if not $vertical {
-                @media (min-width: $vp) {
-                    @include contexts.push($context-id, 'env', (
-                        'viewports': $viewports,
-                        'mode':      set,
-                        'index':     $i
-                    ));
-
-                    @content;
-
-                    @include contexts.pop($context-id);
-                }
-            } @else {
-                @media (min-height: $vp) {
-                    @include contexts.push($context-id, 'env', (
-                        'viewports': $viewports,
-                        'mode':      set,
-                        'index':     $i
-                    ));
-
-                    @content;
-
-                    @include contexts.pop($context-id);
-                }
-            }
-        }
-    }
+	@if list.length($viewports) <= 1 {
+		@error '$viewports must contain at least two viewports.';
+	}
+
+	$new-viewports: ();
+
+	@each $viewport in $viewports {
+		@if map.has-key($named-viewports, $viewport) {
+			$viewport: map.get($named-viewports, $viewport);
+		}
+
+		@if (meta.type-of($viewport) != number) or math.is-unitless($viewport) {
+			@error '$viewports contains invalid viewports.';
+		}
+
+		$new-viewports: list.append($new-viewports, $viewport);
+	}
+
+	$viewports: functions.quicksort($new-viewports);
+
+	@if $new-viewports != $viewports {
+		@error '$viewports was not sorted in ascending order.';
+	}
+
+	@if $fluid {
+		$first-vp: list.nth($viewports, 1);
+		$last-vp:  list.nth($viewports, list.length($viewports));
+
+		@include contexts.push($context-id, 'env', (
+			'viewports': $viewports,
+			'mode':      set,
+			'index':     1,
+			'fluid':     $fluid,
+			'vertical':  $vertical,
+		));
+
+		@content;
+
+		@include contexts.pop($context-id);
+
+		@for $i from 1 to list.length($viewports) {
+			$prev-vp: list.nth($viewports, $i);
+			$next-vp: list.nth($viewports, $i + 1);
+
+			@if not $vertical {
+				@media (min-width: $prev-vp) and (max-width: $next-vp) {
+					@include contexts.push($context-id, 'env', (
+						'viewports': $viewports,
+						'mode':      transition,
+						'index':     $i,
+						'fluid':     $fluid,
+						'vertical':  $vertical,
+					));
+
+					@content;
+
+					@include contexts.pop($context-id);
+				}
+			} @else {
+				@media (min-height: $prev-vp) and (max-height: $next-vp) {
+					@include contexts.push($context-id, 'env', (
+						'viewports': $viewports,
+						'mode':      transition,
+						'index':     $i,
+						'fluid':     $fluid,
+						'vertical':  $vertical,
+					));
+
+					@content;
+
+					@include contexts.pop($context-id);
+				}
+			}
+		}
+
+		@if not $vertical {
+			@media (min-width: $last-vp) {
+				@include contexts.push($context-id, 'env', (
+					'viewports': $viewports,
+					'mode':      set,
+					'index':     list.length($viewports),
+					'fluid':     $fluid,
+					'vertical':  $vertical,
+				));
+
+				@content;
+
+				@include contexts.pop($context-id);
+			}
+		} @else {
+			@media (min-height: $last-vp) {
+				@include contexts.push($context-id, 'env', (
+					'viewports': $viewports,
+					'mode':      set,
+					'index':     list.length($viewports),
+					'fluid':     $fluid,
+					'vertical':  $vertical,
+				));
+
+				@content;
+
+				@include contexts.pop($context-id);
+			}
+		}
+	} @else {
+		@include contexts.push($context-id, 'env', (
+			'viewports': $viewports,
+			'mode':      set,
+			'index':     1,
+			'fluid':     $fluid,
+			'vertical':  $vertical,
+		));
+
+		@content;
+
+		@include contexts.pop($context-id);
+
+		@for $i from 2 through list.length($viewports) {
+			$vp: list.nth($viewports, $i);
+
+			@if not $vertical {
+				@media (min-width: $vp) {
+					@include contexts.push($context-id, 'env', (
+						'viewports': $viewports,
+						'mode':      set,
+						'index':     $i
+					));
+
+					@content;
+
+					@include contexts.pop($context-id);
+				}
+			} @else {
+				@media (min-height: $vp) {
+					@include contexts.push($context-id, 'env', (
+						'viewports': $viewports,
+						'mode':      set,
+						'index':     $i
+					));
+
+					@content;
+
+					@include contexts.pop($context-id);
+				}
+			}
+		}
+	}
 }
 
 ///
@@ -307,29 +312,29 @@ $named-viewports: () !default;
 /// @return {number|string}
 ///
 @function set($values, $without-calc: false) {
-    $noop: contexts.assert-stack-must-contain($context-id, 'env');
-
-    $data:      nth(contexts.get($context-id, 'env'), 2);
-    $viewports: map-get($data, 'viewports');
-    $mode:      map-get($data, 'mode');
-    $fluid:     map-get($data, 'fluid');
-    $vertical:  map-get($data, 'vertical');
-
-    @if length($values) != length($viewports) {
-        @error '$values must contain the same number of items as the responsive environment\'s $viewports.';
-    }
-
-    @if $mode == set {
-        @return nth($values, map-get($data, 'index'));
-    } @else {
-        $index:      map-get($data, 'index');
-        $prev-vp:    nth($viewports, $index);
-        $next-vp:    nth($viewports, $index + 1);
-        $prev-value: nth($values, $index);
-        $next-value: nth($values, $index + 1);
-
-        @return fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc);
-    }
+	$noop: contexts.assert-stack-must-contain($context-id, 'env');
+
+	$data:      list.nth(contexts.get($context-id, 'env'), 2);
+	$viewports: map.get($data, 'viewports');
+	$mode:      map.get($data, 'mode');
+	$fluid:     map.get($data, 'fluid');
+	$vertical:  map.get($data, 'vertical');
+
+	@if list.length($values) != list.length($viewports) {
+		@error '$values must contain the same number of items as the responsive environment\'s $viewports.';
+	}
+
+	@if $mode == set {
+		@return list.nth($values, map.get($data, 'index'));
+	} @else {
+		$index:      map.get($data, 'index');
+		$prev-vp:    list.nth($viewports, $index);
+		$next-vp:    list.nth($viewports, $index + 1);
+		$prev-value: list.nth($values, $index);
+		$next-value: list.nth($values, $index + 1);
+
+		@return fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc);
+	}
 }
 
 /// 
@@ -345,62 +350,62 @@ $named-viewports: () !default;
 /// @access private
 ///
 @function fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) {
-    $value-unit:        unit($min-value);
-    $max-value-unit:    unit($max-value);
-    $viewport-unit:     unit($min-viewport);
-    $max-viewport-unit: unit($max-viewport);
-
-    @if $min-value == 0 {
-        $value-unit: $max-value-unit;
-    }
-    @if $max-value == 0 {
-        $max-value-unit: $value-unit;
-    }
-    @if $min-viewport == 0 {
-        $viewport-unit: $max-viewport-unit;
-    }
-    @if $max-viewport == 0 {
-        $max-viewport-unit: $viewport-unit;
-    }
-
-    @if ($value-unit != $max-value-unit) or ($viewport-unit != $max-viewport-unit) {
-        @error 'Units of $min-value and $max-value, $min-viewport and $max-viewport must match.';
-    }
-
-    @if ($value-unit == rem) and ($viewport-unit == px) {
-        $min-viewport:  functions.px-to-rem($min-viewport);
-        $max-viewport:  functions.px-to-rem($max-viewport);
-        $viewport-unit: rem;
-    } @else if ($value-unit == px) and ($viewport-unit == rem) {
-        $min-value:  functions.px-to-rem($min-value);
-        $max-value:  functions.px-to-rem($max-value);
-        $value-unit: rem;
-    }
-
-    @if $value-unit != $viewport-unit {
-        @error 'This combination of units is not supported.';
-    }
-
-    $value-diff:    functions.strip-unit($max-value - $min-value);
-    $viewport-diff: functions.strip-unit($max-viewport - $min-viewport);
-
-    $calc: '';
-
-    @if $min-value != 0 {
-        $calc: '#{$min-value} + ';
-    }
-
-    @if not $vertical {
-        $calc: unquote('#{$calc}#{$value-diff} * (100vw - #{$min-viewport}) / #{$viewport-diff}');
-    } @else {
-        $calc: unquote('#{$calc}#{$value-diff} * (100vh - #{$min-viewport}) / #{$viewport-diff}');
-    }
-
-    @if $without-calc {
-        @return $calc;
-    } @else {
-        @return calc(#{$calc});
-    }
+	$value-unit:        math.unit($min-value);
+	$max-value-unit:    math.unit($max-value);
+	$viewport-unit:     math.unit($min-viewport);
+	$max-viewport-unit: math.unit($max-viewport);
+
+	@if $min-value == 0 {
+		$value-unit: $max-value-unit;
+	}
+	@if $max-value == 0 {
+		$max-value-unit: $value-unit;
+	}
+	@if $min-viewport == 0 {
+		$viewport-unit: $max-viewport-unit;
+	}
+	@if $max-viewport == 0 {
+		$max-viewport-unit: $viewport-unit;
+	}
+
+	@if ($value-unit != $max-value-unit) or ($viewport-unit != $max-viewport-unit) {
+		@error 'Units of $min-value and $max-value, $min-viewport and $max-viewport must match.';
+	}
+
+	@if ($value-unit == rem) and ($viewport-unit == px) {
+		$min-viewport:  functions.px-to-rem($min-viewport);
+		$max-viewport:  functions.px-to-rem($max-viewport);
+		$viewport-unit: rem;
+	} @else if ($value-unit == px) and ($viewport-unit == rem) {
+		$min-value:  functions.px-to-rem($min-value);
+		$max-value:  functions.px-to-rem($max-value);
+		$value-unit: rem;
+	}
+
+	@if $value-unit != $viewport-unit {
+		@error 'This combination of units is not supported.';
+	}
+
+	$value-diff:    functions.strip-unit($max-value - $min-value);
+	$viewport-diff: functions.strip-unit($max-viewport - $min-viewport);
+
+	$calc: '';
+
+	@if $min-value != 0 {
+		$calc: '#{$min-value} + ';
+	}
+
+	@if not $vertical {
+		$calc: string.unquote('#{$calc}#{$value-diff} * (100vw - #{$min-viewport}) / #{$viewport-diff}');
+	} @else {
+		$calc: string.unquote('#{$calc}#{$value-diff} * (100vh - #{$min-viewport}) / #{$viewport-diff}');
+	}
+
+	@if $without-calc {
+		@return $calc;
+	} @else {
+		@return calc(#{$calc});
+	}
 }
 
 @include contexts.create($context-id);
-- 
cgit v1.2.3-70-g09d2