Merge branch 'feature/update-node-version' into devenini/develop

.nvmrc

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

README.md

@@ -23,7 +23,7 @@ Learn more about [languages and technologies](docs/technologies.md).
 
 Make sure you have the following installed:
 
-* [Node] — at least 14.17, the latest LTS is recommended.
+* [Node] — at least 18.13, the latest LTS is recommended.
 * [NPM] — at least 8.0, the latest LTS is recommended.
 
 > 💡 You can use [NVM] to install and use different versions of Node via the command-line.

assets.json

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

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,7 +1,7 @@
 // ==========================================================================
 // Main
 // ==========================================================================
-$app-env: app-env();
+@use "sass:math";
 
 // Settings
 // ==========================================================================
@@ -45,7 +45,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,88 +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

@@ -53,7 +53,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.
@@ -44,7 +44,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/utilities/_ratio.scss

@@ -34,8 +34,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);
@@ -26,11 +26,6 @@ export const defaultSassOptions = {
 
 export const developmentSassOptions = Object.assign({}, defaultSassOptions, {
     outputStyle: 'expanded',
-    functions: {
-        'app-env()': function () {
-            return (new types.String('development'))
-        }
-    }
 });
 export const productionSassOptions = Object.assign({}, defaultSassOptions, {
     outputStyle: 'compressed',

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;
 

docs/development.md

@@ -265,7 +265,7 @@ See [`scripts.js`](../build/tasks/scripts.js) for details.
 
 ### `styles`
 
-A wrapper around [node-sass] (with optional support for [Autoprefixer]
+A wrapper around [sass] (with optional support for [Autoprefixer]
 via [PostCSS]) for compiling and minifying Sass into CSS.
 
 By default, [PostCSS] and [Autoprefixer] are installed with the boilerplate.
@@ -416,7 +416,7 @@ See [`versions.js`](../build/tasks/versions.js) for details.
 [glob]:         https://npmjs.com/package/glob
 [globby]:       https://npmjs.com/package/globby
 [Node]:         https://nodejs.org/
-[node-sass]:    https://npmjs.com/package/node-sass
+[sass]:         https://npmjs.com/package/sass
 [NPM]:          https://npmjs.com/
 [NVM]:          https://github.com/nvm-sh/nvm
 [PostCSS]:      https://npmjs.com/package/postcss

package.json

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