Fix svg-mixer support for sub-directories

By default, svg-mixer only uses the SVG's file name as its ID. If any SVG files are stored in sub-directories, that information is ignored in the assembled spritesheet. This is problematic since context is lost (the sub-directory's name) and risks duplicate symbol IDs.

This commit introduces a new NPM dependency, `common-path` to resolve the longest common base path, and uses a dependency of `svg-mixer` named `url-slug` in order to prefix the directory name.

assets/styles/components/_heading.scss

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

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/main.scss

@@ -54,6 +54,7 @@
 // ==========================================================================
 
 @import "components/heading";
+@import "components/text";
 @import "components/button";
 @import "components/form";
 

assets/styles/settings/_config.variables.scss

@@ -12,19 +12,6 @@
     // Container
     --container-width:  calc(100% - 2 * var(--grid-margin));
 
-    // Font sizes
-    --font-size-h1:     #{responsive-type(36px, 72px, 1400px)};
-    --font-size-h2:     #{rem(28px)};
-    --font-size-h3:     #{rem(24px)};
-    --font-size-h4:     #{rem(20px)};
-    --font-size-h5:     #{rem(18px)};
-    --font-size-h6:     #{rem(16px)};
-
-    // // Colors
-    // @each $color, $value in $colors {
-    //     --color-#{"" + $color}: #{$value};
-    // }
-
     @media (min-width: $from-sm) {
         --grid-columns:     #{$base-column-nb};
         --grid-gutter:      #{rem(16px)};

assets/styles/tools/_functions.scss

@@ -196,11 +196,11 @@ $context: 'frontend' !default;
 //
 // ```scss
 // .c-heading.-h1 {
-//     font-size: responsive-type(30px, 60px, 1800);
+//     font-size: responsive-value(30px, 60px, 1800);
 // }
 //
 // .c-heading.-h2 {
-//     font-size: responsive-type(20px, 40px, $from-xl);
+//     font-size: responsive-value(20px, 40px, $from-xl);
 // }
 // ```
 //
@@ -208,7 +208,7 @@ $context: 'frontend' !default;
 // @param  {number} $max-size   - Maximum font size in pixels.
 // @param  {number} $breakpoint - Maximum breakpoint.
 // @return {function<number, function<number>, number>}
-@function responsive-type($min-size, $max-size, $breakpoint) {
+@function responsive-value($min-size, $max-size, $breakpoint) {
     $delta: math.div($max-size, $breakpoint);
     @return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
 }

build/tasks/svgs.js

@@ -1,21 +1,36 @@
 import loconfig from '../helpers/config.js';
+import glob, { supportsGlob } from '../helpers/glob.js';
 import message from '../helpers/message.js';
 import notification from '../helpers/notification.js';
-import resolve from '../helpers/template.js';
+import { resolve as resolveTemplate } from '../helpers/template.js';
 import { merge } from '../utils/index.js';
-import { basename } from 'node:path';
+import {
+    basename,
+    dirname,
+    extname,
+    resolve,
+} from 'node:path';
+import commonPath from 'common-path';
 import mixer from 'svg-mixer';
+import slugify from 'url-slug';
+
+const basePath = loconfig?.paths?.svgs?.src
+    ? resolve(loconfig.paths.svgs.src)
+    : null;
 
 /**
- * @const {object} defaultMixerOptions     - The default shared Mixer options.
- * @const {object} developmentMixerOptions - The predefined Mixer options for development.
- * @const {object} productionMixerOptions  - The predefined Mixer options for production.
+ * @const {object} defaultMixerOptions - The default shared Mixer options.
  */
 export const defaultMixerOptions = {
     spriteConfig: {
         usages: false,
     },
 };
+
+/**
+ * @const {object} developmentMixerOptions - The predefined Mixer options for development.
+ * @const {object} productionMixerOptions  - The predefined Mixer options for production.
+ */
 export const developmentMixerOptions = Object.assign({}, defaultMixerOptions);
 export const productionMixerOptions  = Object.assign({}, defaultMixerOptions);
 
@@ -74,10 +89,52 @@ export default async function compileSVGs(mixerOptions = null) {
                 includes = [ includes ];
             }
 
-            includes = resolve(includes);
-            outfile  = resolve(outfile);
+            includes = resolveTemplate(includes);
+            outfile  = resolveTemplate(outfile);
 
-            const result = await mixer(includes, mixerOptions);
+            if (supportsGlob && basePath) {
+                includes = await glob(includes);
+                includes = [ ...new Set(includes) ];
+
+                const common = commonPath(includes);
+                if (common.commonDir) {
+                    common.commonDir = resolve(common.commonDir);
+                }
+
+                /**
+                 * Generates the `<symbol id>` attribute and prefix any
+                 * SVG files in subdirectories according to the paths
+                 * common base path.
+                 *
+                 * Example for SVG source path `./assets/images/sprite`:
+                 *
+                 * | Path                                 | ID        |
+                 * | ------------------------------------ | --------- |
+                 * | `./assets/images/sprite/foo.svg`     | `foo`     |
+                 * | `./assets/images/sprite/baz/qux.svg` | `baz-qux` |
+                 *
+                 * @param  {string} path       - The absolute path to the file.
+                 * @param  {string} [query=''] - A query string.
+                 * @return {string} The symbol ID.
+                 */
+                mixerOptions.generateSymbolId = (path, query = '') => {
+                    let dirName = dirname(path)
+                        .replace(common.commonDir ?? basePath, '')
+                        .replace(/^\/|\/$/, '')
+                        .replace('/', '-');
+                    if (dirName) {
+                        dirName += '-';
+                    }
+
+                    const fileName = basename(path, extname(path));
+                    const decodedQuery = decodeURIComponent(decodeURIComponent(query));
+                    return `${dirName}${fileName}${slugify(decodedQuery)}`;
+                };
+            }
+
+            const result = await mixer(includes, {
+                ...mixerOptions,
+            });
 
             await result.write(outfile);
 

package-lock.json

@@ -16,6 +16,7 @@
             "devDependencies": {
                 "autoprefixer": "^10.4.17",
                 "browser-sync": "^3.0.2",
+                "common-path": "^1.0.1",
                 "concat": "^1.0.3",
                 "esbuild": "^0.20.0",
                 "kleur": "^4.1.5",
@@ -1218,6 +1219,15 @@
             "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
             "dev": true
         },
+        "node_modules/common-path": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/common-path/-/common-path-1.0.1.tgz",
+            "integrity": "sha512-C8zvr4tVGRIJpbrh7WxeFZPvUkc2PHWx2IvxAUtuJCAiOLx0n6N4Xaab0C7wM+HDfXLqUQg7H9FoIjyxn/4IiA==",
+            "dev": true,
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/component-emitter": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
@@ -5701,6 +5711,12 @@
             "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
             "dev": true
         },
+        "common-path": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/common-path/-/common-path-1.0.1.tgz",
+            "integrity": "sha512-C8zvr4tVGRIJpbrh7WxeFZPvUkc2PHWx2IvxAUtuJCAiOLx0n6N4Xaab0C7wM+HDfXLqUQg7H9FoIjyxn/4IiA==",
+            "dev": true
+        },
         "component-emitter": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "devDependencies": {
         "autoprefixer": "^10.4.17",
         "browser-sync": "^3.0.2",
+        "common-path": "^1.0.1",
         "concat": "^1.0.3",
         "esbuild": "^0.20.0",
         "kleur": "^4.1.5",