Start refactor boilerplate

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

.browserslistrc

@@ -1 +0,0 @@
-defaults

.gitignore

@@ -3,4 +3,9 @@ node_modules
 Thumbs.db
 loconfig.*.json
 !loconfig.example.json
-.prettierrc
+.prettierrc
+
+assets.json
+dist
+www
+.env

.nvmrc

@@ -1 +1 @@
-v20.10
+v20

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.
 

_assets/scripts/app.js

@@ -0,0 +1,137 @@
+import modular from 'modujs';
+import * as modules from './modules';
+import globals from './globals';
+import { debounce } from './utils/tickers';
+import { $html } from './utils/dom';
+import { ENV, FONT, CUSTOM_EVENT, CSS_CLASS } from './config'
+import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts';
+
+const app = new modular({
+    modules,
+});
+
+function init() {
+    bindEvents();
+    globals();
+    setViewportSizes();
+
+    app.init(app);
+
+    $html.classList.add(CSS_CLASS.LOADED, CSS_CLASS.READY);
+    $html.classList.remove(CSS_CLASS.LOADING);
+
+    /**
+     * Debug focus
+     */
+    // document.addEventListener(
+    //     "focusin",
+    //     function () {
+    //         console.log('focused: ', document.activeElement)
+    //     }, true
+    // );
+
+    /**
+     * Eagerly load the following fonts.
+     */
+    if (isFontLoadingAPIAvailable) {
+        loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
+            $html.classList.add(CSS_CLASS.FONTS_LOADED);
+
+            /**
+             * Debug fonts loading
+             */
+            // if (ENV.IS_DEV) {
+            //     console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
+            //     console.group('State of eager fonts:');
+            //     eagerFonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
+            //     console.groupEnd();
+            //     console.group('State of all fonts:');
+            //     document.fonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
+            //     console.groupEnd();
+            // }
+        });
+    }
+}
+
+////////////////
+// Global events
+////////////////
+function bindEvents() {
+
+    // Resize event
+    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
+    window.addEventListener(
+        "resize",
+        debounce(() => {
+            window.dispatchEvent(resizeEndEvent)
+        }, 200, false)
+    )
+    window.addEventListener(
+        "resize",
+        onResize
+    )
+}
+
+function onResize() {
+    setViewportSizes()
+}
+
+function setViewportSizes() {
+
+    // Document styles
+    const documentStyles = document.documentElement.style;
+
+    // Viewport width
+    const vw = document.body.clientWidth * 0.01;
+    documentStyles.setProperty('--vw', `${vw}px`);
+
+    // Return if browser supports vh, svh, dvh, & lvh
+    if (ENV.SUPPORTS_VH) {
+        return
+    }
+
+    // Viewport height
+    const svh = document.documentElement.clientHeight * 0.01;
+    documentStyles.setProperty('--svh', `${svh}px`);
+
+    const dvh = window.innerHeight * 0.01;
+    documentStyles.setProperty('--dvh', `${dvh}px`);
+
+    if (document.body) {
+        const fixed = document.createElement('div');
+        fixed.style.width = '1px';
+        fixed.style.height = '100vh';
+        fixed.style.position = 'fixed';
+        fixed.style.left = '0';
+        fixed.style.top = '0';
+        fixed.style.bottom = '0';
+        fixed.style.visibility = 'hidden';
+
+        document.body.appendChild(fixed);
+
+        var fixedHeight = fixed.clientHeight;
+
+        fixed.remove();
+
+        const lvh = fixedHeight * 0.01;
+
+        documentStyles.setProperty('--lvh', `${lvh}px`);
+    }
+}
+
+////////////////
+// Execute
+////////////////
+window.addEventListener('load', () => {
+    const $style = document.getElementById('main-css');
+
+    if ($style) {
+        if ($style.isLoaded) {
+            init();
+        } else {
+            $style.addEventListener('load', init);
+        }
+    } else {
+        console.warn('The "main-css" stylesheet not found');
+    }
+});

_assets/scripts/config.js

@@ -21,6 +21,15 @@ const ENV = Object.freeze({
     // Device
     IS_MOBILE,
     IS_DESKTOP: !IS_MOBILE,
+
+    // Supports
+    SUPPORTS_VH: (
+        'CSS' in window
+        && 'supports' in window.CSS
+        && window.CSS.supports('height: 100svh')
+        && window.CSS.supports('height: 100dvh')
+        && window.CSS.supports('height: 100lvh')
+    )
 })
 
 // Main CSS classes used within the project

_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/_heading.scss

@@ -0,0 +1,79 @@
+// ==========================================================================
+// 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 {
+    @include heading;
+
+    &.-h1 {
+        @include heading-h1;
+    }
+    &.-h2 {
+        @include heading-h2;
+    }
+    &.-h3 {
+        @include heading-h3;
+    }
+    &.-h4 {
+        @include heading-h4;
+    }
+    &.-h5 {
+        @include heading-h5;
+    }
+    &.-h6 {
+        @include heading-h6;
+    }
+}

_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/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;
+    }
+}

_assets/styles/elements/_document.scss

