USWDS-Compile - Dependencies: GulpJS v5

mejiaj commented 4 months ago

Updating GulpJS from v4 to v5. Closes #99.

Before (develop)

14 vulnerabilities (3 moderate, 11 high)

After

3 moderate severity vulnerabilities

Previews

USWDS-Sandbox: Homepage (Fonts & Icons)
USWDS-Sandbox: Prose (Fonts & Banner flag)
USWDS-Site (Font & Banner flag)

Testing

uswds/uswds-site#2719
uswds/uswds-sandbox#141

Possible regressions

Issues with assets and compile

Details

>## Possible regression >I tested updating Gulp to 5.0.0 in https://github.com/uswds/uswds-compile/pull/101. When installing the branch on our Site and Sandbox repos, I saw a possible regression in Sandbox when trying to run the copyAssets and copyImages compile scripts. The images would become corrupt and not be able to open properly. For whatever reason, this was not an issue on our Site repo. [Source →](https://github.com/uswds/uswds-compile/issues/99#issuecomment-2124906748).

Regressions in Sandbox with copyAssets and copyImages resulting in regressions and corrupted images.

1. Missing flag in Site

[x] Confirmed in Sandbox preview → PR: [test] USWDS-Sandbox - Dependencies: Test USWDS Compile gulp 5

2. Missing icons in Sandbox

Wasn't able to reproduce. Tested with/without encoding in 424d9a4 and 294b40b.

3. Font rendering

Details

>When I https://github.com/uswds/uswds-site/pull/2719, I noticed that the fonts no longer rendered correctly (See screenshot below). When I tested reverting the branch to version ^1.1.0, the fonts rendered correctly again. [Source →](https://github.com/uswds/uswds-compile/pull/96#pullrequestreview-2132745992)

Confirmed in Site and Sandbox. Fonts were corrupted and not rendering correctly on site.

[x] Confirmed in Sandbox preview → PR: [test] USWDS-Sandbox - Dependencies: Test USWDS Compile gulp 5
[x] Confirmed in Site preview → PR: [Test] Install uswds-compile w/ gulp 5 - Fixed in 108865f

mahoneycm commented 1 month ago

Confirming that I'm seeing similar compilation errors in both Sandbox and Site surrounding image and font compilation.

Img compilation error

Banner missing American flag icon

Various img’s in assets folder are failing to load/compile:

circle-124.png
hero.jpg
hero.webp
logo-img
us_flag_small.png

Looks like all other nested images are compiling fine, just a few in the root assets folder are missing.

Font compilation error

Console errors

Installing Gulp5 on Site reduces the number of errors but I see the same results on the page.

Trying to open the fonts files in VS code gives the following error:

The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.

mejiaj commented 1 month ago

I was able to confirm the following issues:

[x] Fonts corrupt/not rendering
[x] Images corrupt/not rendering
[ ] Icon regressions test page

Any help reproducing icon issue would be appreciated.

CC @amyleadem @mahoneycm

mdmower-csnw commented 1 month ago

@mejiaj - Oooh, super important, critical, drop-everything-the-project-is-on-fire change still needs to be made along with this PR... the readme needs to change "Gulp 4" to "Gulp 5"! 😉

angeliquejw commented 1 month ago

Is there a timeline for when these changes will also be pushed to the package?

annepetersen commented 1 month ago

(I don't have the best info to answer your question, but: hi @angeliquejw! good to "see" you 👋)

uswds / uswds-compile