feat: Resolve deprecation notices (global built-in functions) (#62)

## Description
There are a large number of deprecation notices being shown due to
incoming changes in SASS. This change addresses the notices relating
to global built-in functions.

## Issue
https://jira.dev.bbc.co.uk/browse/GEL

lib/_settings.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 ///*------------------------------------*\
 //    # GEL GRID - SETTINGS
 //\*------------------------------------*/
@@ -133,5 +135,5 @@ $gel-grid-enable--whitespace-fix: false !default;
 // all the breakpoints into a single map
 //
 @if $gel-grid-1280-toggle-class == null {
-	$gel-grid-breakpoints: join($gel-grid-breakpoints, $gel-grid-breakpoints--1280);
+	$gel-grid-breakpoints: list.join($gel-grid-breakpoints, $gel-grid-breakpoints--1280);
 }

lib/_tools.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use 'sass:math';
 
 ///*------------------------------------*\
@@ -26,17 +27,17 @@
     }
 
     @if $enhanced {
-        @include mq($from: $gel-grid-margin-change) {
-            #{$padding-left}: double($gel-spacing-unit);
-            #{$padding-right}: double($gel-spacing-unit);
-        }
-
         @if $gel-grid-enable--box-sizing {
             -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                     box-sizing: border-box;
         }
 
+        @include mq($from: $gel-grid-margin-change) {
+            #{$padding-left}: double($gel-spacing-unit);
+            #{$padding-right}: double($gel-spacing-unit);
+        }
+
         @if $gel-grid-enable--1280-breakpoint {
             @if $gel-grid-1280-toggle-class != null {
                 .#{$gel-grid-1280-toggle-class} & {
@@ -91,10 +92,6 @@
         #{$padding-right}: 0; // [2]
         #{$padding-left}: 0; // [2]
 
-        @include mq($from: $gel-grid-gutter-change) {
-            #{$margin-left}: double(-$gel-spacing-unit);
-        }
-
         @if $gel-grid-enable--whitespace-fix {
             letter-spacing: -0.31em;
             text-rendering: optimizespeed;
@@ -109,6 +106,10 @@
                 }
             }
         }
+
+        @include mq($from: $gel-grid-gutter-change) {
+            #{$margin-left}: double(-$gel-spacing-unit);
+        }
     }
 }
 
@@ -131,10 +132,6 @@
         text-align: flip(left, right); // [3]
         vertical-align: top; // [4]
 
-        @include mq($from: $gel-grid-gutter-change) {
-            #{$padding-left}: double($gel-spacing-unit); // [2]
-        }
-
         @if $gel-grid-enable--box-sizing {
             -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
@@ -146,6 +143,10 @@
             word-spacing: normal;
             text-rendering: auto;
         }
+
+        @include mq($from: $gel-grid-gutter-change) {
+            #{$padding-left}: double($gel-spacing-unit); // [2]
+        }
     }
 }
 
@@ -409,10 +410,10 @@
 @function gel-columns($span, $columns: $gel-grid-default-columns) {
 	@if $span >= 1 {
 		// Convert the given span to a fraction of the columns
-		@return percentage(math.div($span, $columns));
+		@return math.percentage(math.div($span, $columns));
 	} @else {
 		// A fraction has been supplied so lets just converting it to a percentage
-		@return percentage($span);
+		@return math.percentage($span);
 	}
 }
 
@@ -455,8 +456,8 @@
                 // dart-sass does not support precision, so do it manually
                 $width: math.div(round(math.div($i, $column) * 10000000), 10000000);
 
-                @if map-has-key($output-widths, $width) == false {
-                    $output-widths: map-merge($output-widths, ($width: true));
+                @if map.has-key($output-widths, $width) == false {
+                    $output-widths: map.merge($output-widths, ($width: true));
 
                     .#{$gel-grid-namespace}#{$i}\/#{$column}#{$breakpoint-suffix} {
                         width: gel-columns($width) !important;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gel-grid",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "A flexible code implementation of the GEL Grid",
   "main": "_grid.scss",
   "scripts": {
@@ -39,6 +39,6 @@
     "sass-mq": "6.0.0"
   },
   "dependencies": {
-    "gel-sass-tools": "3.3.0"
+    "gel-sass-tools": "3.4.0"
   }
 }

test/test-expected.css

@@ -46,15 +46,16 @@
   letter-spacing: -0.31em;
   text-rendering: optimizespeed;
 }
+.opera-only :-o-prefocus,
+.gel-layout {
+  word-spacing: -0.43em;
+}
+
 @media (min-width: 37.5em) {
   .gel-layout {
     margin-left: -16px;
   }
 }
-.opera-only :-o-prefocus,
-.gel-layout {
-  word-spacing: -0.43em;
-}
 
 /**
  * A single grid item
@@ -891,15 +892,16 @@
   letter-spacing: -0.31em;
   text-rendering: optimizespeed;
 }
+.opera-only :-o-prefocus,
+.my-component {
+  word-spacing: -0.43em;
+}
+
 @media (min-width: 37.5em) {
   .my-component {
     margin-left: -16px;
   }
 }
-.opera-only :-o-prefocus,
-.my-component {
-  word-spacing: -0.43em;
-}
 
 .my-component__item {
   width: 100%;