Bump node-version & upgrade node-sass to sass

.nvmrc

@@ -1 +1 @@
-v14.17
+v18.13

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1673639671975
+    "version": 1675191438427
 }

assets/styles/components/_form.scss

@@ -63,7 +63,7 @@ $checkbox-icon-color: $input-icon-color;
         top: 50%;
         left: 0;
         display: inline-block;
-        margin-top: (-$checkbox / 2);
+        margin-top: math.div(-$checkbox, 2);
         padding: 0;
         width: $checkbox;
         height: $checkbox;

assets/styles/main.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 // ==========================================================================
 // Main
 // ==========================================================================
@@ -45,7 +46,6 @@ $app-env: app-env();
 @import "objects/icons";
 @import "objects/grid";
 // @import "objects/layout";
-// @import "objects/crop";
 // @import "objects/table";
 
 // Vendors

assets/styles/objects/_crop.scss

@@ -1,83 +0,0 @@
-// ==========================================================================
-// Objects / Crop
-// ==========================================================================
-
-// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.crop.scss
-
-
-// A list of cropping ratios that get generated as modifier classes.
-
-$crop-ratios: (
-    (2:1),
-    (4:3),
-    (16:9),
-) !default;
-
-// Provide a cropping container in order to display media (usually images)
-// cropped to certain ratios.
-//
-// 1. Set up a positioning context in which the image can sit.
-// 2. This is the crucial part: where the cropping happens.
-
-.o-crop {
-    position: relative; // [1]
-    display: block;
-    overflow: hidden; // [2]
-}
-
-// Apply this class to the content (usually `img`) that needs cropping.
-//
-// 1. Image’s default positioning is top-left in the cropping box.
-// 2. Make sure the media doesn’t stop itself too soon.
-
-.o-crop_content {
-    position: absolute;
-    top: 0; // [1]
-    left: 0; // [1]
-    max-width: none; // [2]
-
-    // We can position the media in different locations within the cropping area.
-
-    &.-right {
-        right: 0;
-        left: auto;
-    }
-
-    &.-bottom {
-        top: auto;
-        bottom: 0;
-    }
-
-    &.-center {
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-}
-
-/* stylelint-disable */
-
-// Generate a series of crop classes to be used like so:
-//
-// @example
-//   <div class="o-crop -16:9">
-
-.o-crop {
-    @each $crop in $crop-ratios {
-        @each $antecedent, $consequent in $crop {
-            @if (type-of($antecedent) != number) {
-                @error "`#{$antecedent}` needs to be a number.";
-            }
-
-            @if (type-of($consequent) != number) {
-                @error "`#{$consequent}` needs to be a number.";
-            }
-
-            &.-#{$antecedent}\:#{$consequent} {
-                padding-bottom: ($consequent/$antecedent) * 100%;
-            }
-        }
-    }
-}
-
-/* stylelint-enable */

assets/styles/settings/_config.scss

@@ -48,7 +48,7 @@ $font-faces: (
 
 // Base
 $font-size: 16px;
-$line-height:   24px / $font-size;
+$line-height:   math.div(24px, $font-size);
 $font-color:    $color-darkest;
 
 // Headings

assets/styles/tools/_functions.scss

@@ -26,7 +26,7 @@
         @error "`#{$base}` needs to be a number in pixel.";
     }
 
-    @return ($size / $base) * 1em;
+    @return math.div($size, $base) * 1em;
 }
 
 // Converts the given pixel value to its REM quivalent.
@@ -45,7 +45,7 @@
         @error "`#{$base}` needs to be a number in pixel.";
     }
 
-    @return ($size / $base) * 1rem;
+    @return math.div($size, $base) * 1rem;
 }
 
 // Retrieves the z-index from the {@see $layers master list}.

assets/styles/tools/_mixins.scss

@@ -57,7 +57,7 @@
         @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {
             line-height: $line-height $important;
         }
-        @elseif ($line-height != "none" and $line-height != false) {
+        @else if ($line-height != "none" and $line-height != false) {
             @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`.";
         }
     }

assets/styles/utilities/_ratio.scss

@@ -28,8 +28,8 @@ $aspect-ratios: (
             @error "`#{$consequent}` needs to be a number."
         }
 
-        &.u-#{$antecedent}\:#{$consequent}::before {
-            padding-bottom: ($consequent/$antecedent) * 100%;
+        .u-#{$antecedent}\:#{$consequent}::before {
+            padding-bottom: math.div($consequent, $antecedent) * 100%;
         }
     }
 }

build/tasks/styles.js

@@ -6,7 +6,7 @@ import resolve from '../utils/template.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
 import { promisify } from 'node:util';
-import sass, { types } from 'node-sass';
+import sass from 'sass';
 import { PurgeCSS } from 'purgecss';
 
 const sassRender = promisify(sass.render);

build/utils/config.js

@@ -2,7 +2,7 @@
  * @file Provides simple user configuration options.
  */
 
-import loconfig from '../../loconfig.json';
+import loconfig from '../../loconfig.json' assert { type: "json" };
 
 let usrconfig;
 

package.json

@@ -6,7 +6,7 @@
     "author": "Locomotive <info@locomotive.ca>",
     "type": "module",
     "engines": {
-        "node": ">=14.17",
+        "node": ">=18.13",
         "npm": ">=8.0"
     },
     "scripts": {
@@ -18,6 +18,7 @@
         "modujs": "^1.4.2",
         "modularload": "^1.2.6",
         "normalize.css": "^8.0.1",
+        "sass": "^1.57.1",
         "svg4everybody": "^2.1.9"
     },
     "devDependencies": {
@@ -27,7 +28,6 @@
         "esbuild": "^0.16.17",
         "kleur": "^4.1.5",
         "node-notifier": "^10.0.1",
-        "node-sass": "^8.0.0",
         "postcss": "^8.4.21",
         "purgecss": "^5.0.0",
         "svg-mixer": "~2.3.14",