From 5ddda7b10f14e5f28ec6e6f015f5da7ebcd98382 Mon Sep 17 00:00:00 2001 From: Gjore Milevski Date: Fri, 29 Nov 2024 12:39:49 +0100 Subject: [PATCH] Update PostCSS config to correctly resolve asset paths in the bundled CSS module --- app/scripts/styles/styles.scss | 3 ++ gulpfile.js | 36 +++++++++++++++- package.json | 2 + postcss.config.js | 18 +++++++- yarn.lock | 78 +++++++++++++++++++++++++++++++++- 5 files changed, 134 insertions(+), 3 deletions(-) diff --git a/app/scripts/styles/styles.scss b/app/scripts/styles/styles.scss index ccb54becf..925bfd64c 100644 --- a/app/scripts/styles/styles.scss +++ b/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'; diff --git a/gulpfile.js b/gulpfile.js index 8b68e0f38..46534fc26 100644 --- a/gulpfile.js +++ b/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( diff --git a/package.json b/package.json index 2e110784b..f5b19cf2f 100644 --- a/package.json +++ b/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", diff --git a/postcss.config.js b/postcss.config.js index dfb7a2164..6600a770f 100644 --- a/postcss.config.js +++ b/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', diff --git a/yarn.lock b/yarn.lock index 48bd45142..7ef6dc64a 100644 --- a/yarn.lock +++ b/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 @@ gulp-postcss@9.0.1: 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" + gulp-rename@2.0.0: version "2.0.0" resolved "http://verdaccio.ds.io:4873/gulp-rename/-/gulp-rename-2.0.0.tgz#9bbc3962b0c0f52fc67cd5eaff6c223ec5b9cf6c" @@ -10208,6 +10230,11 @@ lilconfig@2.1.0, 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"