feat: copying component assets should account for any type of directory structure

Author: Callin Mullaney

config/webpack/plugins.js

@@ -1,4 +1,4 @@
-import { resolve, dirname } from 'path';
+import { resolve, dirname, relative } from 'path';
 import webpack from 'webpack';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
@@ -61,7 +61,7 @@ const componentsSrcRoot = isSrcExists ? resolve(srcDir, 'components') : srcDir;
  * Component output root (where compiled component assets go):
  *  - Drupal + src/: `components/…`
  *  - Otherwise:     `dist/components/…`
- * (Relative to `projectDir`; used by CopyPlugin’s `to:` path.)
+ * (Relative to `projectDir`; used by CopyPlugins `to:` path.)
  * @type {string}
  */
 const componentsOutRoot =
@@ -94,7 +94,9 @@ function getPatterns(filesMatcher) {
       parentDir === 'layout' || parentDir === 'foundation'
         ? '/components/'
         : '/';
+
     const filePath = file.split(/(foundation\/|components\/|layout\/)/)[2];
+
     const to = isDrupal
       ? `${projectPath}${consolidateDirs}${parentDir}/${filePath}`
       : `${projectPath}/dist/${parentDir}/${filePath}`;
@@ -112,63 +114,113 @@ const CopyTwigPlugin = isSrcExists
   ? new CopyPlugin({ patterns: getPatterns(componentFilesPattern) })
   : false;
 
+/* -------------------------------------------------------------------------- */
+/*                          COMPONENT & GLOBAL ASSETS                          */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Asset allow-list (extensions we consider "static assets" to mirror).
+ * Extend to suit your project (e.g., add `pdf`, `txt`, `xml`, etc.).
+ * NOTE: We purposefully exclude code-like files via the filter below.
+ * @type {RegExp}
+ */
+const ASSET_EXT_RE =
+  /\.(?:png|jpe?g|gif|svg|webp|avif|ico|bmp|heic|heif|mp4|webm|mp3|ogg|wav|aac|woff2?|ttf|otf|eot|json|webmanifest|manifest|pdf)$/i;
+
+/**
+ * Exclude code & tooling files (don’t mirror these).
+ * @type {RegExp}
+ */
+const EXCLUDE_CODE_RE =
+  /\.(?:jsx?|tsx?|mjs|cjs|vue|svelte|scss|sass|less|styl|css|map|twig|php|yml|yaml|md|markdown|story(?:book)?\.[jt]sx?|stories\.[jt]sx?|test\.[jt]sx?)$/i;
+
 /**
- * CopyPlugin instance: copies **component-local assets** (images, fonts, SVGs, etc.)
+ * Shared filter for CopyPlugin patterns.
+ * Decides whether a file should be copied as a "static asset".
  *
- * Example:
+ * @param {string} resourcePath - Absolute file path on disk.
+ * @param {string} base - The context directory for the pattern.
+ * @returns {boolean} True if we should copy the file.
+ */
+const assetFilter = (resourcePath, base) => {
+  const rel = relative(base, resourcePath);
+  // Guard: stay inside context
+  if (rel.startsWith('..')) return false;
+  // Exclude typical code/tooling files
+  if (EXCLUDE_CODE_RE.test(rel)) return false;
+  // Include known asset extensions
+  return ASSET_EXT_RE.test(rel);
+};
+
+/**
+ * Copy **all static assets inside components**, regardless of folder labels.
+ *
+ * Examples (all preserved under the component’s output root):
  *   src/components/accordion/assets/dropdown-icon.svg
- * -> (Drupal+src) components/accordion/assets/dropdown-icon.svg
- * -> (WP/legacy)  dist/components/accordion/assets/dropdown-icon.svg
+ *   src/components/accordion/images/icons/chevron.svg
+ *   src/components/accordion/icon.svg                 (root-level asset)
  *
- * Notes:
- * - `context` is set to the component source root so `[path]` starts **after**
- *   `…/components/`.
- * - `to` uses `[path][name][ext]` to mirror the original tree.
- * - `noErrorOnMissing` avoids errors if no assets are present.
  * @type {CopyPlugin}
  */
 const CopyComponentAssetsPlugin = new CopyPlugin({
   patterns: [
     {
-      from: '**/assets/**/*',
+      // Start at the components root and evaluate every file
+      from: '**/*',
       context: componentsSrcRoot,
       to: resolve(projectDir, componentsOutRoot, '[path][name][ext]'),
       noErrorOnMissing: true,
       globOptions: {
         dot: false,
-        ignore: ['**/.DS_Store', '**/Thumbs.db'],
+        ignore: [
+          '**/.DS_Store',
+          '**/Thumbs.db',
+          '**/node_modules/**',
+          '**/dist/**',
+        ],
       },
+      // Only copy files that match our asset allow-list and are not code
+      filter: (resourcePath) => assetFilter(resourcePath, componentsSrcRoot),
     },
   ],
 });
 
 /**
- * CopyPlugin instance for **global (non-component) assets** that live
- * under `src/` but *outside* `src/components/`.
- *
- * These are mirrored under `dist/global/…` (because your base SCSS/JS already
- * use the `dist/global` convention).
+ * OPTIONAL: Copy **global (non-component) assets** that live under `src/`
+ * but outside `src/components/` (e.g. layout/site assets).
  *
+ * Mirrors them under `dist/global/…`.
  * Disabled when there is no `src/` directory.
+ *
  * @type {CopyPlugin|false}
  */
 const CopyGlobalAssetsPlugin = isSrcExists
   ? new CopyPlugin({
       patterns: [
         {
-          from: '!(components|util)/**/assets/**/*',
+          from: '!(components|util)/**/*',
           context: srcDir,
           to: resolve(projectDir, 'dist', 'global', '[path][name][ext]'),
           noErrorOnMissing: true,
           globOptions: {
             dot: false,
-            ignore: ['**/.DS_Store', '**/Thumbs.db'],
+            ignore: [
+              '**/.DS_Store',
+              '**/Thumbs.db',
+              '**/node_modules/**',
+              '**/dist/**',
+            ],
           },
+          filter: (resourcePath) => assetFilter(resourcePath, srcDir),
         },
       ],
     })
   : false;
 
+/* -------------------------------------------------------------------------- */
+/*                                 OTHER PLUGINS                               */
+/* -------------------------------------------------------------------------- */
+
 /**
  * CleanWebpackPlugin configuration.
  * Wipes out compiled CSS/JS in `distPath` before a build; keeps images.

config/webpack/resolves.js

@@ -4,7 +4,14 @@
  * - Exposes a Webpack-style `resolve.alias` object for `.twig` files
  */
 
-import { basename, resolve, relative, isAbsolute, join, path } from 'path';
+import {
+  basename,
+  resolve,
+  relative,
+  isAbsolute,
+  join,
+  posix as path,
+} from 'node:path';
 import { sync as globSync } from 'glob';
 import fs from 'fs-extra';
 import emulsifyConfig from '../../../../../project.emulsify.json' with { type: 'json' };