Update PostCSS config to correctly resolve asset paths in the bundled…

… CSS module

app/scripts/styles/styles.scss

@@ -14,3 +14,6 @@
 // Custom VEDA UI styles
 @use "../components/common/page-header/styles.scss";
 @use "../components/common/cookie-consent/index.scss";
+
+$theme-font-path: '../fonts';
+$theme-image-path: '../img';

gulpfile.js

@@ -7,6 +7,8 @@ const portscanner = require('portscanner');
 const log = require('fancy-log');
 const uswds = require('@uswds/compile');
 const sass = require('gulp-sass')(require('sass'));
+const postcss = require('gulp-postcss');
+const url = require('postcss-url');
 
 uswds.settings.version = 3;
 
@@ -76,6 +78,18 @@ function copyUswdsImages() {
   return uswds.copyImages();
 }
 
+function copyUswdsAssets() {
+  return gulp
+    .src(
+      [
+        './node_modules/@uswds/uswds/dist/fonts/**/*',
+        './node_modules/@uswds/uswds/dist/img/**/*'
+      ],
+      { base: './node_modules/@uswds/uswds/dist' }
+    )
+    .pipe(gulp.dest('lib'));
+}
+
 function parcelBuildLib(cb) {
   const args = [
     'build',
@@ -104,6 +118,21 @@ function buildStyles() {
         ]
       }).on('error', sass.logError)
     )
+    .pipe(
+      postcss([
+        url({
+          url: (asset) => {
+            if (asset.url.startsWith('../fonts/')) {
+              return asset.url.replace('../fonts/', '/fonts/');
+            }
+            if (asset.url.startsWith('../img/')) {
+              return asset.url.replace('../img/', '/img/');
+            }
+            return asset.url;
+          }
+        })
+      ])
+    )
     .pipe(gulp.dest('lib/styles'));
 }
 
@@ -178,7 +207,12 @@ const parallelTasks =
     ? gulp.parallel(copyFiles, copyUswdsImages)
     : gulp.parallel(copyFiles, copyNetlifyCMS, copyUswdsImages);
 
