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

---
 test/_gradients.scss | 476 +++++++++++++++++++++++----------------------------
 1 file changed, 216 insertions(+), 260 deletions(-)

(limited to 'test/_gradients.scss')

diff --git a/test/_gradients.scss b/test/_gradients.scss
index c11439c..db5fda7 100644
--- a/test/_gradients.scss
+++ b/test/_gradients.scss
@@ -5,264 +5,220 @@
 @use '../src/gradients';
 
 @include describe('gradients') {
-    @include it('easing-gradient') {
-        $gradient1: gradients.easing-gradient(
-            linear,
-            to right,
-            #000,
-            ease-in-quad,
-            transparent
-        );
-
-        $expected1: linear-gradient(
-            to right,
-            #000 0,
-            mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 25%,
-            mix(transparent, #000, easing.ease-in-quad(0.5)  * 100%) 50%,
-            mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 75%,
-            transparent 100%
-        );
-
-        @include assert-equal($gradient1, $expected1, 'Simple linear gradient');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient2: gradients.easing-gradient(
-            radial,
-            1em 2em at 50% 60%,
-            #000,
-            ease-out-cubic,
-            transparent
-        );
-
-        $expected2: radial-gradient(
-            1em 2em at 50% 60%,
-            #000 0,
-            mix(transparent, #000, easing.ease-out-cubic(0.25) * 100%) 25%,
-            mix(transparent, #000, easing.ease-out-cubic(0.5)  * 100%) 50%,
-            mix(transparent, #000, easing.ease-out-cubic(0.75) * 100%) 75%,
-            transparent 100%
-        );
-
-        @include assert-equal($gradient2, $expected2, 'Simple radial gradient');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient3: gradients.easing-gradient(
-            linear,
-            to right,
-            #000        2em,
-            ease-in-quad,
-            transparent 10em
-        );
-
-        $expected3: linear-gradient(
-            to right,
-            #000 2em,
-            mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 4em,
-            mix(transparent, #000, easing.ease-in-quad(0.5)  * 100%) 6em,
-            mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 8em,
-            transparent 10em
-        );
-
-        @include assert-equal($gradient3, $expected3, 'Linear gradient with positioned color stops');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient4: gradients.easing-gradient(
-            linear,
-            to right,
-            #000 20%,
-            ease-in-quad,
-            transparent calc(20% + 10em)
-        );
-
-        $expected4: linear-gradient(
-            to right,
-            #000 20%,
-            mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) calc(20% + (20% + 10em - 20%) * 0.25),
-            mix(transparent, #000, easing.ease-in-quad(0.5)  * 100%) calc(20% + (20% + 10em - 20%) * 0.5),
-            mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) calc(20% + (20% + 10em - 20%) * 0.75),
-            transparent calc(20% + 10em)
-        );
-
-        @include assert-equal($gradient4, $expected4, 'More advanced linear gradient with positioned color stops');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient5: gradients.easing-gradient(
-            linear,
-            to right,
-            #000        2em,
-            #f00        7em,
-            ease-in-quad,
-            transparent 10em
-        );
-
-        $expected5: linear-gradient(
-            to right,
-            #000 2em,
-            #f00 7em,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 7em + 3em * 0.5,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
-            transparent 10em
-        );
-
-        @include assert-equal($gradient5, $expected5, 'Linear gradient with 3 positioned color stops, 1 easing transitions');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient6: gradients.easing-gradient(
-            linear,
-            to right,
-            #000        2em,
-            ease-in-quad,
-            #f00        7em,
-            ease-in-quad,
-            transparent 10em
-        );
-
-        $expected6: linear-gradient(
-            to right,
-            #000 2em,
-            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 2em + 5em * 0.25,
-            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 2em + 5em * 0.5,
-            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 2em + 5em * 0.75,
-            #f00 7em,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 7em + 3em * 0.5,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75,
-            transparent 10em
-        );
-
-        @include assert-equal($gradient6, $expected6, 'Linear gradient with 3 positioned color stops, 2 easing transitions');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient7: gradients.easing-gradient(
-            linear,
-            to right,
-            #000        2em,
-            ease-in-quad,
-            #f00,
-            ease-in-quad,
-            transparent 10em
-        );
-
-        $expected7: linear-gradient(
-            to right,
-            #000 2em,
-            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 2em + 4em * 0.25,
-            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 2em + 4em * 0.5,
-            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 2em + 4em * 0.75,
-            #f00 6em,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 6em + 4em * 0.25,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 6em + 4em * 0.5,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 6em + 4em * 0.75,
-            transparent 10em
-        );
-
-        @include assert-equal($gradient7, $expected7, 'Linear gradient with 2 / 3 positioned color stops, 2 easing transitions');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient8: gradients.easing-gradient(
-            linear,
-            to right,
-            #000,
-            ease-in-quad,
-            #f00,
-            ease-in-quad,
-            transparent
-        );
-
-        $expected8: linear-gradient(
-            to right,
-            #000 0,
-            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 50% * 0.25,
-            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 50% * 0.5,
-            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 50% * 0.75,
-            #f00 50%,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 50% + 50% * 0.25,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 50% + 50% * 0.5,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 50% + 50% * 0.75,
-            transparent 100%
-        );
-
-        @include assert-equal($gradient8, $expected8, 'Linear gradient with 0 / 3 positioned color stops, 2 easing transitions');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient9: gradients.easing-gradient(
-            linear,
-            to right,
-            #000,
-            ease-in-quad,
-            #f00,
-            ease-in-quad,
-            transparent 20em
-        );
-
-        $expected9: linear-gradient(
-            to right,
-            #000 0,
-            mix(#f00,        #000, easing.ease-in-quad(0.25) * 100%) 10em * 0.25,
-            mix(#f00,        #000, easing.ease-in-quad(0.5)  * 100%) 10em * 0.5,
-            mix(#f00,        #000, easing.ease-in-quad(0.75) * 100%) 10em * 0.75,
-            #f00 10em,
-            mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 10em + 10em * 0.25,
-            mix(transparent, #f00, easing.ease-in-quad(0.5)  * 100%) 10em + 10em * 0.5,
-            mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 10em + 10em * 0.75,
-            transparent 20em
-        );
-
-        @include assert-equal($gradient9, $expected9, 'Linear gradient with 1 / 3 positioned color stops, 2 easing transitions');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient10: gradients.easing-gradient(
-            linear,
-            to right,
-            #000,
-            cubic-bezier 0.47 0 0.745 0.715,
-            transparent
-        );
-
-        $expected10: linear-gradient(
-            to right,
-            #000 0,
-            mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.25) * 100%) 25%,
-            mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.5)  * 100%) 50%,
-            mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.75) * 100%) 75%,
-            transparent 100%
-        );
-
-        @include assert-equal($gradient10, $expected10, 'Simple linear gradient with custom cubic-bezier easing');
-
-        // ---------------------------------------------------------------------------
-
-        $gradient11: gradients.easing-gradient(
-            linear,
-            to right,
-            #000,
-            steps 4 jump-start,
-            transparent
-        );
-
-        $expected11: linear-gradient(
-            to right,
-            #000 0,
-            mix(transparent, #000, 0.25 * 100%) 0,
-            mix(transparent, #000, 0.25 * 100%) 25%,
-            mix(transparent, #000, 0.5  * 100%) 25%,
-            mix(transparent, #000, 0.5  * 100%) 50%,
-            mix(transparent, #000, 0.75 * 100%) 50%,
-            mix(transparent, #000, 0.75 * 100%) 75%,
-            transparent 75%,
-            transparent 100%
-        );
-
-        @include assert-equal($gradient11, $expected11, 'Simple linear gradient with custom steps easing');
-    }
+	@include it('easing-gradient') {
+		$gradient1: gradients.easing-gradient(linear,
+			to right,
+			#000,
+			ease-in-quad,
+			transparent);
+
+		$expected1: linear-gradient(to right,
+			#000 0,
+			mix(transparent, #000, easing.ease-in-quad(.25) * 100%) 25%,
+			mix(transparent, #000, easing.ease-in-quad(.5)  * 100%) 50%,
+			mix(transparent, #000, easing.ease-in-quad(.75) * 100%) 75%,
+			transparent 100%);
+
+		@include assert-equal($gradient1, $expected1, 'Simple linear gradient');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient2: gradients.easing-gradient(radial,
+			1em 2em at 50% 60%,
+			#000,
+			ease-out-cubic,
+			transparent);
+
+		$expected2: radial-gradient(1em 2em at 50% 60%,
+			#000 0,
+			mix(transparent, #000, easing.ease-out-cubic(.25) * 100%) 25%,
+			mix(transparent, #000, easing.ease-out-cubic(.5)  * 100%) 50%,
+			mix(transparent, #000, easing.ease-out-cubic(.75) * 100%) 75%,
+			transparent 100%);
+
+		@include assert-equal($gradient2, $expected2, 'Simple radial gradient');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient3: gradients.easing-gradient(linear,
+			to right,
+			#000        2em,
+			ease-in-quad,
+			transparent 10em);
+
+		$expected3: linear-gradient(to right,
+			#000 2em,
+			mix(transparent, #000, easing.ease-in-quad(.25) * 100%) 4em,
+			mix(transparent, #000, easing.ease-in-quad(.5)  * 100%) 6em,
+			mix(transparent, #000, easing.ease-in-quad(.75) * 100%) 8em,
+			transparent 10em);
+
+		@include assert-equal($gradient3, $expected3, 'Linear gradient with positioned color stops');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient4: gradients.easing-gradient(linear,
+			to right,
+			#000 20%,
+			ease-in-quad,
+			transparent calc(20% + 10em));
+
+		$expected4: linear-gradient(to right,
+			#000 20%,
+			mix(transparent, #000, easing.ease-in-quad(.25) * 100%) calc(20% + (20% + 10em - 20%) * .25),
+			mix(transparent, #000, easing.ease-in-quad(.5)  * 100%) calc(20% + (20% + 10em - 20%) * .5),
+			mix(transparent, #000, easing.ease-in-quad(.75) * 100%) calc(20% + (20% + 10em - 20%) * .75),
+			transparent calc(20% + 10em));
+
+		@include assert-equal($gradient4, $expected4, 'More advanced linear gradient with positioned color stops');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient5: gradients.easing-gradient(linear,
+			to right,
+			#000        2em,
+			#f00        7em,
+			ease-in-quad,
+			transparent 10em);
+
+		$expected5: linear-gradient(to right,
+			#000 2em,
+			#f00 7em,
+			mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 7em + 3em * .25,
+			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 7em + 3em * .5,
+			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 7em + 3em * .75,
+			transparent 10em);
+
+		@include assert-equal($gradient5, $expected5, 'Linear gradient with 3 positioned color stops, 1 easing transitions');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient6: gradients.easing-gradient(linear,
+			to right,
+			#000        2em,
+			ease-in-quad,
+			#f00        7em,
+			ease-in-quad,
+			transparent 10em);
+
+		$expected6: linear-gradient(to right,
+			#000 2em,
+			mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 2em + 5em * .25,
+			mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 2em + 5em * .5,
+			mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 2em + 5em * .75,
+			#f00 7em,
+			mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 7em + 3em * .25,
+			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 7em + 3em * .5,
+			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 7em + 3em * .75,
+			transparent 10em);
+
+		@include assert-equal($gradient6, $expected6, 'Linear gradient with 3 positioned color stops, 2 easing transitions');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient7: gradients.easing-gradient(linear,
+			to right,
+			#000        2em,
+			ease-in-quad,
+			#f00,
+			ease-in-quad,
+			transparent 10em);
+
+		$expected7: linear-gradient(to right,
+			#000 2em,
+			mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 2em + 4em * .25,
+			mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 2em + 4em * .5,
+			mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 2em + 4em * .75,
+			#f00 6em,
+			mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 6em + 4em * .25,
+			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 6em + 4em * .5,
+			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 6em + 4em * .75,
+			transparent 10em);
+
+		@include assert-equal($gradient7, $expected7, 'Linear gradient with 2 / 3 positioned color stops, 2 easing transitions');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient8: gradients.easing-gradient(linear,
+			to right,
+			#000,
+			ease-in-quad,
+			#f00,
+			ease-in-quad,
+			transparent);
+
+		$expected8: linear-gradient(to right,
+			#000 0,
+			mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 50% * .25,
+			mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 50% * .5,
+			mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 50% * .75,
+			#f00 50%,
+			mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 50% + 50% * .25,
+			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 50% + 50% * .5,
+			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 50% + 50% * .75,
+			transparent 100%);
+
+		@include assert-equal($gradient8, $expected8, 'Linear gradient with 0 / 3 positioned color stops, 2 easing transitions');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient9: gradients.easing-gradient(linear,
+			to right,
+			#000,
+			ease-in-quad,
+			#f00,
+			ease-in-quad,
+			transparent 20em);
+
+		$expected9: linear-gradient(to right,
+			#000 0,
+			mix(#f00, #000, easing.ease-in-quad(.25) * 100%) 10em * .25,
+			mix(#f00, #000, easing.ease-in-quad(.5)  * 100%) 10em * .5,
+			mix(#f00, #000, easing.ease-in-quad(.75) * 100%) 10em * .75,
+			#f00 10em,
+			mix(transparent, #f00, easing.ease-in-quad(.25) * 100%) 10em + 10em * .25,
+			mix(transparent, #f00, easing.ease-in-quad(.5)  * 100%) 10em + 10em * .5,
+			mix(transparent, #f00, easing.ease-in-quad(.75) * 100%) 10em + 10em * .75,
+			transparent 20em);
+
+		@include assert-equal($gradient9, $expected9, 'Linear gradient with 1 / 3 positioned color stops, 2 easing transitions');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient10: gradients.easing-gradient(linear,
+			to right,
+			#000,
+			cubic-bezier .47 0 .745 .715,
+			transparent);
+
+		$expected10: linear-gradient(to right,
+			#000 0,
+			mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .25) * 100%) 25%,
+			mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .5)  * 100%) 50%,
+			mix(transparent, #000, easing.cubic-bezier(.47, 0, .745, .715, .75) * 100%) 75%,
+			transparent 100%);
+
+		@include assert-equal($gradient10, $expected10, 'Simple linear gradient with custom cubic-bezier easing');
+
+		// ---------------------------------------------------------------------------
+
+		$gradient11: gradients.easing-gradient(linear,
+			to right,
+			#000,
+			steps 4 jump-start,
+			transparent);
+
+		$expected11: linear-gradient(to right,
+			#000 0,
+			mix(transparent, #000, .25 * 100%) 0,
+			mix(transparent, #000, .25 * 100%) 25%,
+			mix(transparent, #000, .5  * 100%) 25%,
+			mix(transparent, #000, .5  * 100%) 50%,
+			mix(transparent, #000, .75 * 100%) 50%,
+			mix(transparent, #000, .75 * 100%) 75%,
+			transparent 75%,
+			transparent 100%);
+
+		@include assert-equal($gradient11, $expected11, 'Simple linear gradient with custom steps easing');
+	}
 }
-- 
cgit v1.2.3-70-g09d2