Update NPM dependencies

Updated:
- autoprefixer v10.4.19 → v10.4.20
- esbuild v0.21.5 → v0.21.5
- locomotive-scroll v5.0.0-beta.13 → v5.0.0-beta.21
- micromatch v4.0.4 → v4.0.8
- postcss v8.4.38 → v8.4.47
- svg-mixer v2.4.0 → v2.3.14

assets/styles/components/_form.scss

@@ -27,7 +27,7 @@ $input-icon-color: 424242; // No #
 .c-form_input {
     padding: rem(10px);
     border: 1px solid lightgray;
-    background-color: color(lightest);
+    background-color: colorCode(lightest);
 
     &:hover {
         border-color: darkgray;
@@ -71,7 +71,7 @@ $checkbox-icon-color: $input-icon-color;
     }
 
     &::before {
-        background-color: color(lightest);
+        background-color: colorCode(lightest);
         border: 1px solid lightgray;
     }
 

assets/styles/components/_scrollbar.scss

@@ -25,7 +25,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    background-color: color(darkest);
+    background-color: colorCode(darkest);
     opacity: 0.5;
     width: 7px;
     border-radius: 10px;

assets/styles/main.scss

@@ -32,7 +32,7 @@
 
 // Vendors
 // ==========================================================================
-@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
+@import "../../node_modules/locomotive-scroll/dist/locomotive-scroll";
 
 // Elements
 // ==========================================================================

assets/styles/settings/_config.colors.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // ==========================================================================
 // Settings / Config / Colors
 // ==========================================================================
@@ -18,7 +20,7 @@ $colors: (
 //
 // ```scss
 // .c-box {
-//     color: color(primary);
+//     color: colorCode(primary);
 // }
 // ```
 //
@@ -26,7 +28,7 @@ $colors: (
 // @param  {number} $alpha - The alpha for the color value.
 // @return {color}
 
-@function color($key, $alpha: 1) {
+@function colorCode($key, $alpha: 1) {
     @if not map-has-key($colors, $key) {
         @error "Unknown '#{$key}' in $colors.";
     }
@@ -44,13 +46,13 @@ $colors: (
 // ==========================================================================
 
 // Link
-$color-link:           color(primary);
+$color-link:           colorCode(primary);
-$color-link-focus:     color(primary);
+$color-link-focus:     colorCode(primary);
-$color-link-hover:     darken(color(primary), 10%);
+$color-link-hover:     color.adjust(colorCode(primary), $lightness: -10%);
 
 // Selection
-$color-selection-text:         color(darkest);
+$color-selection-text:         colorCode(darkest);
-$color-selection-background:   color(lightest);
+$color-selection-background:   colorCode(lightest);
 
 // Socials
 $color-facebook:    #3B5998;

assets/styles/settings/_config.scss

@@ -17,7 +17,7 @@ $assets-path: "../"  !default;
 // Base
 $font-size:     16px;
 $line-height:   math.div(24px, $font-size);
-$font-color:    color(darkest);
+$font-color:    colorCode(darkest);
 
 // Weights
 $font-weight-light:     300;

build/tasks/styles.js

@@ -10,12 +10,9 @@ import resolve from '../helpers/template.js';
 import { merge } from '../utils/index.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
-import { promisify } from 'node:util';
 import * as sass from 'sass';
 import { PurgeCSS } from 'purgecss';
 
-const sassRender = promisify(sass.render);
-
 let postcssProcessor;
 
 /**
@@ -24,16 +21,15 @@ let postcssProcessor;
  * @const {object} productionSassOptions  - The predefined Sass options for production.
  */
 export const defaultSassOptions = {
-    omitSourceMapUrl: true,
+    sourceMapIncludeSources: true,
     sourceMap: true,
-    sourceMapContents: true,
 };
 
 export const developmentSassOptions = Object.assign({}, defaultSassOptions, {
-    outputStyle: 'expanded',
+    style: 'expanded',
 });
 export const productionSassOptions = Object.assign({}, defaultSassOptions, {
-    outputStyle: 'compressed',
+    style: 'compressed',
 });
 
 /**
@@ -127,10 +123,7 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
             infile  = resolve(infile);
             outfile = resolve(outfile);
 
-            let result = await sassRender(Object.assign({}, sassOptions, {
+            let result = sass.compile(infile, sassOptions);
-                file: infile,
-                outFile: outfile,
-            }));
 
             if (supportsPostCSS && postcssOptions) {
                 if (typeof postcssProcessor === 'undefined') {

package.json

@@ -14,23 +14,23 @@
         "build": "node --no-warnings build/build.js"
     },
     "dependencies": {
-        "locomotive-scroll": "^5.0.0-beta.13",
+        "locomotive-scroll": "^5.0.0-beta.21",
         "modujs": "^1.4.2",
         "modularload": "^1.2.6",
         "svg4everybody": "^2.1.9"
     },
     "devDependencies": {
-        "autoprefixer": "^10.4.19",
+        "autoprefixer": "^10.4.20",
         "browser-sync": "^3.0.2",
         "common-path": "^1.0.1",
         "concat": "^1.0.3",
-        "esbuild": "^0.21.5",
+        "esbuild": "^0.24.0",
         "kleur": "^4.1.5",
         "node-notifier": "^10.0.1",
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.47",
         "purgecss": "^6.0.0",
-        "sass": "^1.77.6",
+        "sass": "^1.79.5",
-        "svg-mixer": "^2.3.14",
+        "svg-mixer": "^2.4.0",
         "tiny-glob": "^0.2.9"
     },
     "overrides": {
@@ -38,7 +38,7 @@
             "ua-parser-js": "^1.0.33"
         },
         "svg-mixer": {
-            "micromatch": "^4.0.4",
+            "micromatch": "^4.0.8",
             "postcss": "^8.4.38"
         },
         "svg-mixer-utils": {