Update Node and NPM constraints and dependencies

Requied: - Node v20 → v22 - 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`.
Remove polyfill.io
2026-01-15 00:55:08 +08:00 · 2024-06-27 14:10:46 -04:00 · 2024-06-25 18:19:00 -04:00 · 2024-04-03 09:29:52 -04:00 · 2024-04-03 08:29:24 -04:00 · 2024-04-03 08:28:57 -04:00
15 changed files with 1301 additions and 3128 deletions
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v20.10
+v22
--- 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 22, 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/_heading.scss
+++ b/assets/styles/components/_heading.scss
@@ -2,30 +2,78 @@
 // Components / Headings
 // ==========================================================================

+// Font sizes
+// ==========================================================================
+:root {
+    // Default
+    --font-size-h1: #{responsive-value(38px, 90px, $from-xl)};
+    --font-size-h2: #{responsive-value(34px, 72px, $from-xl)};
+    --font-size-h3: #{responsive-value(28px, 54px, $from-xl)};
+    --font-size-h4: #{responsive-value(24px, 40px, $from-xl)};
+    --font-size-h5: #{responsive-value(20px, 30px, $from-xl)};
+    --font-size-h6: #{responsive-value(18px, 23px, $from-xl)};
+}
+
+// Mixins
+// ==========================================================================
+
+@mixin heading {
+    font-family: ff('sans');
+    font-weight: $font-weight-medium;
+}
+
+@mixin heading-h1 {
+    font-size: var(--font-size-h1);
+    line-height: 1.1;
+}
+
+@mixin heading-h2 {
+    font-size: var(--font-size-h2);
+    line-height: 1.1;
+}
+
+@mixin heading-h3 {
+    font-size: var(--font-size-h3);
+    line-height: 1.1;
+}
+
+@mixin heading-h4 {
+    font-size: var(--font-size-h4);
+    line-height: 1.2;
+}
+
+@mixin heading-h5 {
+    font-size: var(--font-size-h5);
+    line-height: 1.2;
+}
+
+@mixin heading-h6 {
+    font-size: var(--font-size-h6);
+    line-height: 1.4;
+}
+
+// Styles
+// ==========================================================================
+
 .c-heading {
-    margin-bottom: rem(30px);
+    @include heading;

    &.-h1 {
-        font-size: var(--font-size-h1);
+        @include heading-h1;
    }
-
    &.-h2 {
-        font-size: var(--font-size-h2);
+        @include heading-h2;
    }
-
    &.-h3 {
-        font-size: var(--font-size-h3);
+        @include heading-h3;
    }
-
    &.-h4 {
-        font-size: var(--font-size-h4);
+        @include heading-h4;
    }
-
    &.-h5 {
-        font-size: var(--font-size-h5);
+        @include heading-h5;
    }
-
    &.-h6 {
-        font-size: var(--font-size-h6);
+        @include heading-h6;
    }
 }
--- a/assets/styles/components/_text.scss
+++ b/assets/styles/components/_text.scss
@@ -0,0 +1,53 @@
+// ==========================================================================
+// Components / Texts
+// ==========================================================================
+
+// Font sizes
+// ==========================================================================
+:root {
+    --font-size-body-regular:   #{responsive-value(15px, 17px, $from-lg)};
+    --font-size-body-medium:    #{responsive-value(18px, 23px, $from-lg)};
+    --font-size-body-small:     #{responsive-value(13px, 16px, $from-lg)};
+}
+
+// Mixins
+// ==========================================================================
+@mixin text {
+    font-family: ff('sans');
+}
+
+@mixin body-regular {
+    font-size: var(--font-size-body-regular);
+    font-weight: $font-weight-normal;
+    line-height: 1.2;
+}
+
+@mixin body-medium {
+    font-size: var(--font-size-body-medium);
+    font-weight: $font-weight-normal;
+    line-height: 1.2;
+}
+
+@mixin body-small {
+    font-size: var(--font-size-body-small);
+    font-weight: $font-weight-normal;
+    line-height: 1.2;
+}
+
+// Styles
+// ==========================================================================
+.c-text {
+    @include text;
+
+    &.-body-regular {
+        @include body-regular;
+    }
+
+    &.-body-medium {
+        @include body-medium;
+    }
+
+    &.-body-small {
+        @include body-small;
+    }
+}
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -54,6 +54,7 @@
 // ==========================================================================

@import "components/heading";
+@import "components/text";
@import "components/button";
@import "components/form";

--- a/assets/styles/settings/_config.variables.scss
+++ b/assets/styles/settings/_config.variables.scss
@@ -12,19 +12,6 @@
    // Container
    --container-width:  calc(100% - 2 * var(--grid-margin));

-    // Font sizes
-    --font-size-h1:     #{responsive-type(36px, 72px, 1400px)};
-    --font-size-h2:     #{rem(28px)};
-    --font-size-h3:     #{rem(24px)};
-    --font-size-h4:     #{rem(20px)};
-    --font-size-h5:     #{rem(18px)};
-    --font-size-h6:     #{rem(16px)};
-
-    // // Colors
-    // @each $color, $value in $colors {
-    //     --color-#{"" + $color}: #{$value};
-    // }
-
    @media (min-width: $from-sm) {
        --grid-columns:     #{$base-column-nb};
        --grid-gutter:      #{rem(16px)};
--- a/assets/styles/tools/_functions.scss
+++ b/assets/styles/tools/_functions.scss
@@ -196,11 +196,11 @@ $context: 'frontend' !default;
 //
 // ```scss
 // .c-heading.-h1 {
