From b95341cf2b5c4d1ba747fb97c9228905f079c6b4 Mon Sep 17 00:00:00 2001 From: Gjore Milevski Date: Wed, 18 Dec 2024 07:46:04 +0100 Subject: [PATCH 1/4] Decouple the custom styles from USWDS styles in the library bundle --- app/scripts/index.ts | 3 ++- app/scripts/styles/styles.scss | 6 +----- app/scripts/styles/veda-components.scss | 5 +++++ gulpfile.js | 9 +++++---- 4 files changed, 13 insertions(+), 10 deletions(-) create mode 100644 app/scripts/styles/veda-components.scss diff --git a/app/scripts/index.ts b/app/scripts/index.ts index 45c191248..4b6bb156b 100644 --- a/app/scripts/index.ts +++ b/app/scripts/index.ts @@ -33,7 +33,8 @@ import { externalDatasetsAtom } from '$components/exploration/atoms/datasetLayers'; -import './styles/styles.scss'; +// Include only the custom stylings for the VEDA components into the library build +import './styles/veda-components.scss'; // Adding .last property to array /* eslint-disable-next-line fp/no-mutating-methods */ diff --git a/app/scripts/styles/styles.scss b/app/scripts/styles/styles.scss index 9e426c960..fc0fc6f20 100644 --- a/app/scripts/styles/styles.scss +++ b/app/scripts/styles/styles.scss @@ -11,8 +11,4 @@ @use 'usa-modal'; @use 'usa-header'; -// Custom VEDA UI styles should be added here, so that they can be -// picked up by Parcel and included in the final CSS bundle for the veda-ui library. -@use "../components/common/page-header/page-header.scss"; -@use "../components/common/page-header/logo-container/logo-container.scss"; -@use "../components/common/datepicker/datepicker.scss"; +@use './veda-components'; \ No newline at end of file diff --git a/app/scripts/styles/veda-components.scss b/app/scripts/styles/veda-components.scss new file mode 100644 index 000000000..ff21303cc --- /dev/null +++ b/app/scripts/styles/veda-components.scss @@ -0,0 +1,5 @@ +// Custom VEDA UI styles should be added here, so that they can be +// picked up by Parcel and included in the final CSS bundle for the veda-ui library. +@use "../components/common/page-header/page-header.scss"; +@use "../components/common/page-header/logo-container/logo-container.scss"; +@use "../components/common/datepicker/datepicker.scss"; diff --git a/gulpfile.js b/gulpfile.js index 13845a209..62552581c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -29,6 +29,7 @@ process.env.APP_BUILD_TIME = Date.now(); const parcelCli = path.join(__dirname, './node_modules/parcel/lib/cli.js'); const parcelConfig = path.join(__dirname, '.parcelrc'); +const parcelLibConfig = path.join(__dirname, '.parcelrc-lib'); // ///////////////////////////////////////////////////////////////////////////// // ----------------------- Watcher and custom tasks --------------------------// @@ -51,7 +52,7 @@ function watcher() { function clean() { // Remove build cache and dist. - return del(['dist', '.parcel-cache']); + return del(['dist', 'lib', '.parcel-cache']); } // Simple task to copy the static files to the dist directory. The static @@ -84,7 +85,7 @@ function parcelBuildLib(cb) { 'app/scripts/index.ts', '--dist-dir=lib', '--config', - '.parcelrc-lib' + parcelLibConfig ]; const pr = spawn('node', [parcelCli, ...args], { @@ -183,8 +184,8 @@ const parallelTasks = module.exports.buildlib = gulp.series( clean, - copyUswdsAssetsToLibBundle, - parcelBuildLib + parcelBuildLib, + copyUswdsAssetsToLibBundle ); // Task orchestration used during the production process. From 4b78de70086fd3cec64e951103dbfc519f225613 Mon Sep 17 00:00:00 2001 From: Gjore Milevski Date: Wed, 18 Dec 2024 08:48:30 +0100 Subject: [PATCH 2/4] Add USWDS as a peerDependency, move USWDS-related packages under devDependencies --- package.json | 12 ++++++++---- yarn.lock | 12 ++++++------ 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 831ffd913..17e8a4148 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,10 @@ "engines": { "node": ">=18.0.0" }, + "peerDependencies": { + "@uswds/uswds": "^3.8.1", + "@trussworks/react-uswds": "^9.0.0" + }, "devDependencies": { "@babel/core": "^7.16.0", "@babel/eslint-parser": "^7.16.0", @@ -112,7 +116,10 @@ "stylelint-config-recommended": "^14.0.1", "stylelint-config-standard-scss": "^13.1.0", "ts-jest": "^28.0.7", - "typescript": "^4.5.5" + "typescript": "^4.5.5", + "@uswds/compile": "^1.1.0", + "@uswds/uswds": "^3.8.1", + "@trussworks/react-uswds": "^9.0.0" }, "resolutions": { "@types/react": "18.0.32" @@ -147,7 +154,6 @@ "@tanstack/react-query-devtools": "^4.3.9", "@tanstack/react-table": "^8.9.3", "@tippyjs/react": "^4.2.6", - "@trussworks/react-uswds": "^9.0.0", "@turf/area": "^6.5.0", "@turf/bbox": "^6.5.0", "@turf/bbox-polygon": "^6.5.0", @@ -164,8 +170,6 @@ "@types/react": "18.0.32", "@types/react-dom": "18.0.11", "@types/styled-components": "^5.1.26", - "@uswds/compile": "^1.1.0", - "@uswds/uswds": "^3.8.1", "autoprefixer": "^10.4.19", "axios": "^0.25.0", "clipboard": "^2.0.11", diff --git a/yarn.lock b/yarn.lock index 480a48781..1e8e6c43d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11378,7 +11378,7 @@ macos-release@^3.1.0: resolved "http://verdaccio.ds.io:4873/macos-release/-/macos-release-3.3.0.tgz#92cb67bc66d67c3fde4a9e14f5f909afa418b072" integrity sha512-tPJQ1HeyiU2vRruNGhZ+VleWuMQRro8iFtJxYgnS4NQe+EukKF6aGiIT+7flZhISAt2iaXBCfFGvAyif7/f8nQ== -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== @@ -13400,10 +13400,10 @@ postcss-selector-parser@^6.0.6: cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-selector-parser@^6.1.2: - version "6.1.2" - resolved "http://verdaccio.ds.io:4873/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de" - integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg== +postcss-selector-parser@^7.0.0: + version "7.0.0" + resolved "http://verdaccio.ds.io:4873/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz#41bd8b56f177c093ca49435f65731befe25d6b9c" + integrity sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ== dependencies: cssesc "^3.0.0" util-deprecate "^1.0.2" @@ -16895,7 +16895,7 @@ yaml@^2.4.2: 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: +yargs-parser@21.1.1, 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" integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw== From 32a906ba9ccd89a3e4a1e2f0c93fbadd204d359b Mon Sep 17 00:00:00 2001 From: Gjore Milevski Date: Wed, 18 Dec 2024 16:34:00 +0100 Subject: [PATCH 3/4] Impor the banner styles --- app/scripts/styles/veda-components.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/scripts/styles/veda-components.scss b/app/scripts/styles/veda-components.scss index ff21303cc..a95d1a174 100644 --- a/app/scripts/styles/veda-components.scss +++ b/app/scripts/styles/veda-components.scss @@ -2,4 +2,5 @@ // picked up by Parcel and included in the final CSS bundle for the veda-ui library. @use "../components/common/page-header/page-header.scss"; @use "../components/common/page-header/logo-container/logo-container.scss"; +@use "../components/common/banner/banner.scss"; @use "../components/common/datepicker/datepicker.scss"; From 93270da0297b0841022cc9081aa7d3f749b9862c Mon Sep 17 00:00:00 2001 From: Gjore Milevski Date: Thu, 19 Dec 2024 11:07:25 +0100 Subject: [PATCH 4/4] Resolve conflict, adjust react-uswds as a dependency --- package.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 277568dbb..be020b525 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,7 @@ "node": ">=18.0.0" }, "peerDependencies": { - "@uswds/uswds": "^3.8.1", - "@trussworks/react-uswds": "^9.0.0" + "@uswds/uswds": "^3.8.1" }, "devDependencies": { "@babel/core": "^7.26.0", @@ -126,7 +125,6 @@ "stylelint-config-standard-scss": "^13.1.0", "@uswds/compile": "^1.1.0", "@uswds/uswds": "^3.8.1", - "@trussworks/react-uswds": "^9.0.0", "ts-jest": "^29.2.5", "typescript": "4.8.4" }, @@ -245,6 +243,7 @@ "shpjs": "^4.0.4", "styled-components": "^5.3.3", "tippy.js": "^6.3.7", + "@trussworks/react-uswds": "^9.0.0", "use-deep-compare": "^1.1.0", "xlsx": "^0.18.5" },