-module.exports.buildlib = gulp.series(clean, buildStyles, parcelBuildLib);
+module.exports.buildlib = gulp.series(
+  clean,
+  buildStyles,
+  copyUswdsAssets,
+  parcelBuildLib
+);
 
 // Task orchestration used during the production process.
 module.exports.default = gulp.series(

package.json

@@ -182,6 +182,7 @@
     "framer-motion": "^10.12.21",
     "geojson-validation": "^1.0.2",
     "google-polyline": "^1.0.3",
+    "gulp-postcss": "^10.0.0",
     "history": "^5.1.0",
     "intersection-observer": "^0.12.0",
     "jest-environment-jsdom": "^28.1.3",
@@ -202,6 +203,7 @@
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
     "postcss-scss": "^4.0.9",
+    "postcss-url": "^10.1.3",
     "prop-types": "^15.7.2",
     "qs": "^6.10.3",
     "qs-state-hook": "^2.0.0",

postcss.config.js

@@ -1,4 +1,20 @@
-const plugins = [require('autoprefixer'), require('postcss-import')];
+const url = require('postcss-url');
+
+const plugins = [
+  require('autoprefixer'),
+  require('postcss-import'),
+  url({
+    url: (asset) => {
+      if (asset.url.startsWith('../fonts/')) {
+        return `./fonts/${asset.url.slice('../fonts/'.length)}`;
+      }
+      if (asset.url.startsWith('../img/')) {
+        return `./img/${asset.url.slice('../img/'.length)}`;
+      }
+      return asset.url;
+    }
+  })
+];
 
 module.exports = {
   syntax: 'postcss-scss',

yarn.lock

@@ -6387,6 +6387,11 @@ csstype@^3.0.2:
   resolved "http://verdaccio.ds.io:4873/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
   integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
 
+cuint@^0.2.2:
+  version "0.2.2"
+  resolved "http://verdaccio.ds.io:4873/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
+  integrity sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==
+
 d3-array@2, d3-array@^2.3.0:
   version "2.12.1"
   resolved "http://verdaccio.ds.io:4873/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
@@ -7737,6 +7742,13 @@ fancy-log@^1.3.2, fancy-log@^1.3.3:
     parse-node-version "^1.0.0"
     time-stamp "^1.0.0"
 
+fancy-log@^2.0.0:
+  version "2.0.0"
+  resolved "http://verdaccio.ds.io:4873/fancy-log/-/fancy-log-2.0.0.tgz#cad207b8396d69ae4796d74d17dff5f68b2f7343"
+  integrity sha512-9CzxZbACXMUXW13tS0tI8XsGGmxWzO2DmYrGuBJOJ8k8q2K7hwfJA5qHjuPPe8wtsco33YR9wc+Rlr5wYFvhSA==
+  dependencies:
+    color-support "^1.1.3"
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "http://verdaccio.ds.io:4873/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -8441,6 +8453,16 @@ [email protected]:
     postcss-load-config "^3.0.0"
     vinyl-sourcemaps-apply "^0.2.1"
 
+gulp-postcss@^10.0.0:
+  version "10.0.0"
+  resolved "http://verdaccio.ds.io:4873/gulp-postcss/-/gulp-postcss-10.0.0.tgz#a88d7c6602f8a8c94aaa9f28ac3a68def00c7ada"
+  integrity sha512-z1RF2RJEX/BvFsKN11PXai8lRmihZTiHnlJf7Zu8uHaA/Q7Om4IeN8z1NtMAW5OiLwUY02H0DIFl9tHl0CNSgA==
+  dependencies:
+    fancy-log "^2.0.0"
+    plugin-error "^2.0.1"
+    postcss-load-config "^5.0.0"
+    vinyl-sourcemaps-apply "^0.2.1"
+
 [email protected]:
   version "2.0.0"
   resolved "http://verdaccio.ds.io:4873/gulp-rename/-/gulp-rename-2.0.0.tgz#9bbc3962b0c0f52fc67cd5eaff6c223ec5b9cf6c"
@@ -10208,6 +10230,11 @@ [email protected], lilconfig@^2.0.5:
   resolved "http://verdaccio.ds.io:4873/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
 
+lilconfig@^3.1.1:
+  version "3.1.2"
+  resolved "http://verdaccio.ds.io:4873/lilconfig/-/lilconfig-3.1.2.tgz#e4a7c3cb549e3a606c8dcc32e5ae1005e62c05cb"
+  integrity sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "http://verdaccio.ds.io:4873/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -10419,7 +10446,7 @@ lz-string@^1.4.4:
   resolved "http://verdaccio.ds.io:4873/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
 
-make-dir@^3.0.0:
+make-dir@^3.0.0, make-dir@~3.1.0:
   version "3.1.0"
   resolved "http://verdaccio.ds.io:4873/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -11278,6 +11305,11 @@ mime-types@^2.1.12:
   dependencies:
     mime-db "1.52.0"
 
+mime@~2.5.2:
+  version "2.5.2"
+  resolved "http://verdaccio.ds.io:4873/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
+  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "http://verdaccio.ds.io:4873/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -11315,6 +11347,13 @@ minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@~3.0.4:
+  version "3.0.8"
+  resolved "http://verdaccio.ds.io:4873/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
+  integrity sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==
+  dependencies:
+    brace-expansion "^1.1.7"
+
 minimist-options@^4.0.2:
   version "4.1.0"
   resolved "http://verdaccio.ds.io:4873/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
@@ -12160,6 +12199,13 @@ plugin-error@^1.0.1:
     arr-union "^3.1.0"
     extend-shallow "^3.0.2"
 
+plugin-error@^2.0.1:
+  version "2.0.1"
+  resolved "http://verdaccio.ds.io:4873/plugin-error/-/plugin-error-2.0.1.tgz#f2ac92bac8c85e3e23492d76d0c3ca12f30eb00b"
+  integrity sha512-zMakqvIDyY40xHOvzXka0kUvf40nYIuwRE8dWhti2WtjQZ31xAgBZBhxsK7vK3QbRXS1Xms/LO7B5cuAsfB2Gg==
+  dependencies:
+    ansi-colors "^1.0.1"
+
 polished@^3.4.2:
   version "3.7.2"
   resolved "http://verdaccio.ds.io:4873/polished/-/polished-3.7.2.tgz#ec5ddc17a7d322a574d5e10ddd2a6f01d3e767d1"
@@ -12218,6 +12264,14 @@ postcss-load-config@^3.0.0:
     lilconfig "^2.0.5"
     yaml "^1.10.2"
 
+postcss-load-config@^5.0.0:
+  version "5.1.0"
+  resolved "http://verdaccio.ds.io:4873/postcss-load-config/-/postcss-load-config-5.1.0.tgz#4ded23410da973e05edae9d41fa99bb5c1d5477f"
+  integrity sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==
+  dependencies:
+    lilconfig "^3.1.1"
+    yaml "^2.4.2"
+
 postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "http://verdaccio.ds.io:4873/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
@@ -12273,6 +12327,16 @@ postcss-styled-syntax@^0.7.0:
   dependencies:
     typescript "^5.6.3"
 
+postcss-url@^10.1.3:
+  version "10.1.3"
+  resolved "http://verdaccio.ds.io:4873/postcss-url/-/postcss-url-10.1.3.tgz#54120cc910309e2475ec05c2cfa8f8a2deafdf1e"
+  integrity sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==
+  dependencies:
+    make-dir "~3.1.0"
+    mime "~2.5.2"
+    minimatch "~3.0.4"
+    xxhashjs "~0.2.2"
+
 postcss-value-parser@^3.3.0:
   version "3.3.1"
   resolved "http://verdaccio.ds.io:4873/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
@@ -15378,6 +15442,13 @@ xxhash-wasm@^0.4.2:
   resolved "http://verdaccio.ds.io:4873/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz#752398c131a4dd407b5132ba62ad372029be6f79"
   integrity sha512-/eyHVRJQCirEkSZ1agRSCwriMhwlyUcFkXD5TPVSLP+IPzjsqMVzZwdoczLp1SoQU0R3dxz1RpIK+4YNQbCVOA==
 
+xxhashjs@~0.2.2:
+  version "0.2.2"
+  resolved "http://verdaccio.ds.io:4873/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8"
+  integrity sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==
+  dependencies:
+    cuint "^0.2.2"
+
 y18n@^3.2.1:
   version "3.2.2"
   resolved "http://verdaccio.ds.io:4873/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
@@ -15403,6 +15474,11 @@ yaml@^1.10.0, yaml@^1.10.2:
   resolved "http://verdaccio.ds.io:4873/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.4.2:
+  version "2.6.1"
+  resolved "http://verdaccio.ds.io:4873/yaml/-/yaml-2.6.1.tgz#42f2b1ba89203f374609572d5349fb8686500773"
+  integrity sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==
+
 yargs-parser@>=5.0.0-security.0:
   version "21.1.1"
   resolved "http://verdaccio.ds.io:4873/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"