-//     font-size: responsive-type(30px, 60px, 1800);
+//     font-size: responsive-value(30px, 60px, 1800);
 // }
 //
 // .c-heading.-h2 {
-//     font-size: responsive-type(20px, 40px, $from-xl);
+//     font-size: responsive-value(20px, 40px, $from-xl);
 // }
 // ```
 //
@@ -208,7 +208,7 @@ $context: 'frontend' !default;
 // @param  {number} $max-size   - Maximum font size in pixels.
 // @param  {number} $breakpoint - Maximum breakpoint.
 // @return {function<number, function<number>, number>}
-@function responsive-type($min-size, $max-size, $breakpoint) {
+@function responsive-value($min-size, $max-size, $breakpoint) {
    $delta: math.div($max-size, $breakpoint);
    @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
 }
--- 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/svgs.js
+++ b/build/tasks/svgs.js
@@ -1,21 +1,36 @@
 import loconfig from '../helpers/config.js';
+import glob, { supportsGlob } from '../helpers/glob.js';
 import message from '../helpers/message.js';
 import notification from '../helpers/notification.js';
-import resolve from '../helpers/template.js';
+import { resolve as resolveTemplate } from '../helpers/template.js';
 import { merge } from '../utils/index.js';
-import { basename } from 'node:path';
+import {
+    basename,
+    dirname,
+    extname,
+    resolve,
+} from 'node:path';
+import commonPath from 'common-path';
 import mixer from 'svg-mixer';
+import slugify from 'url-slug';
+
+const basePath = loconfig?.paths?.svgs?.src
+    ? resolve(loconfig.paths.svgs.src)
+    : null;

 /**
- * @const {object} defaultMixerOptions     - The default shared Mixer options.
- * @const {object} developmentMixerOptions - The predefined Mixer options for development.
- * @const {object} productionMixerOptions  - The predefined Mixer options for production.
+ * @const {object} defaultMixerOptions - The default shared Mixer options.
 */
 export const defaultMixerOptions = {
    spriteConfig: {
        usages: false,
    },
 };
+
+/**
+ * @const {object} developmentMixerOptions - The predefined Mixer options for development.
+ * @const {object} productionMixerOptions  - The predefined Mixer options for production.
+ */
 export const developmentMixerOptions = Object.assign({}, defaultMixerOptions);
 export const productionMixerOptions  = Object.assign({}, defaultMixerOptions);

@@ -74,10 +89,52 @@ export default async function compileSVGs(mixerOptions = null) {
                includes = [ includes ];
            }

-            includes = resolve(includes);
-            outfile  = resolve(outfile);
+            includes = resolveTemplate(includes);
+            outfile  = resolveTemplate(outfile);

-            const result = await mixer(includes, mixerOptions);
+            if (supportsGlob && basePath) {
+                includes = await glob(includes);
+                includes = [ ...new Set(includes) ];
+
+                const common = commonPath(includes);
+                if (common.commonDir) {
+                    common.commonDir = resolve(common.commonDir);
+                }
+
+                /**
+                 * Generates the `<symbol id>` attribute and prefix any
+                 * SVG files in subdirectories according to the paths
+                 * common base path.
+                 *
+                 * Example for SVG source path `./assets/images/sprite`:
+                 *
+                 * | Path                                 | ID        |
+                 * | ------------------------------------ | --------- |
+                 * | `./assets/images/sprite/foo.svg`     | `foo`     |
+                 * | `./assets/images/sprite/baz/qux.svg` | `baz-qux` |
+                 *
+                 * @param  {string} path       - The absolute path to the file.
+                 * @param  {string} [query=''] - A query string.
+                 * @return {string} The symbol ID.
+                 */
+                mixerOptions.generateSymbolId = (path, query = '') => {
+                    let dirName = dirname(path)
+                        .replace(common.commonDir ?? basePath, '')
+                        .replace(/^\/|\/$/, '')
+                        .replace('/', '-');
+                    if (dirName) {
+                        dirName += '-';
+                    }
+
+                    const fileName = basename(path, extname(path));
+                    const decodedQuery = decodeURIComponent(decodeURIComponent(query));
+                    return `${dirName}${fileName}${slugify(decodedQuery)}`;
+                };
+            }
+
+            const result = await mixer(includes, {
+                ...mixerOptions,
+            });

            await result.write(outfile);

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -6,38 +6,43 @@
    "author": "Locomotive <info@locomotive.ca>",
    "type": "module",
    "engines": {
-        "node": "20.x",
-        "npm": ">=8.0"
+        "node": ">=22",
+        "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.13",
        "modujs": "^1.4.2",
        "modularload": "^1.2.6",
        "svg4everybody": "^2.1.9"
    },
    "devDependencies": {
-        "autoprefixer": "^10.4.17",
+        "autoprefixer": "^10.4.19",
        "browser-sync": "^3.0.2",
+        "common-path": "^1.0.1",
        "concat": "^1.0.3",
-        "esbuild": "^0.20.0",
+        "esbuild": "^0.21.5",
        "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.38",
+        "purgecss": "^6.0.0",
+        "sass": "^1.77.6",
+        "svg-mixer": "^2.3.14",
        "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.4",
+            "postcss": "^8.4.38"
+        },
+        "svg-mixer-utils": {
+            "anymatch": "^3.1.3"
        }
    }
 }