@@ -20,34 +20,26 @@ html {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
-    @media (max-width: $to-small) {
+    @media (max-width: $to-sm) {
         font-size: $font-size - 2px;
     }
 
-    @media (min-width: $from-small) and (max-width: $to-medium) {
-        font-size: $font-size - 2px;
-    }
-
-    @media (min-width: $from-medium) and (max-width: $to-large) {
+    @media (min-width: $from-sm) and (max-width: $to-lg) {
         font-size: $font-size - 1px;
     }
 
-    @media (min-width: $from-large) and (max-width: $to-huge) {
-        font-size: $font-size; // [1]
+    @media (min-width: $from-lg) and (max-width: $to-2xl) {
+        font-size: $font-size;
     }
 
-    @media (min-width: $from-huge) and (max-width: $to-gigantic) {
+    @media (min-width: $from-2xl) and (max-width: $to-3xl) {
         font-size: $font-size + 1px;
     }
 
-    @media (min-width: $from-gigantic) and (max-width: $to-colossal) {
+    @media (min-width: $from-3xl) {
         font-size: $font-size + 2px;
     }
 
-    @media (min-width: $from-colossal) {
-        font-size: $font-size + 4px;
-    }
-
     &.is-loading {
         cursor: wait;
     }

_assets/styles/elements/_normalize.scss

@@ -0,0 +1,124 @@
+// ==========================================================================
+// Elements / Normalize
+// ==========================================================================
+
+// Modern CSS Normalize
+// Based on the reset by Andy.set with some tweaks.
+// Original by Andy.set: https://piccalil.li/blog/a-more-modern-css-reset/
+// Review by Chris collier: https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
+
+
+// Box sizing rules
+*,
+*:after,
+*:before {
+    box-sizing: border-box;
+}
+
+// Prevent font size inflation
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+// Remove default margin in favour of better control in authored CSS
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dl,
+dd,
+figure,
+blockquote {
+    margin-block: unset;
+}
+
+// Remove list styles on ul, ol elements with a class, which suggests default styling will be removed
+ul[class],
+ol[class] {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+// Set core defaults
+html {
+    line-height: 1.5;
+}
+
+body {
+    margin: unset;
+}
+
+// Set shorter line heights on headings and interactive elements
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+input,
+label,
+button {
+    line-height: 1.1;
+}
+
+// Balance text wrapping on headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
+}
+
+// Remove a elements default styles if they have a class
+a[class] {
+    color: inherit;
+    text-decoration: none;
+}
+
+// Make assets easier to work with
+img,
+svg,
+canvas,
+picture {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+select,
+textarea {
+    font: inherit;
+}
+
+// Make sure textareas without a rows attribute are not tiny
+textarea:not([rows]) {
+    min-height: 10em;
+}
+
+// Anything that has been anchored to should have extra scroll margin
+:target {
+    scroll-margin-block: 1rlh;
+}
+
+// Reduced mootion preference
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *:after,
+    *:before {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}

_assets/styles/main.scss

@@ -1,9 +1,12 @@
 // ==========================================================================
 // Main
 // ==========================================================================
+
+// Modules
+// ==========================================================================
+
 @use "sass:math";
 
-// ==========================================================================
 // Tools
 // ==========================================================================
 
@@ -17,32 +20,24 @@
 // Settings
 // ==========================================================================
 
+@import "settings/config";
 @import "settings/config.breakpoints";
 @import "settings/config.colors";
 @import "settings/config.eases";
 @import "settings/config.fonts";
-@import "settings/config.spacers";
-@import "settings/config.timings";
+@import "settings/config.spacings";
+@import "settings/config.speeds";
 @import "settings/config.zindexes";
-@import "settings/config";
 @import "settings/config.variables";
 
-// Generic
-// ==========================================================================
-
-@import "node_modules/normalize.css/normalize";
-@import "generic/generic";
-@import "generic/media";
-@import "generic/form";
-@import "generic/button";
-
 // Vendors
 // ==========================================================================
-@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
+@import "../../node_modules/locomotive-scroll/dist/locomotive-scroll";
 
 // Elements
 // ==========================================================================
 
+@import "elements/normalize";
 @import "elements/document";
 
 // Objects
@@ -59,6 +54,7 @@
 // ==========================================================================
 
 @import "components/heading";
+@import "components/text";
 @import "components/button";
 @import "components/form";
 

_assets/styles/objects/_grid.scss

@@ -45,8 +45,8 @@
         grid-template-columns: repeat(4, 1fr);
     }
 
-    &.-col-#{$base-column-nb}\@from-medium {
-        @media (min-width: $from-medium) {
+    &.-col-#{$base-column-nb}\@from-md {
+        @media (min-width: $from-md) {
             grid-template-columns: repeat(#{$base-column-nb}, 1fr);
         }
     }

_assets/styles/objects/_icons.scss

@@ -48,7 +48,7 @@
 // // Logo
 // .svg-logo {
 //     --icon-width: #{rem(100px)};
-//     --icon-ratio: 20/30; // width/height based on svg viewBox
+//     --icon-ratio: math.div(20, 30); // width/height based on svg viewBox
 
 //     // Sizes
 //     .o-icon.-big & {

_assets/styles/settings/_config.breakpoints.scss

@@ -6,15 +6,16 @@
 // ==========================================================================
 
 $breakpoints: (
-    "tiny":     500px,
-    "small":    700px,
-    "medium":   1000px,
-    "large":    1200px,
-    "big":      1400px,
-    "huge":     1600px,
-    "enormous": 1800px,
-    "gigantic": 2000px,
-    "colossal": 2400px
+    "2xs": 340px,
+    "xs":  500px,
+    "sm":  700px,
+    "md":  1000px,
+    "lg":  1200px,
+    "xl":  1400px,
+    "2xl": 1600px,
+    "3xl": 1800px,
+    "4xl": 2000px,
+    "5xl": 2400px
 );
 
 // Functions
@@ -75,21 +76,17 @@ $breakpoints: (
 // Legacy
 // ==========================================================================
 
-$from-tiny:     map-get($breakpoints, "tiny")           !default;
-$to-tiny:       map-get($breakpoints, "tiny") - 1       !default;
-$from-small:    map-get($breakpoints, "small")          !default;
-$to-small:      map-get($breakpoints, "small") - 1      !default;
-$from-medium:   map-get($breakpoints, "medium")         !default;
-$to-medium:     map-get($breakpoints, "medium") - 1     !default;
-$from-large:    map-get($breakpoints, "large")          !default;
-$to-large:      map-get($breakpoints, "large") - 1      !default;
-$from-big:      map-get($breakpoints, "big")            !default;
-$to-big:        map-get($breakpoints, "big") - 1        !default;
-$from-huge:     map-get($breakpoints, "huge")           !default;
-$to-huge:       map-get($breakpoints, "huge") - 1       !default;
-$from-enormous: map-get($breakpoints, "enormous")       !default;
-$to-enormous:   map-get($breakpoints, "enormous") - 1   !default;
-$from-gigantic: map-get($breakpoints, "gigantic")       !default;
-$to-gigantic:   map-get($breakpoints, "gigantic") - 1   !default;
-$from-colossal: map-get($breakpoints, "colossal")       !default;
-$to-colossal:   map-get($breakpoints, "colossal") - 1   !default;
+$from-xs:  map-get($breakpoints, "xs")      !default;
+$to-xs:    map-get($breakpoints, "xs") - 1  !default;
+$from-sm:  map-get($breakpoints, "sm")      !default;
+$to-sm:    map-get($breakpoints, "sm") - 1  !default;
+$from-md:  map-get($breakpoints, "md")      !default;
+$to-md:    map-get($breakpoints, "md") - 1  !default;
+$from-lg:  map-get($breakpoints, "lg")      !default;
+$to-lg:    map-get($breakpoints, "lg") - 1  !default;
+$from-xl:  map-get($breakpoints, "xl")      !default;
+$to-xl:    map-get($breakpoints, "xl") - 1  !default;
+$from-2xl: map-get($breakpoints, "2xl")     !default;
+$to-2xl:   map-get($breakpoints, "2xl") - 1 !default;
+$from-3xl: map-get($breakpoints, "3xl")     !default;
+$to-3xl:   map-get($breakpoints, "3xl") - 1 !default;

_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;

_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;
@@ -32,12 +32,13 @@ $easing:    ease("power2.out");
 
 // Spacing Units
 // =============================================================================
-$unit:       60px;
-$unit-small: 20px;
+$unit:        60px;
+$unit-small:  20px;
+$vw-viewport: 1440;
 
 // Container
 // ==========================================================================
-$padding:         $unit;
+$padding:     $unit;
 
 // Grid
 // ==========================================================================

_assets/styles/settings/_config.spacings.scss

@@ -0,0 +1,69 @@
+// ==========================================================================
+// Settings / Config / Spacings
+// ==========================================================================
+
+:root {
+    --spacing-2xs-mobile: 6;
+    --spacing-2xs-desktop: 10;
+
+    --spacing-xs-mobile: 12;
+    --spacing-xs-desktop: 16;
+
+    --spacing-sm-mobile: 22;
+    --spacing-sm-desktop: 32;
+
+    --spacing-md-mobile: 32;
+    --spacing-md-desktop: 56;
+
+    --spacing-lg-mobile: 48;
+    --spacing-lg-desktop: 96;
+
+    --spacing-xl-mobile: 64;
+    --spacing-xl-desktop: 128;
+
+    --spacing-2xl-mobile: 88;
+    --spacing-2xl-desktop: 176;
+
+    --spacing-3xl-mobile: 122;
+    --spacing-3xl-desktop: 224;
+}
+
+// Spacings
+// ==========================================================================
+
+$spacings: (
+    'gutter':   var(--grid-gutter),
+    '2xs':      #{size-clamp('2xs')},
+    'xs':       #{size-clamp('xs')},
+    'sm':       #{size-clamp('sm')},
+    'md':       #{size-clamp('md')},
+    'lg':       #{size-clamp('lg')},
+    'xl':       #{size-clamp('xl')},
+    '2xl':      #{size-clamp('2xl')},
+    '3xl':      #{size-clamp('3xl')},
+);
+
+// Function
+// ==========================================================================
+
+// Returns spacing.
+//
+// ```scss
+// .c-box {
+//     margin-top: spacing(gutter);
+// }
+// ```
+//
+// @param  {string} $key - The spacing key in $spacings.
+// @param  {number} $multiplier - The multiplier of the spacing value.
+// @return {size}
+
+@function spacing($spacing: 'sm', $multiplier: 1) {
+    @if not map-has-key($spacings, $spacing) {
+        @error "Unknown master spacing: #{$spacing}";
+    }
+
+    $index: map-get($spacings, $spacing);
+
+    @return calc(#{$index} * #{$multiplier});
+}

_assets/styles/settings/_config.speeds.scss

@@ -1,23 +1,20 @@
 // ==========================================================================
-// Settings / Config / Timings
+// Settings / Config / Speeds
 // ==========================================================================
 
-// Timings
+// Speeds
 // ==========================================================================
 
-$timings: (
+$speeds: (
     fastest:    0.1s,
     faster:     0.15s,
     fast:       0.25s,
-    normal:     0.5s,
-    slow:       0.75s,
-    slower:     1s,
-    slowest:    2s,
+    normal:     0.3s,
+    slow:       0.5s,
+    slower:     0.75s,
+    slowest:    1s,
 );
 
-// Default timing for t()
-$timing-default: "normal" !default;
-
 // Function
 // ==========================================================================
 
@@ -25,17 +22,17 @@ $timing-default: "normal" !default;
 //
 // ```scss
 // .c-box {
-//     transition-duration: t(slow);
+//     transition-duration: speed(slow);
 // }
 // ```
 //
-// @param  {string} $key - The timing key in $timings.
+// @param  {string} $key - The speed key in $speeds.
 // @return {duration}
 
-@function t($key: $timing-default) {
-    @if not map-has-key($timings, $key) {
-        @error "Unknown '#{$key}' in $timings.";
+@function speed($key: "normal") {
+    @if not map-has-key($speeds, $key) {
+        @error "Unknown '#{$key}' in $speeds.";
     }
 
-    @return map-get($timings, $key);
+    @return map-get($speeds, $key);
 }

_assets/styles/settings/_config.variables.scss

@@ -12,20 +12,7 @@
     // 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-small) {
+    @media (min-width: $from-sm) {
         --grid-columns:     #{$base-column-nb};
         --grid-gutter:      #{rem(16px)};
         --grid-margin:      #{rem(20px)};

_assets/styles/tools/_functions.scss

@@ -48,17 +48,6 @@
     @return math.div($size, $base) * 1rem;
 }
 
-// Converts a number to a percentage.
-//
-// @alias  percentage()
-// @link   http://sassdoc.com/annotations/#alias
-// @param  {Number} $number - The value to convert.
-// @return {Number} A percentage.
-
-@function span($number) {
-    @return percentage($number);
-}
-
 // Checks if a list contains a value(s).
 //
 // @link   https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/validators/_contains.scss
@@ -125,25 +114,53 @@ $context: 'frontend' !default;
 // }
 // ```
 //
-// @param  {number} $number - The percentage spacer
-// @param  {number} $inset  - The grid gutter inset
+// @param  {number} $percentage - The percentage spacer
+// @param  {number} $inset      - The grid gutter inset
 // @return {function<number>}
 @function grid-space($percentage, $inset: 0) {
-    @return calc(#{$percentage} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
+    @return calc(#{$percentage} * (#{vw(100)} - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
 }
 
-// Returns calculation of a percentage of the viewport height.
+// Returns calculation of a percentage of the viewport small height.
 //
 // ```scss
 // .c-box {
-//     height: vh(100);
+//     height: svh(100);
 // }
 // ```
 //
 // @param  {number} $number - The percentage number
-// @return {function<number>} in vh
-@function vh($number) {
-    @return calc(#{$number} * var(--vh, 1vh));
+// @return {function<number>} in svh
+@function svh($number) {
+    @return calc(#{$number} * var(--svh, 1svh));
+}
+
+// Returns calculation of a percentage of the viewport large height.
+//
+// ```scss
+// .c-box {
+//     height: lvh(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in lvh
+@function lvh($number) {
+    @return calc(#{$number} * var(--lvh, 1lvh));
+}
+
+// Returns calculation of a percentage of the viewport dynamic height.
+//
+// ```scss
+// .c-box {
+//     height: dvh(100);
+// }
+// ```
+//
+// @param  {number} $number - The percentage number
+// @return {function<number>} in dvh
+@function dvh($number) {
+    @return calc(#{$number} * var(--dvh, 1dvh));
 }
 
 // Returns calculation of a percentage of the viewport width.
@@ -161,16 +178,29 @@ $context: 'frontend' !default;
     @return calc(#{$number} * var(--vw, 1vw));
 }
 
+@function clamp-with-max($min, $size, $max) {
+    $vw-context: $vw-viewport * 0.01;
+    @return clamp(#{$min}, calc(#{$size} / #{$vw-context} * 1vw), #{$max});
+}
+
+@function size-clamp($size) {
+    @return clamp-with-max(
+        calc(#{rem(1px)} * var(--spacing-#{$size}-mobile)),
+        var(--spacing-#{$size}-desktop),
+        calc(#{rem(1px)} * var(--spacing-#{$size}-desktop))
+    );
+}
+
 // Returns clamp of calculated preferred responsive font size
 // within a font size and breakpoint range.
 //
 // ```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-big);
+//     font-size: responsive-value(20px, 40px, $from-xl);
 // }
 // ```
 //
@@ -178,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);
 }

_assets/styles/utilities/_spacing.scss

@@ -8,12 +8,11 @@
 ///
 /// @example
 ///   .u-margin-top {}
-///   .u-padding-left-large {}
-///   .u-margin-right-small {}
+///   .u-margin-top-xs {}
+///   .u-padding-left-lg {}
+///   .u-margin-right-sm {}
 ///   .u-padding {}
 ///   .u-padding-right-none {}
-///   .u-padding-horizontal {}
-///   .u-padding-vertical-small {}
 ///
 /// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss
 ////
@@ -35,7 +34,7 @@ $spacing-properties: (
     'margin':  'margin',
 ) !default;
 
-$spacing-sizes: join($spacers, (
+$spacing-sizes: join($spacings, (
     null:       var(--grid-gutter),
     'none':    0
 ));
@@ -51,8 +50,8 @@ $spacing-sizes: join($spacers, (
                 // Base class
                 $base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
 
-                // Spacer without media query
-                @if $breakpoint == "tiny" {
+                // Spacing without media query
+                @if $breakpoint == "xs" {
                     #{$base-class} {
                         @each $direction in $directions {
                             #{$property}#{$direction}: $size !important;
@@ -60,7 +59,7 @@ $spacing-sizes: join($spacers, (
                     }
                 }
 
-                // Spacer min-width breakpoints `@from-*`
+                // Spacing min-width breakpoints `@from-*`
                 #{$base-class}\@from-#{$breakpoint} {
                     @media #{mq-min($breakpoint)} {
                         @each $direction in $directions {
@@ -69,7 +68,7 @@ $spacing-sizes: join($spacers, (
                     }
                 }
 
-                // Spacer max-width breakpoints @to-*`
+                // Spacing max-width breakpoints @to-*`
                 #{$base-class}\@to-#{$breakpoint} {
                     @media #{mq-max($breakpoint)} {
                         @each $direction in $directions {

_assets/styles/utilities/_states.scss

@@ -46,14 +46,14 @@
     }
 }
 
-// .is-hidden\@to-large {
-//     @media (max-width: $to-large) {
+// .is-hidden\@to-lg {
+//     @media (max-width: $to-lg) {
 //         display: none;
 //     }
 // }
 //
-// .is-hidden\@from-large {
-//     @media (min-width: $from-large) {
+// .is-hidden\@from-lg {
+//     @media (min-width: $from-lg) {
 //         display: none;
 //     }
 // }

_assets/styles/utilities/_widths.scss

@@ -21,8 +21,8 @@ $widths-fractions: 1 2 3 4 5 !default;
 
 @include widths($widths-fractions);
 
-.u-1\/2\@from-small {
-    @media (min-width: $from-small) {
-        width: span(1/2);
+.u-1\/2\@from-sm {
+    @media (min-width: $from-sm) {
+        width: 50%;
     }
 }

assets.json

@@ -1,3 +0,0 @@
-{
-    "version": 1705435510121
-}

assets/scripts/app.js

@@ -1,65 +0,0 @@
-import modular from 'modujs';
-import * as modules from './modules';
-import globals from './globals';
-import { debounce } from './utils/tickers'
-import { $html } from './utils/dom';
-import { ENV, FONT, CUSTOM_EVENT, CSS_CLASS } from './config'
-import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts';
-
-const app = new modular({
-    modules: modules,
-});
-
-window.addEventListener('load', (event) => {
-    const $style = document.getElementById('main-css');
-
-    if ($style) {
-        if ($style.isLoaded) {
-            init();
-        } else {
-            $style.addEventListener('load', (event) => {
-                init();
-            });
-        }
-    } else {
-        console.warn('The "main-css" stylesheet not found');
-    }
-});
-
-function init() {
-    globals();
-
-    app.init(app);
-
-    $html.classList.add(CSS_CLASS.LOADED);
-    $html.classList.add(CSS_CLASS.READY);
-    $html.classList.remove(CSS_CLASS.LOADING);
-
-    // Bind window resize event with default vars
-    const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
-    window.addEventListener('resize', () => {
-        $html.style.setProperty('--vw', `${document.documentElement.clientWidth * 0.01}px`)
-        debounce(() => {
-            window.dispatchEvent(resizeEndEvent)
-        }, 200, false)
-    })
-
-    /**
-     * Eagerly load the following fonts.
-     */
-    if (isFontLoadingAPIAvailable) {
-        loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
-            $html.classList.add(CSS_CLASS.FONTS_LOADED);
-
-            if (ENV.IS_DEV) {
-                console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
-                console.group('State of eager fonts:')
-                eagerFonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))
-                console.groupEnd()
-                console.group('State of all fonts:')
-                document.fonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))
-                console.groupEnd()
-            }
-        });
-    }
-}

assets/styles/components/_heading.scss

@@ -1,31 +0,0 @@
-// ==========================================================================
-// Components / Headings
-// ==========================================================================
-
-.c-heading {
-    margin-bottom: rem(30px);
-
-    &.-h1 {
-        font-size: var(--font-size-h1);
-    }
-
-    &.-h2 {
-        font-size: var(--font-size-h2);
-    }
-
-    &.-h3 {
-        font-size: var(--font-size-h3);
-    }
-
-    &.-h4 {
-        font-size: var(--font-size-h4);
-    }
-
-    &.-h5 {
-        font-size: var(--font-size-h5);
-    }
-
-    &.-h6 {
-        font-size: var(--font-size-h6);
-    }
-}

assets/styles/generic/_button.scss

@@ -1,34 +0,0 @@
-// ==========================================================================
-// Generic / Buttons
-// ==========================================================================
-
-// 1. Allow us to style box model properties.
-// 2. Fixes odd inner spacing in IE7.
-// 3. Reset/normalize some styles.
-// 4. Line different sized buttons up a little nicer.
-// 5. Make buttons inherit font styles (often necessary when styling `input`s as buttons).
-// 6. Force all button-styled elements to appear clickable.
-
-button,
-.c-button {
-    @include u-hocus {
-        text-decoration: none;
-    }
-
-    display: inline-block; // [1]
-    overflow: visible; // [2]
-    margin: 0; // [3]
-    padding: 0;
-    outline: 0;
-    border: 0;
-    background: none transparent;
-    color: inherit;
-    vertical-align: middle; // [4]
-    text-align: center; // [3]
-    text-decoration: none;
-    text-transform: none;
-    font: inherit; // [5]
-    line-height: normal;
-    cursor: pointer; // [6]
-    user-select: none;
-}

assets/styles/generic/_form.scss

@@ -1,44 +0,0 @@
-// ==========================================================================
-// Generic / Forms
-// ==========================================================================
-
-input,
-select,
-textarea {
-    display: block;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    outline: 0;
-    border: 0;
-    border-radius: 0;
-    background: none transparent;
-    color: inherit;
-    font: inherit;
-    line-height: normal;
-    appearance: none;
-}
-
-select {
-    text-transform: none;
-
-    &::-ms-expand {
-        display: none;
-    }
-
-    &::-ms-value {
-        background: none;
-        color: inherit;
-    }
-
-    // // Remove Firefox :focus dotted outline, breaks color inherit
-    // // &:-moz-focusring {
-    // //     color: transparent;
-    // //     text-shadow: 0 0 0 #000000; // Text :focus color
-    // // }
-}
-
-textarea {
-    overflow: auto;
-    resize: vertical;
-}

assets/styles/generic/_generic.scss

@@ -1,87 +0,0 @@
-// ==========================================================================
-// Generic
-// ==========================================================================
-
-html {
-    box-sizing: border-box;
-}
-
-// Add the correct display in IE 10-.
-// 1. Add the correct display in IE.
-
-template, // [1]
-[hidden] {
-    display: none;
-}
-
-*,
-:before,
-:after {
-    box-sizing: inherit;
-}
-
-address {
-    font-style: inherit;
-}
-
-dfn,
-cite,
-em,
-i {
-    font-style: italic;
-}
-
-b,
-strong {
-    font-weight: $font-weight-bold;
-}
-
-a {
-    text-decoration: none;
-
-    svg {
-        pointer-events: none;
-    }
-}
-
-ul,
-ol {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-p,
-figure {
-    margin: 0;
-    padding: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-}
-
-// 1. Single taps should be dispatched immediately on clickable elements
-
-a, area, button, input, label, select, textarea, [tabindex] {
-    -ms-touch-action: manipulation; // [1]
-    touch-action: manipulation;
-}
-
-[hreflang] > abbr[title] {
-    text-decoration: none;
-}
-
-table {
-    border-spacing: 0;
-    border-collapse: collapse;
-}
-
-hr {
-    display: block;
-    margin: 1em 0;
-    padding: 0;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #CCCCCC;
-}

assets/styles/generic/_media.scss

@@ -1,52 +0,0 @@
-// ==========================================================================
-// Generic / Media
-// ==========================================================================
-
-// 1. Setting `vertical-align` removes the whitespace that appears under `img`
-//    elements when they are dropped into a page as-is. Safer alternative to
-//    using `display: block;`.
-
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-    vertical-align: middle; // [1]
-}
-
-// Add the correct display in iOS 4-7.
-
-audio:not([controls]) {
-    display: none;
-    height: 0;
-}
-
-// 2. Fluid media for responsive purposes.
-
-img,
-svg {
-    max-width: 100%; // [2]
-    height: auto;
-
-    // 4. If a `width` and/or `height` attribute have been explicitly defined,
-    //    let’s not make the image fluid.
-
-    &[width], // [4]
-    &[height] {
-        // [4]
-        max-width: none;
-    }
-}
-
-// 4. Offset `alt` text from surrounding copy.
-
-img {
-    font-style: italic; // [4]
-}
-
-// 5. SVG elements should fallback to their surrounding text color.
-
-svg {
-    fill: currentColor; // [5]
-}

assets/styles/settings/_config.spacers.scss

@@ -1,40 +0,0 @@
-// ==========================================================================
-// Settings / Config / Spacers
-// ==========================================================================
-
-// Spacers
-// ==========================================================================
-
-$spacers: (
-    'gutter':       var(--grid-gutter),
-    'xs':           #{vh(5)},
-    'sm':           #{vh(7.5)},
-    'md':           #{vh(10)},
-    'lg':           #{vh(12.5)},
-    'xl':           #{vh(15)},
-);
-
-// Function
-// ==========================================================================
-
-// Returns spacer.
-//
-// ```scss
-// .c-box {
-//     margin-top: spacer(gutter);
-// }
-// ```
-//
-// @param  {string} $key - The spacer key in $spacers.
-// @param  {number} $multiplier - The multiplier of the spacer value.
-// @return {size}
-
-@function spacer($spacer: $spacer-default, $multiplier: 1) {
-    @if not map-has-key($spacers, $spacer) {
-        @error "Unknown master spacer: #{$spacer}";
-    }
-
-    $index: map-get($spacers, $spacer);
-
-    @return calc(#{$index} * #{$multiplier});
-}

build/build.js

@@ -1,11 +0,0 @@
-import concatFiles from './tasks/concats.js';
-import compileScripts from './tasks/scripts.js';
-import compileStyles from './tasks/styles.js';
-import compileSVGs from './tasks/svgs.js';
-import bumpVersions from './tasks/versions.js';
-
-concatFiles();
-compileScripts();
-compileStyles();
-compileSVGs();
-bumpVersions();

build/helpers/config.js

@@ -1,25 +0,0 @@
-/**
- * @file Provides simple user configuration options.
- */
-
-import loconfig from '../../loconfig.json' assert { type: 'json' };
-import { merge } from '../utils/index.js';
-
-let usrconfig;
-
-try {
-    usrconfig = await import('../../loconfig.local.json', {
-        assert: { type: 'json' },
-    });
-    usrconfig = usrconfig.default;
-
-    merge(loconfig, usrconfig);
-} catch (err) {
-    // do nothing
-}
-
-export default loconfig;
-
-export {
-    loconfig,
-};

build/helpers/glob.js

@@ -1,162 +0,0 @@
-/**
- * @file Retrieve the first available glob library.
- *
- * Note that options vary between libraries.
- *
- * Candidates:
- *
- * - {@link https://npmjs.com/package/tiny-glob tiny-glob} [1][5][6]
- * - {@link https://npmjs.com/package/globby globby} [2][5]
- * - {@link https://npmjs.com/package/fast-glob fast-glob} [3]
- * - {@link https://npmjs.com/package/glob glob} [1][4][5]
- *
- * Notes:
- *
- * - [1] The library's function accepts only a single pattern.
- * - [2] The library's function accepts only an array of patterns.
- * - [3] The library's function accepts either a single pattern
- *       or an array of patterns.
- * - [4] The library's function does not return a Promise but will be
- *       wrapped in a function that does return a Promise.
- * - [5] The library's function will be wrapped in a function that
- *       supports a single pattern and an array of patterns.
- * - [6] The library's function returns files and directories but will be
- *       preconfigured to return only files.
- */
-
-import { promisify } from 'node:util';
-
-/**
- * @callback GlobFn
- *
- * @param {string|string[]} patterns - A string pattern
- *     or an array of string patterns.
- * @param {object}          options
- *
- * @returns {Promise<string[]>}
- */
-
-/**
- * @typedef {object} GlobOptions
- */
-
-/**
- * @type {GlobFn|undefined} The discovered glob function.
- */
-let glob;
-
-/**
- * @type {string[]} A list of packages to attempt import.
- */
-const candidates = [
-    'tiny-glob',
-    'globby',
-    'fast-glob',
-    'glob',
-];
-
-try {
-    glob = await importGlob();
-} catch (err) {
-    // do nothing
-}
-
-/**
- * @type {boolean} Whether a glob function was discovered (TRUE) or not (FALSE).
- */
-const supportsGlob = (typeof glob === 'function');
-
-/**
- * Imports the first available glob function.
- *
- * @throws {TypeError} If no glob library was found.
- *
- * @returns {GlobFn}
- */
-async function importGlob() {
-    for (let name of candidates) {
-        try {
-            let globModule = await import(name);
-
-            if (typeof globModule.default !== 'function') {
-                throw new TypeError(`Expected ${name} to be a function`);
-            }
-
-            /**
-             * Wrap the function to ensure
-             * a common pattern.
-             */
-            switch (name) {
-                case 'tiny-glob':
-                    /** [1][5] */
-                    return createArrayableGlob(
-                        /** [6] */
-                        createPresetGlob(globModule.default, {
-                            filesOnly: true
-                        })
-                    );
-
-                case 'globby':
-                    /** [2][5] - If `patterns` is a string, wraps into an array. */
-                    return (patterns, options) => globModule.default([].concat(patterns), options);
-
-                case 'glob':
-                    /** [1][5] */
-                    return createArrayableGlob(
-                        /** [4] */
-                        promisify(globModule.default)
-                    );
-
-                default:
-                    return globModule.default;
-            }
-        } catch (err) {
-            // swallow this error; skip to the next candidate.
-        }
-    }
-
-    throw new TypeError(
-        `No glob library was found, expected one of: ${candidates.join(', ')}`
-    );
-}
-
-/**
- * Creates a wrapper function for the glob function
- * to provide support for arrays of patterns.
- *
- * @param {function} globFn - The glob function.
- *
- * @returns {GlobFn}
- */
-function createArrayableGlob(globFn) {
-    return (patterns, options) => {
-        /** [2] If `patterns` is a string, wraps into an array. */
-        patterns = [].concat(patterns);
-
-        const globs = patterns.map((pattern) => globFn(pattern, options));
-
-        return Promise.all(globs).then((files) => {
-            return [].concat.apply([], files);
-        });
-    };
-}
-
-/**
- * Creates a wrapper function for the glob function
- * to define new default options.
- *
- * @param {function}    globFn  - The glob function.
- * @param {GlobOptions} presets - The glob function options to preset.
- *
- * @returns {GlobFn}
- */
-function createPresetGlob(globFn, presets) {
-    return (patterns, options) => globFn(patterns, Object.assign({}, presets, options));
-}
-
-export default glob;
-
-export {
-    glob,
-    supportsGlob,
-};

build/helpers/message.js

@@ -1,61 +0,0 @@
-/**
- * @file Provides a decorator for console messages.
- */
-
-import kleur from 'kleur';
-
-/**
- * Outputs a message to the console.
- *
- * @param {string} text      - The message to output.
- * @param {string} [type]    - The type of message.
- * @param {string} [timerID] - The console time label to output.
- */
-function message(text, type, timerID) {
-    switch (type) {
-        case 'success':
-            console.log('✅ ', kleur.bgGreen().black(text));
-            break;
-
-        case 'chore':
-            console.log('🧹 ', kleur.bgGreen().black(text));
-            break;
-
-        case 'notice':
-            console.log('ℹ️  ', kleur.bgBlue().black(text));
-            break;
-
-        case 'error':
-            console.log('❌ ', kleur.bgRed().black(text));
-            break;
-
-        case 'warning':
-            console.log('⚠️  ', kleur.bgYellow().black(text));
-            break;
-
-        case 'waiting':
-            console.log('⏱ ', kleur.blue().italic(text));
-
-            if (timerID != null) {
-                console.timeLog(timerID);
-                timerID = null;
-            }
-            break;
-
-        default:
-            console.log(text);
-            break;
-    }
-
-    if (timerID != null) {
-        console.timeEnd(timerID);
-    }
-
-    console.log('');
-}
-
-export default message;
-
-export {
-    message,
-};

build/helpers/notification.js

@@ -1,51 +0,0 @@
-/**
- * @file Provides a decorator for cross-platform notification.
- */
-
-import notifier from 'node-notifier';
-
-/**
- * Sends a cross-platform native notification.
- *
- * Wraps around node-notifier to assign default values.
- *
- * @param  {string|object} options         - The notification options or a message.
- * @param  {string}        options.title   - The notification title.
- * @param  {string}        options.message - The notification message.
- * @param  {string}        options.icon    - The notification icon.
- * @param  {function}      callback        - The notification callback.
- * @return {void}
- */
-function notification(options, callback) {
-    if (typeof options === 'string') {
-        options = {
-            message: options
-        };
-    } else if (!options.title && !options.message) {
-        throw new TypeError(
-            'Notification expects at least a \'message\' parameter'
-        );
-    }
-
-    if (typeof options.icon === 'undefined') {
-        options.icon = 'https://user-images.githubusercontent.com/4596862/54868065-c2aea200-4d5e-11e9-9ce3-e0013c15f48c.png';
-    }
-
-    // If notification does not use a callback,
-    // shorten the wait before timing out.
-    if (typeof callback === 'undefined') {
-        if (typeof options.wait === 'undefined') {
-            if (typeof options.timeout === 'undefined') {
-                options.timeout = 5;
-            }
-        }
-    }
-
-    notifier.notify(options, callback);
-}
-
-export default notification;
-
-export {
-    notification,
-};

build/helpers/postcss.js

@@ -1,139 +0,0 @@
-/**
- * @file If available, returns the PostCSS Processor creator and
- * any the Autoprefixer PostCSS plugin.
- */
-
-/**
- * @typedef {import('autoprefixer').autoprefixer.Options} AutoprefixerOptions
- */
-
-/**
- * @typedef {import('postcss').AcceptedPlugin} AcceptedPlugin
- */
-
-/**
- * @typedef {import('postcss').Postcss} Postcss
- */
-
-/**
- * @typedef {import('postcss').ProcessOptions} ProcessOptions
- */
-
-/**
- * @typedef {import('postcss').Processor} Processor
- */
-
-/**
- * @typedef {AcceptedPlugin[]} PluginList
- */
-
-/**
- * @typedef {object<string, AcceptedPlugin>} PluginMap
- */
-
-/**
- * @typedef {PluginList|PluginMap} PluginCollection
- */
-
-/**
- * @typedef {object} PostCSSOptions
- *
- * @property {ProcessOptions}      processor    - The `Processor#process()` options.
- * @property {AutoprefixerOptions} autoprefixer - The `autoprefixer()` options.
- */
-
-/**
- * @type {Postcss|undefined}        postcss      - The discovered PostCSS function.
- * @type {AcceptedPlugin|undefined} autoprefixer - The discovered Autoprefixer function.
- */
-let postcss, autoprefixer;
-
-try {
-    postcss = await import('postcss');
-    postcss = postcss.default;
-
-    autoprefixer = await import('autoprefixer');
-    autoprefixer = autoprefixer.default;
-} catch (err) {
-    // do nothing
-}
-
-/**
- * @type {boolean} Whether PostCSS was discovered (TRUE) or not (FALSE).
- */
-const supportsPostCSS = (typeof postcss === 'function');
-
-/**
- * @type {PluginList} A list of supported plugins.
- */
-const pluginsList = [
-    autoprefixer,
-];
-
-/**
- * @type {PluginMap} A map of supported plugins.
- */
-const pluginsMap = {
-    'autoprefixer': autoprefixer,
-};
-
-/**
- * Attempts to create a PostCSS Processor with the given plugins and options.
- *
- * @param {PluginCollection} pluginsListOrMap - A list or map of plugins.
- *     If a map of plugins, the plugin name looks up `options`.
- * @param {PostCSSOptions}   options - The PostCSS wrapper options.
- *
- * @returns {Processor|null}
- */
-function createProcessor(pluginsListOrMap, options)
-{
-    if (!postcss) {
-        return null;
-    }
-
-    const plugins = parsePlugins(pluginsListOrMap, options);
-
-    return postcss(plugins);
-}
-
-/**
- * Parses the PostCSS plugins and options.
- *
- * @param {PluginCollection} pluginsListOrMap - A list or map of plugins.
- *     If a map of plugins, the plugin name looks up `options`.
- * @param {PostCSSOptions}   options - The PostCSS wrapper options.
- *
- * @returns {PluginList}
- */
-function parsePlugins(pluginsListOrMap, options)
-{
-    if (Array.isArray(pluginsListOrMap)) {
-        return pluginsListOrMap;
-    }
-
-    /** @type {PluginList} */
-    const plugins = [];
-
-    for (let [ name, plugin ] of Object.entries(pluginsListOrMap)) {
-        if (name in options) {
-            plugin = plugin[name](options[name]);
-        }
-
-        plugins.push(plugin);
-    }
-
-    return plugins;
-}
-
-export default postcss;
-
-export {
-    autoprefixer,
-    createProcessor,
-    parsePlugins,
-    pluginsList,
-    pluginsMap,
-    postcss,
-    supportsPostCSS,
-};

build/helpers/template.js

@@ -1,105 +0,0 @@
-/**
- * @file Provides simple template tags.
- */
-
-import loconfig from './config.js';
-import {
-    escapeRegExp,
-    flatten
-} from '../utils/index.js';
-
-const templateData = flatten({
-    paths: loconfig.paths
-});
-
-/**
- * Replaces all template tags from a map of keys and values.
- *
- * If replacement pairs contain a mix of substrings, regular expressions,
- * and functions, regular expressions are executed last.
- *
- * @param  {*}      input  - The value being searched and replaced on.
- *     If input is, or contains, a string, tags will be resolved.
- *     If input is, or contains, an object, it is mutated directly.
- *     If input is, or contains, an array, a shallow copy is returned.
- *     Otherwise, the value is left intact.
- * @param  {object} [data] - An object in the form `{ 'from': 'to', … }`.
- * @return {*} Returns the transformed value.
- */
-function resolve(input, data = templateData) {
-    switch (typeof input) {
-        case 'string': {
-            return resolveValue(input, data);
-        }
-
-        case 'object': {
-            if (input == null) {
-                break;
-            }
-
-            if (Array.isArray(input)) {
-                return input.map((value) => resolve(value, data));
-            } else {
-                for (const key in input) {
-                    input[key] = resolve(input[key], data);
-                }
-            }
-        }
-    }
-
-    return input;
-}
-
-/**
- * Replaces all template tags in a string from a map of keys and values.
- *
- * If replacement pairs contain a mix of substrings, regular expressions,
- * and functions, regular expressions are executed last.
- *
- * @param  {string} input  - The string being searched and replaced on.
- * @param  {object} [data] - An object in the form `{ 'from': 'to', … }`.
- * @return {string} Returns the translated string.
- */
-function resolveValue(input, data = templateData) {
-    const tags = [];
-
-    if (data !== templateData) {
-        data = flatten(data);
-    }
-
-    for (let tag in data) {
-        tags.push(escapeRegExp(tag));
-    }
-
-    if (tags.length === 0) {
-        return input;
-    }
-
-    const search = new RegExp('\\{%\\s*(' + tags.join('|') + ')\\s*%\\}', 'g');
-    return input.replace(search, (match, key) => {
-        let value = data[key];
-
-        switch (typeof value) {
-            case 'function':
-                /**
-                 * Retrieve the offset of the matched substring `args[0]`
-                 * and the whole string being examined `args[1]`.
-                 */
-                let args = Array.prototype.slice.call(arguments, -2);
-                return value.call(data, match, args[0], args[1]);
-
-            case 'string':
-            case 'number':
-                return value;
-        }
-
-        return '';
-    });
-}
-
-export default resolve;
-
-export {
-    resolve,
-    resolveValue,
-};

build/tasks/concats.js

@@ -1,144 +0,0 @@
-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 { merge } from '../utils/index.js';
-import concat from 'concat';
-import {
-    basename,
-    normalize,
-} from 'node:path';
-
-/**
- * @const {object} defaultGlobOptions     - The default shared glob options.
- * @const {object} developmentGlobOptions - The predefined glob options for development.
- * @const {object} productionGlobOptions  - The predefined glob options for production.
- */
-export const defaultGlobOptions = {
-};
-export const developmentGlobOptions = Object.assign({}, defaultGlobOptions);
-export const productionGlobOptions  = Object.assign({}, defaultGlobOptions);
-
-/**
- * @typedef  {object} ConcatOptions
- * @property {boolean} removeDuplicates - Removes duplicate paths from
- *     the array of matching files and folders.
- *     Only the first occurrence of each path is kept.
- */
-
-/**
- * @const {ConcatOptions} defaultConcatOptions     - The default shared concatenation options.
- * @const {ConcatOptions} developmentConcatOptions - The predefined concatenation options for development.
- * @const {ConcatOptions} productionConcatOptions  - The predefined concatenation options for production.
- */
-export const defaultConcatOptions = {
-    removeDuplicates: true,
-};
-export const developmentConcatOptions = Object.assign({}, defaultConcatOptions);
-export const productionConcatOptions  = Object.assign({}, defaultConcatOptions);
-
-/**
- * @const {object} developmentConcatFilesArgs - The predefined `concatFiles()` options for development.
- * @const {object} productionConcatFilesArgs  - The predefined `concatFiles()` options for production.
- */
-export const developmentConcatFilesArgs = [
-    developmentGlobOptions,
-    developmentConcatOptions,
-];
-export const productionConcatFilesArgs  = [
-    productionGlobOptions,
-    productionConcatOptions,
-];
-
-/**
- * Concatenates groups of files.
- *
- * @todo Add support for minification.
- *
- * @async
- * @param  {object|boolean} [globOptions=null]   - Customize the glob options.
- *     If `null`, default production options are used.
- *     If `false`, the glob function will be ignored.
- * @param  {object}         [concatOptions=null] - Customize the concatenation options.
- *     If `null`, default production options are used.
- * @return {Promise}
- */
-export default async function concatFiles(globOptions = null, concatOptions = null) {
-    if (supportsGlob) {
-        if (globOptions == null) {
-            globOptions = productionGlobOptions;
-        } else if (
-            globOptions !== false &&
-            globOptions !== developmentGlobOptions &&
-            globOptions !== productionGlobOptions
-        ) {
-            globOptions = merge({}, defaultGlobOptions, globOptions);
-        }
-    }
-
-    if (concatOptions == null) {
-        concatOptions = productionConcatOptions;
-    } else if (
-        concatOptions !== developmentConcatOptions &&
-        concatOptions !== productionConcatOptions
-    ) {
-        concatOptions = merge({}, defaultConcatOptions, concatOptions);
-    }
-
-    /**
-     * @async
-     * @param  {object}   entry          - The entrypoint to process.
-     * @param  {string[]} entry.includes - One or more paths to process.
-     * @param  {string}   entry.outfile  - The file to write to.
-     * @param  {?string}  [entry.label]  - The task label.
-     *     Defaults to the outfile name.
-     * @return {Promise}
-     */
-    loconfig.tasks.concats?.forEach(async ({
-        includes,
-        outfile,
-        label = null
-    }) => {
-        if (!label) {
-            label = basename(outfile || 'undefined');
-        }
-
-        const timeLabel = `${label} concatenated in`;
-        console.time(timeLabel);
-
-        try {
-            if (!Array.isArray(includes)) {
-                includes = [ includes ];
-            }
-
-            includes = resolve(includes);
-            outfile  = resolve(outfile);
-
-            if (supportsGlob && globOptions) {
-                includes = await glob(includes, globOptions);
-            }
-
-            if (concatOptions.removeDuplicates) {
-                includes = includes.map((path) => normalize(path));
-                includes = [ ...new Set(includes) ];
-            }
-
-            await concat(includes, outfile);
-
-            if (includes.length) {
-                message(`${label} concatenated`, 'success', timeLabel);
-            } else {
-                message(`${label} is empty`, 'notice', timeLabel);
-            }
-        } catch (err) {
-            message(`Error concatenating ${label}`, 'error');
-            message(err);
-
-            notification({
-                title:   `${label} concatenation failed 🚨`,
-                message: `${err.name}: ${err.message}`
-            });
-        }
-    });
-};

build/tasks/scripts.js

@@ -1,113 +0,0 @@
-import loconfig from '../helpers/config.js';
-import message from '../helpers/message.js';
-import notification from '../helpers/notification.js';
-import resolve from '../helpers/template.js';
-import { merge } from '../utils/index.js';
-import esbuild from 'esbuild';
-import { basename } from 'node:path';
-
-/**
- * @const {object} defaultESBuildOptions     - The default shared ESBuild options.
- * @const {object} developmentESBuildOptions - The predefined ESBuild options for development.
- * @const {object} productionESBuildOptions  - The predefined ESBuild options for production.
- */
-export const defaultESBuildOptions = {
-    bundle: true,
-    color: true,
-    sourcemap: true,
-    target: [
-        'es2015',
-    ],
-};
-export const developmentESBuildOptions = Object.assign({}, defaultESBuildOptions);
-export const productionESBuildOptions  = Object.assign({}, defaultESBuildOptions, {
-    logLevel: 'warning',
-    minify: true,
-});
-
-/**
- * @const {object} developmentScriptsArgs - The predefined `compileScripts()` options for development.
- * @const {object} productionScriptsArgs  - The predefined `compileScripts()` options for production.
- */
-export const developmentScriptsArgs = [
-    developmentESBuildOptions,
-];
-export const productionScriptsArgs  = [
-    productionESBuildOptions,
-];
-
-/**
- * Bundles and minifies main JavaScript files.
- *
- * @async
- * @param  {object} [esBuildOptions=null] - Customize the ESBuild build API options.
- *     If `null`, default production options are used.
- * @return {Promise}
- */
-export default async function compileScripts(esBuildOptions = null) {
-    if (esBuildOptions == null) {
-        esBuildOptions = productionESBuildOptions;
-    } else if (
-        esBuildOptions !== developmentESBuildOptions &&
-        esBuildOptions !== productionESBuildOptions
-    ) {
-        esBuildOptions = merge({}, defaultESBuildOptions, esBuildOptions);
-    }
-
-    /**
-     * @async
-     * @param  {object}   entry           - The entrypoint to process.
-     * @param  {string[]} entry.includes  - One or more paths to process.
-     * @param  {string}   [entry.outdir]  - The directory to write to.
-     * @param  {string}   [entry.outfile] - The file to write to.
-     * @param  {?string}  [entry.label]   - The task label.
-     *     Defaults to the outdir or outfile name.
-     * @throws {TypeError} If outdir and outfile are missing.
-     * @return {Promise}
-     */
-    loconfig.tasks.scripts?.forEach(async ({
-        includes,
-        outdir = '',
-        outfile = '',
-        label = null
-    }) => {
-        if (!label) {
-            label = basename(outdir || outfile || 'undefined');
-        }
-
-        const timeLabel = `${label} compiled in`;
-        console.time(timeLabel);
-
-        try {
-            if (!Array.isArray(includes)) {
-                includes = [ includes ];
-            }
-
-            includes = resolve(includes);
-
-            if (outdir) {
-                outdir = resolve(outdir);
-            } else if (outfile) {
-                outfile = resolve(outfile);
-            } else {
-                throw new TypeError(
-                    'Expected \'outdir\' or \'outfile\''
-                );
-            }
-
-            await esbuild.build(Object.assign({}, esBuildOptions, {
-                entryPoints: includes,
-                outdir,
-                outfile,
-            }));
-
-            message(`${label} compiled`, 'success', timeLabel);
-        } catch (err) {
-            // errors managments (already done in esbuild)
-            notification({
-                title:   `${label} compilation failed 🚨`,
-                message: `${err.errors[0].text} in ${err.errors[0].location.file} line ${err.errors[0].location.line}`
-            });
-        }
-    });
-};

build/tasks/styles.js

@@ -1,249 +0,0 @@
-import loconfig from '../helpers/config.js';
-import message from '../helpers/message.js';
-import notification from '../helpers/notification.js';
-import {
-    createProcessor,
-    pluginsMap as postcssPluginsMap,
-    supportsPostCSS
-} from '../helpers/postcss.js';
-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;
-
-/**
- * @const {object} defaultSassOptions     - The default shared Sass options.
- * @const {object} developmentSassOptions - The predefined Sass options for development.
- * @const {object} productionSassOptions  - The predefined Sass options for production.
- */
-export const defaultSassOptions = {
-    omitSourceMapUrl: true,
-    sourceMap: true,
-    sourceMapContents: true,
-};
-
-export const developmentSassOptions = Object.assign({}, defaultSassOptions, {
-    outputStyle: 'expanded',
-});
-export const productionSassOptions = Object.assign({}, defaultSassOptions, {
-    outputStyle: 'compressed',
-});
-
-/**
- * @const {object} defaultPostCSSOptions     - The default shared PostCSS options.
- * @const {object} developmentPostCSSOptions - The predefined PostCSS options for development.
- * @const {object} productionPostCSSOptions  - The predefined PostCSS options for production.
- */
-export const defaultPostCSSOptions = {
-    processor: {
-        map: {
-            annotation: false,
-            inline: false,
-            sourcesContent: true,
-        },
-    },
-};
-export const developmentPostCSSOptions = Object.assign({}, defaultPostCSSOptions);
-export const productionPostCSSOptions  = Object.assign({}, defaultPostCSSOptions);
-
-/**
- * @const {object|boolean} developmentStylesArgs - The predefined `compileStyles()` options for development.
- * @const {object|boolean} productionStylesArgs  - The predefined `compileStyles()` options for production.
- */
-export const developmentStylesArgs = [
-    developmentSassOptions,
-    developmentPostCSSOptions,
-    false
-];
-export const productionStylesArgs  = [
-    productionSassOptions,
-    productionPostCSSOptions,
-    true
-];
-
-/**
- * Compiles and minifies main Sass files to CSS.
- *
- * @todo Add deep merge of `postcssOptions` to better support customization
- *     of default processor options.
- *
- * @async
- * @param  {object}         [sassOptions=null]    - Customize the Sass render API options.
- *     If `null`, default production options are used.
- * @param  {object|boolean} [postcssOptions=null] - Customize the PostCSS processor API options.
- *     If `null`, default production options are used.
- *     If `false`, PostCSS processing will be ignored.
- * @return {Promise}
- */
-export default async function compileStyles(sassOptions = null, postcssOptions = null, purge = true) {
-    if (sassOptions == null) {
-        sassOptions = productionSassOptions;
-    } else if (
-        sassOptions !== developmentSassOptions &&
-        sassOptions !== productionSassOptions
-    ) {
-        sassOptions = merge({}, defaultSassOptions, sassOptions);
-    }
-
-    if (supportsPostCSS) {
-        if (postcssOptions == null) {
-            postcssOptions = productionPostCSSOptions;
-        } else if (
-            postcssOptions !== false &&
-            postcssOptions !== developmentPostCSSOptions &&
-            postcssOptions !== productionPostCSSOptions
-        ) {
-            postcssOptions = merge({}, defaultPostCSSOptions, postcssOptions);
-        }
-    }
-
-    /**
-     * @async
-     * @param  {object}   entry         - The entrypoint to process.
-     * @param  {string[]} entry.infile  - The file to process.
-     * @param  {string}   entry.outfile - The file to write to.
-     * @param  {?string}  [entry.label] - The task label.
-     *     Defaults to the outfile name.
-     * @return {Promise}
-     */
-    loconfig.tasks.styles?.forEach(async ({
-        infile,
-        outfile,
-        label = null
-    }) => {
-        const filestem = basename((outfile || 'undefined'), '.css');
-
-        const timeLabel = `${label || `${filestem}.css`} compiled in`;
-        console.time(timeLabel);
-
-        try {
-            infile  = resolve(infile);
-            outfile = resolve(outfile);
-
-            let result = await sassRender(Object.assign({}, sassOptions, {
-                file: infile,
-                outFile: outfile,
-            }));
-
-            if (supportsPostCSS && postcssOptions) {
-                if (typeof postcssProcessor === 'undefined') {
-                    postcssProcessor = createProcessor(
-                        postcssPluginsMap,
-                        postcssOptions
-                    );
-                }
-
-                result = await postcssProcessor.process(
-                    result.css,
-                    Object.assign({}, postcssOptions.processor, {
-                        from: outfile,
-                        to: outfile,
-                    })
-                );
-
-                if (result.warnings) {
-                    const warnings = result.warnings();
-                    if (warnings.length) {
-                        message(`Error processing ${label || `${filestem}.css`}`, 'warning');
-                        warnings.forEach((warn) => {
-                            message(warn.toString());
-                        });
-                    }
-                }
-            }
-
-            try {
-                await writeFile(outfile, result.css).then(() => {
-                    // Purge CSS once file exists.
-                    if (outfile && purge) {
-                        purgeUnusedCSS(outfile, `${label || `${filestem}.css`}`);
-                    }
-                });
-
-                if (result.css) {
-                    message(`${label || `${filestem}.css`} compiled`, 'success', timeLabel);
-                } else {
-                    message(`${label || `${filestem}.css`} is empty`, 'notice', timeLabel);
-                }
-            } catch (err) {
-                message(`Error compiling ${label || `${filestem}.css`}`, 'error');
-                message(err);
-
-                notification({
-                    title:   `${label || `${filestem}.css`} save failed 🚨`,
-                    message: `Could not save stylesheet to ${label || `${filestem}.css`}`
-                });
-            }
-
-            if (result.map) {
-                try {
-                    await writeFile(outfile + '.map', result.map.toString());
-                } catch (err) {
-                    message(`Error compiling ${label || `${filestem}.css.map`}`, 'error');
-                    message(err);
-
-                    notification({
-                        title:   `${label || `${filestem}.css.map`} save failed 🚨`,
-                        message: `Could not save sourcemap to ${label || `${filestem}.css.map`}`
-                    });
-                }
-            }
-        } catch (err) {
-            message(`Error compiling ${label || `${filestem}.scss`}`, 'error');
-            message(err.formatted || err);
-
-            notification({
-                title:   `${label || `${filestem}.scss`} compilation failed 🚨`,
-                message: (err.formatted || `${err.name}: ${err.message}`)
-            });
-        }
-    });
-};
-
-/**
- * Purge unused styles from CSS files.
- *
- * @async
- *
- * @param  {string} outfile - The path of a css file
- *      If missing the function stops.
- * @param  {string} label   - The CSS file label or name.
- * @return {Promise}
- */
-async function purgeUnusedCSS(outfile, label) {
-    const contentFiles = loconfig.tasks.purgeCSS?.content;
-    if (!Array.isArray(contentFiles) || !contentFiles.length) {
-        return;
-    }
-
-    label = label ?? basename(outfile);
-
-    const timeLabel = `${label} purged in`;
-    console.time(timeLabel);
-
-    const purgeCSSResults = await (new PurgeCSS()).purge({
-        content: contentFiles,
-        css: [ outfile ],
-        defaultExtractor: content => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
-        fontFaces: true,
-        keyframes: true,
-        safelist: {
-            // Keep all except .u-gc-* | .u-margin-* | .u-padding-*
-            standard: [ /^(?!.*\b(u-gc-|u-margin|u-padding)).*$/ ]
-        },
-        variables: true,
-    })
-
-    for (let result of purgeCSSResults) {
-        await writeFile(outfile, result.css)
-
-        message(`${label} purged`, 'chore', timeLabel);
-    }
-}

build/tasks/svgs.js

@@ -1,95 +0,0 @@
-import loconfig from '../helpers/config.js';
-import message from '../helpers/message.js';
-import notification from '../helpers/notification.js';
-import resolve from '../helpers/template.js';
-import { merge } from '../utils/index.js';
-import { basename } from 'node:path';
-import mixer from 'svg-mixer';
-
-/**
- * @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.
- */
-export const defaultMixerOptions = {
-    spriteConfig: {
-        usages: false,
-    },
-};
-export const developmentMixerOptions = Object.assign({}, defaultMixerOptions);
-export const productionMixerOptions  = Object.assign({}, defaultMixerOptions);
-
-/**
- * @const {object} developmentSVGsArgs - The predefined `compileSVGs()` options for development.
- * @const {object} productionSVGsArgs  - The predefined `compileSVGs()` options for production.
- */
-export const developmentSVGsArgs = [
-    developmentMixerOptions,
-];
-export const productionSVGsArgs  = [
-    productionMixerOptions,
-];
-
-/**
- * Generates and transforms SVG spritesheets.
- *
- * @async
- * @param  {object} [mixerOptions=null] - Customize the Mixer API options.
- *     If `null`, default production options are used.
- * @return {Promise}
- */
-export default async function compileSVGs(mixerOptions = null) {
-    if (mixerOptions == null) {
-        mixerOptions = productionMixerOptions;
-    } else if (
-        mixerOptions !== developmentMixerOptions &&
-        mixerOptions !== productionMixerOptions
-    ) {
-        mixerOptions = merge({}, defaultMixerOptions, mixerOptions);
-    }
-
-    /**
-     * @async
-     * @param  {object}   entry          - The entrypoint to process.
-     * @param  {string[]} entry.includes - One or more paths to process.
-     * @param  {string}   entry.outfile  - The file to write to.
-     * @param  {?string}  [entry.label]  - The task label.
-     *     Defaults to the outfile name.
-     * @return {Promise}
-     */
-    loconfig.tasks.svgs?.forEach(async ({
-        includes,
-        outfile,
-        label = null
-    }) => {
-        if (!label) {
-            label = basename(outfile || 'undefined');
-        }
-
-        const timeLabel = `${label} compiled in`;
-        console.time(timeLabel);
-
-        try {
-            if (!Array.isArray(includes)) {
-                includes = [ includes ];
-            }
-
-            includes = resolve(includes);
-            outfile  = resolve(outfile);
-
-            const result = await mixer(includes, mixerOptions);
-
-            await result.write(outfile);
-
-            message(`${label} compiled`, 'success', timeLabel);
-        } catch (err) {
-            message(`Error compiling ${label}`, 'error');
-            message(err);
-
-            notification({
-                title:   `${label} compilation failed 🚨`,
-                message: `${err.name}: ${err.message}`
-            });
-        }
-    });
-};

build/tasks/versions.js

@@ -1,441 +0,0 @@
-import loconfig from '../helpers/config.js';
-import message from '../helpers/message.js';
-import resolve from '../helpers/template.js';
-import { merge } from '../utils/index.js';
-import { randomBytes } from 'node:crypto';
-import events from 'node:events';
-import {
-    createReadStream,
-    createWriteStream,
-} from 'node:fs';
-import {
-    mkdir,
-    rename,
-    rm,
-    readFile,
-    writeFile,
-} from 'node:fs/promises';
-import {
-    basename,
-    dirname,
-} from 'node:path';
-import readline from 'node:readline';
-
-export const REGEXP_SEMVER = /^(?<major>0|[1-9]\d*)\.(?<minor>0|[1-9]\d*)\.(?<patch>0|[1-9]\d*)(?:-(?<prerelease>(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?<buildmetadata>[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
-
-/**
- * @typedef  {object} VersionOptions
- * @property {string|number|null} prettyPrint   - A string or number to insert
- *     white space into the output JSON string for readability purposes.
- * @property {string}             versionFormat - The version number format.
- * @property {string|RegExp}      versionKey    - Either:
- *     - A string representing the JSON field name assign the version number to.
- *
- *       Explicit:
- *
- *       ```json
- *       "key": "json:version"
- *       ```
- *
- *       Implicit:
- *
- *       ```json
- *       "key": "version"
- *       ```
- *
- *     - A `RegExp` object or regular expression string prefixed with `regexp:`.
- *
- *       ```json
- *       "key": "regexp:(?<=^const ASSETS_VERSION = ')(?<version>\\d+)(?=';$)"
- *       ```
- *
- *       ```js
- *       key: new RegExp('(?<=^const ASSETS_VERSION = ')(?<version>\\d+)(?=';$)')
- *       ```
- *
- *       ```js
- *       key: /(?<=^const ASSETS_VERSION = ')(?<version>\d+)(?=';$)/
- *       ```
- */
-
-/**
- * @const {VersionOptions} defaultVersionOptions     - The default shared version options.
- * @const {VersionOptions} developmentVersionOptions - The predefined version options for development.
- * @const {VersionOptions} productionVersionOptions  - The predefined version options for production.
- */
-export const defaultVersionOptions = {
-    prettyPrint:   4,
-    versionFormat: 'timestamp',
-    versionKey:    'version',
-};
-export const developmentVersionOptions = Object.assign({}, defaultVersionOptions);
-export const productionVersionOptions  = Object.assign({}, defaultVersionOptions);
-
-/**
- * @const {object} developmentVersionFilesArgs - The predefined `bumpVersion()` options for development.
- * @const {object} productionVersionFilesArgs  - The predefined `bumpVersion()` options for production.
- */
-export const developmentVersionFilesArgs = [
-    developmentVersionOptions,
-];
-export const productionVersionFilesArgs  = [
-    productionVersionOptions,
-];
-
-/**
- * Bumps version numbers in file.
- *
- * @async
- * @param  {object} [versionOptions=null] - Customize the version options.
- *     If `null`, default production options are used.
- * @return {Promise}
- */
-export default async function bumpVersions(versionOptions = null) {
-    if (versionOptions == null) {
-        versionOptions = productionVersionOptions;
-    } else if (
-        versionOptions !== developmentVersionOptions &&
-        versionOptions !== productionVersionOptions
-    ) {
-        versionOptions = merge({}, defaultVersionOptions, versionOptions);
-    }
-
-    const queue = new Map();
-
-    /**
-     * @async
-     * @param  {object}         entry          - The entrypoint to process.
-     * @param  {string}         entry.outfile  - The file to write to.
-     * @param  {?string}        [entry.label]  - The task label.
-     *     Defaults to the outfile name.
-     * @param  {?string}        [entry.format] - The version number format.
-     * @param  {?string}        [entry.key]    - The JSON field name assign the version number to.
-     * @param  {?string|number} [entry.pretty] - The white space to use to format the JSON file.
-     * @return {Promise}
-     */
-    loconfig.tasks.versions?.forEach(({
-        outfile,
-        label = null,
-        ...options
-    }) => {
-        if (!label) {
-            label = basename(outfile || 'undefined');
-        }
-
-        options.pretty = (options.pretty ?? versionOptions.prettyPrint);
-        options.format = (options.format ?? versionOptions.versionFormat);
-        options.key    = (options.key ?? versionOptions.versionKey);
-
-        if (queue.has(outfile)) {
-            queue.get(outfile).then(() => handleBumpVersion(outfile, label, options));
-        } else {
-            queue.set(outfile, handleBumpVersion(outfile, label, options));
-        }
-    });
-};
-
-/**
- * Creates a formatted version number or string.
- *
- * @param  {string}  format     - The version format.
- * @param  {?string} [oldValue] - The old version value.
- * @return {string|number}
- * @throws TypeError If the format or value are invalid.
- */
-function createVersionNumber(format, oldValue = null) {
-    let [ type, modifier ] = format.split(':', 2);
-
-    switch (type) {
-        case 'hex':
-        case 'hexadecimal':
-            try {
-                modifier = Number.parseInt(modifier);
-
-                if (Number.isNaN(modifier)) {
-                    modifier = 6;
-                }
-
-                return randomBytes(modifier).toString('hex');
-            } catch (err) {
-                throw new TypeError(
-                    `${err.message} for \'format\' type "hexadecimal"`,
-                    { cause: err }
-                );
-            }
-
-        case 'inc':
-        case 'increment':
-            try {
-                if (modifier === 'semver') {
-                    return incrementSemVer(oldValue, [ 'buildmetadata', 'patch' ]);
-                }
-
-                return incrementNumber(oldValue, modifier);
-            } catch (err) {
-                throw new TypeError(
-                    `${err.message} for \'format\' type "increment"`,
-                    { cause: err }
-                );
-            }
-
-        case 'regex':
-        case 'regexp':
-            try {
-                return new RegExp(modifier);
-            } catch (err) {
-                throw new TypeError(
-                    `${err.message} for \'format\' type "regexp"`,
-                    { cause: err }
-                );
-            }
-
-        case 'timestamp':
-            return Date.now().valueOf();
-    }
-
-    throw new TypeError(
-        'Expected \'format\' to be either "timestamp", "increment", or "hexadecimal"'
-    );
-}
-
-/**
- * @async
- * @param  {string} outfile
- * @param  {string} label
- * @param  {object} options
- * @return {Promise}
- */
-async function handleBumpVersion(outfile, label, options) {
-    const timeLabel = `${label} bumped in`;
-    console.time(timeLabel);
-
-    try {
-        options.key = parseVersionKey(options.key);
-
-        if (options.key instanceof RegExp) {
-            await handleBumpVersionWithRegExp(outfile, label, options);
-        } else {
-            await handleBumpVersionInJson(outfile, label, options);
-        }
-
-        message(`${label} bumped`, 'success', timeLabel);
-    } catch (err) {
-        message(`Error bumping ${label}`, 'error');
-        message(err);
-
-        notification({
-            title:   `${label} bumping failed 🚨`,
-            message: `${err.name}: ${err.message}`
-        });
-    }
-}
-
-/**
- * Changes the version number for the provided JSON key in file.
- *
- * @async
- * @param  {string} outfile
- * @param  {string} label
- * @param  {object} options
- * @param  {string} options.key
- * @return {Promise}
- */
-async function handleBumpVersionInJson(outfile, label, options) {
-    outfile = resolve(outfile);
-
-    let json;
-
-    try {
-        json = JSON.parse(await readFile(outfile, { encoding: 'utf8' }));
-    } catch (err) {
-        json = {};
-
-        message(`${label} is a new file`, 'notice');
-
-        await mkdir(dirname(outfile), { recursive: true });
-    }
-
-    json[options.key] = createVersionNumber(options.format, json?.[options.key]);
-
-    return await writeFile(
-        outfile,
-        JSON.stringify(json, null, options.pretty),
-        { encoding: 'utf8' }
-    );
-}
-
-/**
- * Changes the version number for the provided RegExp in file.
- *
- * @async
- * @param  {string} outfile
- * @param  {string} label
- * @param  {object} options
- * @param  {RegExp} options.key
- * @return {Promise}
- */
-async function handleBumpVersionWithRegExp(outfile, label, options) {
-    outfile = resolve(outfile);
-
-    const bckfile = `${outfile}~`;
-
-    await rename(outfile, bckfile);
-
-    try {
-        const rl = readline.createInterface({
-            input: createReadStream(bckfile),
-        });
-
-        let newVersion = null;
-
-        const writeStream = createWriteStream(outfile, { encoding: 'utf8' });
-
-        rl.on('line', (line) => {
-            const found = line.match(options.key);
-
-            if (found) {
-                const groups      = (found.groups ?? {});
-                const oldVersion  = (groups.build ?? groups.version ?? found[1] ?? found[0]);
-                const newVersion  = createVersionNumber(options.format, oldVersion);
-                const replacement = found[0].replace(oldVersion, newVersion);
-
-                line = line.replace(found[0], replacement);
-            }
-
-            writeStream.write(line + "\n");
-        });
-
-        await events.once(rl, 'close');
-
-        await rm(bckfile);
-    } catch (err) {
-        await rm(outfile, { force: true });
-
-        await rename(bckfile, outfile);
-
-        throw err;
-    }
-}
-
-/**
- * Increments the given integer.
- *
- * @param  {string|int} value         - The number to increment.
- * @param  {string|int} [increment=1] - The amount to increment by.
- * @return {int}
- * @throws TypeError If the version number is invalid.
- */
-function incrementNumber(value, increment = 1) {
-    const version = Number.parseInt(value);
-    if (Number.isNaN(version)) {
-        throw new TypeError(
-            `Expected an integer version number, received [${value}]`
-        );
-    }
-
-    increment = Number.parseInt(increment);
-    if (Number.isNaN(increment)) {
-        throw new TypeError(
-            'Expected an integer increment number'
-        );
-    }
-
-    return (version + increment);
-}
-
-/**
- * Increments the given SemVer version number.
- *
- * @param  {string}          value     - The version to mutate.
- * @param  {string|string[]} [target]  - The segment to increment, one of:
- *     'major', 'minor', 'patch', ~~'prerelease'~~, 'buildmetadata'.
- * @param  {string|int}      [increment=1] - The amount to increment by.
- * @return {string}
- * @throws TypeError If the version or target are invalid.
- */
-function incrementSemVer(value, target = 'patch', increment = 1) {
-    const found = value.match(REGEXP_SEMVER);
-    if (!found) {
-        throw new TypeError(
-            `Expected a SemVer version number, received [${value}]`
-        );
-    }
-
-    if (Array.isArray(target)) {
-        for (const group of target) {
-            if (found.groups[group] != null) {
-                target = group;
-                break;
-            }
-        }
-    }
-
-    if (!target || !found.groups[target]) {
-        throw new TypeError(
-            `Expected a supported SemVer segment, received [${target}]`
-        );
-    }
-
-    const segments = {
-        'major':         '',
-        'minor':         '.',
-        'patch':         '.',
-        'prerelease':    '-',
-        'buildmetadata': '+',
-    };
-
-    let replacement = '';
-
-    for (const [ segment, delimiter ] of Object.entries(segments)) {
-        if (found.groups?.[segment] != null) {
-            const newVersion = (segment === target)
-                ? incrementNumber(found.groups[segment], increment)
-                : found.groups[segment];
-
-            replacement += `${delimiter}${newVersion}`;
-        }
-    }
-
-    return value.replace(found[0], replacement);
-}
-
-/**
- * Parses the version key.
- *
- * @param  {*} key - The version key.
- * @return {string|RegExp}
- */
-function parseVersionKey(key) {
-    if (key instanceof RegExp) {
-        return key;
-    }
-
-    if (typeof key !== 'string') {
-        throw new TypeError(
-            'Expected \'key\' to be either a string or a RegExp'
-        );
-    }
-
-    const delimiter = key.indexOf(':');
-
-    if (delimiter === -1) {
-        // Assumes its a JSON key
-        return key;
-    }
-
-    const type  = key.slice(0, delimiter);
-    const value = key.slice(delimiter + 1);
-
-    switch (type) {
-        case 'json':
-            return value;
-
-        case 'regex':
-        case 'regexp':
-            return new RegExp(value);
-    }
-
-    throw new TypeError(
-        'Expected \'key\' type to be either "json" or "regexp"'
-    );
-}

build/utils/index.js

@@ -1,115 +0,0 @@
-/**
- * @file Provides generic functions and constants.
- */
-
-/**
- * @type {RegExp} - Match all special characters.
- */
-const regexUnescaped = /[\[\]\{\}\(\)\-\*\+\?\.\,\\\^\$\|\#\s]/g;
-
-/**
- * Quotes regular expression characters.
- *
- * @param  {string} str - The input string.
- * @return {string} Returns the quoted (escaped) string.
- */
-function escapeRegExp(str) {
-    return str.replace(regexUnescaped, '\\$&');
-}
-
-/**
- * Creates a new object with all nested object properties
- * concatenated into it recursively.
- *
- * Nested keys are flattened into a property path:
- *
- * ```js
- * {
- *   a: {
- *     b: {
- *       c: 1
- *     }
- *   },
- *   d: 1
- * }
- * ```
- *
- * ```js
- * {
- *   "a.b.c": 1,
- *   "d": 1
- * }
- * ```
- *
- * @param  {object} input  - The object to flatten.
- * @param  {string} prefix - The parent key prefix.
- * @param  {object} target - The object that will receive the flattened properties.
- * @return {object} Returns the `target` object.
- */
-function flatten(input, prefix, target = {}) {
-    for (const key in input) {
-        const field = (prefix ? prefix + '.' + key : key);
-
-        if (isObjectLike(input[key])) {
-            flatten(input[key], field, target);
-        } else {
-            target[field] = input[key];
-        }
-    }
-
-    return target;
-}
-
-/**
- * Determines whether the passed value is an `Object`.
- *
- * @param  {*} value - The value to be checked.
- * @return {boolean} Returns `true` if the value is an `Object`,
- *     otherwise `false`.
- */
-function isObjectLike(value) {
-    return (value != null && typeof value === 'object');
-}
-
-/**
- * Creates a new object with all nested object properties
- * merged into it recursively.
- *
- * @param  {object}   target     - The target object.
- * @param  {object[]} ...sources - The source object(s).
- * @throws {TypeError} If the target and source are the same.
- * @return {object} Returns the `target` object.
- */
-function merge(target, ...sources) {
-    for (const source of sources) {
-        if (target === source) {
-            throw new TypeError(
-                'Cannot merge, target and source are the same'
-            );
-        }
-
-        for (const key in source) {
-            if (source[key] != null) {
-                if (isObjectLike(source[key]) && isObjectLike(target[key])) {
-                    merge(target[key], source[key]);
-                    continue;
-                } else if (Array.isArray(source[key]) && Array.isArray(target[key])) {
-                    target[key] = target[key].concat(source[key]);
-                    continue;
-                }
-            }
-
-            target[key] = source[key];
-        }
-    }
-
-    return target;
-}
-
-export {
-    escapeRegExp,
-    flatten,
-    isObjectLike,
-    merge,
-    regexUnescaped,
-};

build/watch.js

@@ -1,199 +0,0 @@
-import concatFiles, { developmentConcatFilesArgs } from './tasks/concats.js';
-import compileScripts, { developmentScriptsArgs } from './tasks/scripts.js';
-import compileStyles, { developmentStylesArgs } from './tasks/styles.js' ;
-import compileSVGs, { developmentSVGsArgs } from './tasks/svgs.js';
-import loconfig from './helpers/config.js';
-import message from './helpers/message.js';
-import notification from './helpers/notification.js';
-import resolve from './helpers/template.js';
-import { merge } from './utils/index.js';
-import browserSync from 'browser-sync';
-import { join } from 'node:path';
-
-// Match a URL protocol.
-const regexUrlStartsWithProtocol = /^[a-z0-9\-]:\/\//i;
-
-// Build scripts, compile styles, concat files,
-// and generate spritesheets on first hit
-concatFiles(...developmentConcatFilesArgs);
-compileScripts(...developmentScriptsArgs);
-compileStyles(...developmentStylesArgs);
-compileSVGs(...developmentSVGsArgs);
-
-// Create a new BrowserSync instance
-const server = browserSync.create();
-
-// Start the BrowserSync server
-server.init(createServerOptions(loconfig), (err) => {
-    if (err) {
-        message('Error starting development server', 'error');
-        message(err);
-
-        notification({
-            title:   'Development server failed',
-            message: `${err.name}: ${err.message}`
-        });
-    }
-});
-
-configureServer(server, loconfig);
-
-/**
- * Configures the BrowserSync options.
- *
- * @param  {BrowserSync} server         - The BrowserSync API.
- * @param  {object}      loconfig       - The project configset.
- * @param  {object}      loconfig.paths - The paths options.
- * @param  {object}      loconfig.tasks - The tasks options.
- * @return {void}
- */
-function configureServer(server, { paths, tasks }) {
-    const views = createViewsArray(paths.views);
-
-    // Reload on any changes to views or processed files
-    server.watch(
-        [
-            ...views,
-            join(paths.scripts.dest, '*.js'),
-            join(paths.styles.dest, '*.css'),
-            join(paths.svgs.dest, '*.svg'),
-        ]
-    ).on('change', server.reload);
-
-    // Watch source scripts
-    server.watch(
-        [
-            join(paths.scripts.src, '**/*.js'),
-        ]
-    ).on('change', () => {
-        compileScripts(...developmentScriptsArgs);
-    });
-
-    // Watch source concats
-    if (tasks.concats?.length) {
-        server.watch(
-            resolve(
-                tasks.concats.reduce(
-                    (patterns, { includes }) => patterns.concat(includes),
-                    []
-                )
-            )
-        ).on('change', () => {
-            concatFiles(...developmentConcatFilesArgs);
-        });
-    }
-
-    // Watch source styles
-    server.watch(
-        [
-            join(paths.styles.src, '**/*.scss'),
-        ]
-    ).on('change', () => {
-        compileStyles(...developmentStylesArgs);
-    });
-
-    // Watch source SVGs
-    server.watch(
-        [
-            join(paths.svgs.src, '*.svg'),
-        ]
-    ).on('change', () => {
-        compileSVGs(...developmentSVGsArgs);
-    });
-}
-
-/**
- * Creates a new object with all the BrowserSync options.
- *
- * @param  {object} loconfig        - The project configset.
- * @param  {object} loconfig.paths  - The paths options.
- * @param  {object} loconfig.server - The server options.
- * @return {object} Returns the server options.
- */
-function createServerOptions({
-    paths,
-    server: options
-}) {
-    const config = {
-        open: false,
-        notify: false,
-        ghostMode: false
-    };
-
-    // Resolve the URL for the BrowserSync server
-    if (isNonEmptyString(paths.url)) {
-        // Use proxy
-        config.proxy = paths.url;
-    } else if (isNonEmptyString(paths.dest)) {
-        // Use base directory
-        config.server = {
-            baseDir: paths.dest
-        };
-    }
-
-    merge(config, resolve(options));
-
-    // If HTTPS is enabled, prepend `https://` to proxy URL
-    if (options?.https) {
-        if (isNonEmptyString(config.proxy?.target)) {
-            config.proxy.target = prependSchemeToUrl(config.proxy.target, 'https');
-        } else if (isNonEmptyString(config.proxy)) {
-            config.proxy = prependSchemeToUrl(config.proxy, 'https');
-        }
-    }
-
-    return config;
-}
-
-/**
- * Creates a new array (shallow-copied) from the views configset.
- *
- * @param  {*} views - The views configset.
- * @throws {TypeError} If views is invalid.
- * @return {array} Returns the views array.
- */
-function createViewsArray(views) {
-    if (Array.isArray(views)) {
-        return Array.from(views);
-    }
-
-    switch (typeof views) {
-        case 'string':
-            return [ views ];
-
-        case 'object':
-            if (views != null) {
-                return Object.values(views);
-            }
-    }
-
-    throw new TypeError(
-        'Expected \'views\' to be a string, array, or object'
-    );
-}
-
-/**
- * Prepends the scheme to the URL.
- *
- * @param  {string} url      - The URL to mutate.
- * @param  {string} [scheme] - The URL scheme to prepend.
- * @return {string} Returns the mutated URL.
- */
-function prependSchemeToUrl(url, scheme = 'http') {
-    if (regexUrlStartsWithProtocol.test(url)) {
-        return url.replace(regexUrlStartsWithProtocol, `${scheme}://`);
-    }
-
-    return `${scheme}://${url}`;
-}
-
-/**
- * Determines whether the passed value is a string with at least one character.
- *
- * @param  {*} value - The value to be checked.
- * @return {boolean} Returns `true` if the value is a non-empty string,
- *     otherwise `false`.
- */
-function isNonEmptyString(value) {
-    return (typeof value === 'string' && value.length > 0);
-}

docs/grid.md

@@ -70,8 +70,8 @@ The first step is to set intial SCSS values in the following files :
             grid-template-columns: repeat(4, 1fr);
         }
 
-        &.-col-#{$base-column-nb}\@from-medium {
-            @media (min-width: $from-medium) {
+        &.-col-#{$base-column-nb}\@from-md {
+            @media (min-width: $from-md) {
                 grid-template-columns: repeat(#{$base-column-nb}, 1fr);
             }
         }

docs/technologies.md

@@ -80,10 +80,10 @@ Learn about [namespacing](https://csswizardry.com/2015/03/more-transparent-ui-co
 }
 
 .c-block_heading {
-    @media (max-width: $to-medium) {
+    @media (max-width: $to-md) {
         .c-block.-large & {
             margin-bottom: rem(40px);
-        } 
+        }
     }
 }
 ```

loconfig.example.json

@@ -1,8 +0,0 @@
-{
-    "server": {
-        "https": {
-            "key": "~/.config/valet/Certificates/{% paths.url %}.key",
-            "cert": "~/.config/valet/Certificates/{% paths.url %}.crt"
-        }
-    }
-}

loconfig.json

@@ -1,72 +0,0 @@
-{
-    "paths": {
-        "url": "locomotive-boilerplate.test",
-        "src": "./assets",
-        "dest": "./www",
-        "images": {
-            "src": "./assets/images"
-        },
-        "styles": {
-            "src": "./assets/styles",
-            "dest": "./www/assets/styles"
-        },
-        "scripts": {
-            "src": "./assets/scripts",
-            "dest": "./www/assets/scripts"
-        },
-        "svgs": {
-            "src": "./assets/images/sprite",
-            "dest": "./www/assets/images"
-        },
-        "views": {
-            "src": "./www/"
-        }
-    },
-    "tasks": {
-        "concats": [
-            {
-                "includes": [
-                    "{% paths.scripts.src %}/vendors/*.js"
-                ],
-                "outfile": "{% paths.scripts.dest %}/vendors.js"
-            }
-        ],
-        "scripts": [
-            {
-                "includes": [
-                    "{% paths.scripts.src %}/app.js"
-                ],
-                "outfile": "{% paths.scripts.dest %}/app.js"
-            }
-        ],
-        "styles": [
-            {
-                "infile": "{% paths.styles.src %}/critical.scss",
-                "outfile": "{% paths.styles.dest %}/critical.css"
-            },
-            {
-                "infile": "{% paths.styles.src %}/main.scss",
-                "outfile": "{% paths.styles.dest %}/main.css"
-            }
-        ],
-        "svgs": [
-            {
-                "includes": [
-                    "{% paths.svgs.src %}/*.svg"
-                ],
-                "outfile": "{% paths.svgs.dest %}/sprite.svg"
-            }
-        ],
-        "purgeCSS": {
-            "content": [
-                "./www/**/*.html",
-                "./assets/scripts/**/*"
-            ]
-        },
-        "versions": [
-            {
-                "outfile": "./assets.json"
-            }
-        ]
-    }
-}

package.json

@@ -6,39 +6,26 @@
     "author": "Locomotive <info@locomotive.ca>",
     "type": "module",
     "engines": {
-        "node": ">=20.1",
-        "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": "npm run dev",
+        "dev": "vite serve",
+        "build": "tsc && vite build",
+        "preview": "vite preview"
     },
     "dependencies": {
-        "locomotive-scroll": "^5.0.0-beta.9",
-        "modujs": "^1.4.2",
-        "modularload": "^1.2.6",
-        "normalize.css": "^8.0.1",
-        "svg4everybody": "^2.1.9"
+        "locomotive-scroll": "^5.0.0-beta.21"
     },
     "devDependencies": {
-        "autoprefixer": "^10.4.13",
-        "browser-sync": "^3.0.2",
-        "concat": "^1.0.3",
-        "esbuild": "^0.17.6",
-        "kleur": "^4.1.5",
-        "node-notifier": "^10.0.1",
-        "postcss": "^8.4.21",
-        "purgecss": "^5.0.0",
-        "sass": "^1.69.5",
-        "svg-mixer": "~2.3.14",
-        "tiny-glob": "^0.2.9"
-    },
-    "overrides": {
-        "browser-sync": {
-            "ua-parser-js": "~1.0.33"
-        },
-        "svg-mixer": {
-            "postcss": "^8.4.20"
-        }
+        "@types/node": "^22.7.7",
+        "dotenv": "^16.4.5",
+        "fast-glob": "^3.3.2",
+        "path": "^0.12.7",
+        "sass-embedded": "^1.80.3",
+        "typescript": "^5.6.3",
+        "url": "^0.11.4",
+        "vite": "^5.4.9"
     }
 }

src/components/Carousel/Carousel.scss

@@ -0,0 +1,10 @@
+.c-carousel {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}

src/components/Carousel/Carousel.ts

@@ -0,0 +1,11 @@
+class Carousel extends HTMLElement {
+    constructor() {
+        super();
+        console.log('Carousel constructor');
+    }
+    connectedCallback() {
+        console.log('Carousel connected');
+    }
+}
+console.log('Carousel loaded');
+customElements.define('c-carousel', Carousel);

src/components/Header/Header.ts

@@ -0,0 +1,11 @@
+class Header extends HTMLElement {
+    constructor() {
+        super();
+        console.log('Header constructor');
+    }
+    connectedCallback() {
+        console.log('Header connected');
+    }
+}
+
+customElements.define('c-header', Header);

src/index.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html class="is-loading" lang="en" data-page="home">
+
+<head>
+    <meta charset="utf-8">
+    <title>Locomotive Boilerplate</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta name="theme-color" content="#ffffff">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <link rel="manifest" href="site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
+    <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000">
+    <!-- For a dark mode managment and svg favicon add this in your favicon.svg -->
+    <!--
+            <style>
+                path {
+                    fill: #000;
+                }
+                @media (prefers-color-scheme: dark) {
+                    path {
+                        fill: #fff;
+                    }
+                }
+            </style>
+        -->
+    <!-- <link rel="icon" href="assets/images/favicons/favicon.svg"> -->
+
+    <!-- Preload Fonts -->
+    <link rel="preload" href="/fonts/SourceSans3-Bold.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/fonts/SourceSans3-BoldIt.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/fonts/SourceSans3-Regular.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/fonts/SourceSans3-RegularIt.woff2" as="font" type="font/woff2" crossorigin>
+
+    <!-- <link rel="stylesheet" href="../src/styles/main.scss">   -->
+</head>
+
+<body>
+    <header>
+        <a href="/">
+            <h1>Locomotive Boilerplate</h1>
+        </a>
+        <nav>
+            <ul>
+                <li><a href="images.html">Images</a></li>
+                <li><a href="form.html" data-load="customTransition">Form</a></li>
+                <li><a href="grid.html">Grid</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <div>
+            <h2>Home</h2>
+            <p>Welcome to the Locomotive Boilerplate.</p>
+        </div>
+    </main>
+
+    <footer>
+        <p>Made with <a href="https://github.com/locomotivemtl/locomotive-boilerplate"
+                title="Locomotive Boilerplate" target="_blank" rel="noopener">🚂</a></p>
+    </footer>
+
+    <script src="/scripts/app.ts" type="module"></script>
+</body>
+
+</html>