Merge pull request #139 from locomotivemtl/feature/update-node-version

Update node version to v17.9 and switch from node-sass to sass

.nvmrc

@@ -1 +1 @@
-v14.17
+v17.9

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": 1675951563987
+    "version": 1675955478084
 }

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";
 
 // ==========================================================================
 // Tools
@@ -46,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

@@ -47,8 +47,8 @@ $font-faces: (
 // =============================================================================
 
 // Base
-$font-size:     16px;
-$line-height:   24px / $font-size;
+$font-size: 16px;
+$line-height:   math.div(24px, $font-size);
 $font-color:    $color-darkest;
 
 // Weights

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);
@@ -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,12 +2,14 @@
  * @file Provides simple user configuration options.
  */
 
-import loconfig from '../../loconfig.json';
+import loconfig from '../../loconfig.json' assert { type: 'json' };
 
 let usrconfig;
 
 try {
-    usrconfig = await import('../../loconfig.local.json');
+    usrconfig = await import('../../loconfig.local.json', {
+        assert: { type: 'json' }
+    });
     usrconfig = usrconfig.default;
 
     merge(loconfig, 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": ">=17.9",
         "npm": ">=8.0"
     },
     "scripts": {
@@ -18,16 +18,16 @@
         "modujs": "^1.4.2",
         "modularload": "^1.2.6",
         "normalize.css": "^8.0.1",
+        "sass": "^1.57.1",
         "svg4everybody": "^2.1.9"
     },
     "devDependencies": {
         "autoprefixer": "^10.4.13",
-        "browser-sync": "^2.27.11",
+        "browser-sync": "^2.27.5",
         "concat": "^1.0.3",
         "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",