--- a/www/form.html
+++ b/www/form.html
@@ -97,7 +97,6 @@
        </div>

        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>

        <script src="assets/scripts/vendors.js" defer></script>
        <script src="assets/scripts/app.js" defer></script>
--- a/www/grid.html
+++ b/www/grid.html
@@ -85,9 +85,6 @@

    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>

    <script src="assets/scripts/vendors.js" defer></script>
    <script src="assets/scripts/app.js" defer></script>
--- a/www/images.html
+++ b/www/images.html
@@ -123,7 +123,6 @@
        </div>

        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>

        <script src="assets/scripts/vendors.js" defer></script>
        <script src="assets/scripts/app.js" defer></script>
--- a/www/index.html
+++ b/www/index.html
@@ -71,9 +71,6 @@

    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>

    <script src="assets/scripts/vendors.js" defer></script>
    <script src="assets/scripts/app.js" defer></script>
Author	SHA1	Message	Date
Chauncey McAskill	5cc44d76af	Update Node and NPM constraints and dependencies Requied: - Node v20 → v22 - 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`.	2024-06-27 14:10:46 -04:00
Chauncey McAskill	25823286d5	Remove polyfill.io See: https://sansec.io/research/polyfill-supply-chain-attack	2024-06-25 18:19:00 -04:00
Chauncey McAskill	605f30c948	Fix svg-mixer support for sub-directories By default, svg-mixer only uses the SVG's file name as its ID. If any SVG files are stored in sub-directories, that information is ignored in the assembled spritesheet. This is problematic since context is lost (the sub-directory's name) and risks duplicate symbol IDs. This commit introduces a new NPM dependency, `common-path` to resolve the longest common base path, and uses a dependency of `svg-mixer` named `url-slug` in order to prefix the directory name.	2024-04-03 09:29:52 -04:00
Lucas Bigot	27a41aba66	Add default text dedicated file (#173 )	2024-04-03 08:29:24 -04:00
Lucas Bigot	353a38915d	Update default headings (#172 ) * Move font-size css var into dedicated heading file + Add default mixins * Rename responsive-type for a more generic name	2024-04-03 08:28:57 -04:00