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
Upgrade sass package to v1.79 (#183 )
2026-01-15 00:55:08 +08:00 · 2024-10-16 10:54:56 -04:00 · 2024-10-16 10:07:10 -04:00 · 2024-07-04 13:12:54 -04:00 · 2024-07-04 13:12:18 -04:00
16 changed files with 2727 additions and 5882 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,13 +5,9 @@ loconfig.*.json
 !loconfig.example.json
 .prettierrc

-www/assets/scripts/app.js
-www/assets/scripts/app.js.map
-www/assets/scripts/vendors.js
-
-www/assets/styles/main.css
-www/assets/styles/main.css.map
-www/assets/styles/critical.css
-www/assets/styles/critical.css.map
+www/assets/scripts/*
+!www/assets/scripts/.gitkeep
+www/assets/styles/*
+!www/assets/styles/.gitkeep

 assets.json
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v20.10
+v20
--- a/README.md
+++ b/README.md
@@ -23,8 +23,8 @@ Learn more about [languages and technologies](docs/technologies.md).

 Make sure you have the following installed:

-* [Node] — at least 17.9, the latest LTS is recommended.
-* [NPM] — at least 8.0, the latest LTS is recommended.
+* [Node] — at least 20, the latest LTS is recommended.
+* [NPM] — at least 10, the latest LTS is recommended.

 > 💡 You can use [NVM] to install and use different versions of Node via the command-line.

--- a/assets/styles/components/_form.scss
+++ b/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;
    }

--- a/assets/styles/components/_scrollbar.scss
+++ b/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;
--- a/assets/styles/main.scss
+++ b/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
 // ==========================================================================
--- a/assets/styles/settings/_config.colors.scss
+++ b/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-focus:     color(primary);
-$color-link-hover:     darken(color(primary), 10%);
+$color-link:           colorCode(primary);
+$color-link-focus:     colorCode(primary);
+$color-link-hover:     color.adjust(colorCode(primary), $lightness: -10%);

 // Selection
-$color-selection-text:         color(darkest);
-$color-selection-background:   color(lightest);
+$color-selection-text:         colorCode(darkest);
+$color-selection-background:   colorCode(lightest);

 // Socials
 $color-facebook:    #3B5998;
--- a/assets/styles/settings/_config.scss
+++ b/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;
--- a/build/helpers/config.js
+++ b/build/helpers/config.js
@@ -2,14 +2,14 @@
 * @file Provides simple user configuration options.
 */

-import loconfig from '../../loconfig.json' assert { type: 'json' };
+import loconfig from '../../loconfig.json' with { type: 'json' };
 import { merge } from '../utils/index.js';

 let usrconfig;

 try {
    usrconfig = await import('../../loconfig.local.json', {
-        assert: { type: 'json' },
+        with: { type: 'json' },
    });
    usrconfig = usrconfig.default;

--- a/build/tasks/styles.js
+++ b/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, {
-                file: infile,
-                outFile: outfile,
-            }));
+            let result = sass.compile(infile, sassOptions);

            if (supportsPostCSS && postcssOptions) {
                if (typeof postcssProcessor === 'undefined') {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,39 +6,43 @@
    "author": "Locomotive <info@locomotive.ca>",
    "type": "module",
    "engines": {
-        "node": "20.x",
-        "npm": ">=8.0"
+        "node": ">=20",
+        "npm": ">=10"
    },
    "scripts": {
-        "start": "node --experimental-json-modules --no-warnings build/watch.js",
-        "build": "node --experimental-json-modules --no-warnings build/build.js"
+        "start": "node --no-warnings build/watch.js",
+        "build": "node --no-warnings build/build.js"
    },
    "dependencies": {
-        "locomotive-scroll": "^5.0.0-beta.11",
+        "locomotive-scroll": "^5.0.0-beta.21",
        "modujs": "^1.4.2",
        "modularload": "^1.2.6",
        "svg4everybody": "^2.1.9"
    },
    "devDependencies": {
-        "autoprefixer": "^10.4.17",
+        "autoprefixer": "^10.4.20",
        "browser-sync": "^3.0.2",
        "common-path": "^1.0.1",
        "concat": "^1.0.3",
-        "esbuild": "^0.20.0",
+        "esbuild": "^0.24.0",
        "kleur": "^4.1.5",
        "node-notifier": "^10.0.1",
-        "postcss": "^8.4.21",
-        "purgecss": "^5.0.0",
-        "sass": "^1.70.0",
-        "svg-mixer": "~2.3.14",
+        "postcss": "^8.4.47",
+        "purgecss": "^6.0.0",
+        "sass": "^1.79.5",
+        "svg-mixer": "^2.4.0",
        "tiny-glob": "^0.2.9"
    },
    "overrides": {
        "browser-sync": {
-            "ua-parser-js": "~1.0.33"
+            "ua-parser-js": "^1.0.33"
        },
        "svg-mixer": {
-            "postcss": "^8.4.20"
+            "micromatch": "^4.0.8",
+            "postcss": "^8.4.38"
+        },
+        "svg-mixer-utils": {
+            "anymatch": "^3.1.3"
        }
    }
 }
--- a/www/form.html
+++ b/www/form.html
@@ -96,8 +96,6 @@
            </div>
        </div>

-        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-
        <script src="assets/scripts/vendors.js" defer></script>
        <script src="assets/scripts/app.js" defer></script>
    </body>
--- a/www/grid.html
+++ b/www/grid.html
@@ -83,9 +83,6 @@
        </div>
    </div>

-    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
-        crossorigin="anonymous"></script>
-
    <script src="assets/scripts/vendors.js" defer></script>
    <script src="assets/scripts/app.js" defer></script>
 </body>
--- a/www/images.html
+++ b/www/images.html
@@ -122,8 +122,6 @@
            </div>
        </div>

-        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-
        <script src="assets/scripts/vendors.js" defer></script>
        <script src="assets/scripts/app.js" defer></script>
    </body>
--- a/www/index.html
+++ b/www/index.html
@@ -69,9 +69,6 @@
        </div>
    </div>

-    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
-        crossorigin="anonymous"></script>
-
    <script src="assets/scripts/vendors.js" defer></script>
    <script src="assets/scripts/app.js" defer></script>
 </body>
Author	SHA1	Message	Date
Chauncey McAskill	b4ee0955c3	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	2024-10-16 10:54:56 -04:00
Michel Descoteaux	1ec1229fe4	Upgrade sass package to v1.79 (#183 ) * Update sass to v1.79 * Fix broken node_modules import * Fix conflict with new sass color() function color() -> colorCode() * build:styles - Remove deprecated sass.render() * build:styles - remove infile + outfile from sass.compile options	2024-10-16 10:07:10 -04:00
Chauncey McAskill	d593fe5409	Update to NPM v10 + Update dependencies (#179 ) * Update NPM constraint and dependencies Requied: - NPM v8 → v10 Changed: - Fixed Node/NPM requirements in README. - Fixed dependency vulenerabilities. - Updated dependencies. - Removed obsolete Node flag `--experimental-json-modules`. - Replaced obsolete import `assert` keyword with `with`. * Update gitignore of assets to use wildcards --------- Co-authored-by: Deven Caron <devencaron@gmail.com>	2024-07-04 13:12:54 -04:00
Chauncey McAskill	f8a46043a6	Remove babel-polyfill (#178 ) All features are suported by modern browsers. Can be restored if ever needed to support older browsers.	2024-07-04 13:12:18 -04:00