USWDS-Compile - Dependencies: GulpJS v5 #96

mejiaj · 2024-04-05T20:14:57Z

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

[Test] USWDS-Site - Dependencies: Install uswds-compile w/ gulp 5 uswds-site#2719
[test] USWDS-Sandbox - Dependencies: Test USWDS Compile gulp 5 uswds-sandbox#141

Possible regressions

Issues with assets and compile

Details

Possible regression

I tested updating Gulp to 5.0.0 in #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 →.

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

1. Missing flag in Site

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 uswds/uswds-site#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 →

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

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

amyleadem

Confirmed that I could successfully perform all the gulp tasks in the uswds-sandbox test branch
Confirmed that I could successfully perform gulp tasks after installing on uswds-site
- When I installed this branch on uswds-site, 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.
- Also, noting that to get the gulp watchSass task to run without error, I needed to remove gulp 4 from the package.json in the uswds-site repo.
Confirmed the vulnerabilities listed in the PR description are accurate and up-to-date

Follow-up tasks

The documentation on the Phase 2: Compile page specifically mentions to tool using Gulp 4. We should be sure to update that after this PR is merged.

mahoneycm · 2024-07-01T17:01:32Z

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.

Addresses compression and loading issues in browsers. Example browser errors: - `Failed to decode downloaded font: <URL>` - `OTS parsing error: Failed to convert WOFF 2.0 font to SFNT`

Resolves broken image issue in Cloud Page previews

Resolves 404 issues in Cloud Page previews

mejiaj · 2024-07-01T21:33:40Z

gulpfile.js

@@ -255,6 +261,7 @@ function buildSprite() {
 function renameSprite() {
  return src(`${paths.dist.img}/usa-icons.svg`.replace("//", "/"), {
    allowEmpty: true,
+    encoding: false


Note
Didn't notice any difference here. Keeping because SVGs it still following recommendation for removing encoding from images.

mejiaj · 2024-07-01T21:42:49Z

I was able to confirm the following issues:

Fonts corrupt/not rendering
Images corrupt/not rendering
Icon regressions test page

Any help reproducing icon issue would be appreciated.

CC @amyleadem @mahoneycm

mejiaj · 2024-07-02T13:42:14Z

gulpfile.js

+    return src(`${getSrcFrom("fonts")}/**/**`.replace("//", "/"), {
+      encoding: false,
+    }).pipe(dest(paths.dist.fonts));


Avoids corruption on images and fonts.

More info here: gulpjs/gulp#2803

Good catch! And thanks for the reference link 👏

mahoneycm

This is looking great!

Previous Sandbox regressions resolved
Previous Site regressions resolved
Scripts run without error
Update resolves a high severity dependency vulnerability

Also noting that I never observed any icon regression that you mentioned being unable to reproduce. All the img regressions I saw were specifically jpg, png, or webp files specifically in the /assets/img/ directory which have since been resolved 👍

amyleadem

Looks good to me! Thanks for your work on this. 👏

In both uswds-site and uswds-sandbox test branches, I was able to confirm:

Fonts appear to render correctly
Images appear to render correctly
No console errors
Able to successfully run gulp tasks

Also:

Confirm return src() calls in gulpfile.js turn off encoding for images and fonts (thanks for the helpful note, @mejiaj!)

amyleadem · 2024-07-02T20:52:05Z

gulpfile.js

+    return src(`${getSrcFrom("fonts")}/**/**`.replace("//", "/"), {
+      encoding: false,
+    }).pipe(dest(paths.dist.fonts));


Good catch! And thanks for the reference link 👏

heymatthenry

LGTM 🚀

mdmower-csnw · 2024-07-19T17:02:52Z

@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 · 2024-07-19T17:51:16Z

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

annepetersen · 2024-07-19T18:25:53Z

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

Use GulpJS v5

42b262f

mejiaj mentioned this pull request Apr 9, 2024

[Snyk] Security upgrade gulp from 4.0.2 to 5.0.0 #94

Closed

mejiaj mentioned this pull request Jun 17, 2024

[test] USWDS-Sandbox - Dependencies: Test USWDS Compile gulp 5 uswds/uswds-sandbox#141

Closed

Merge branch 'develop' of github.com:uswds/uswds-compile into jm-gulp5

0698d56

mejiaj marked this pull request as ready for review June 17, 2024 19:02

mejiaj requested review from thisisdano and amyleadem June 17, 2024 19:02

mejiaj added this to the compile 1.2.0 milestone Jun 17, 2024

amyleadem mentioned this pull request Jun 21, 2024

USWDS-Compile: Add PR template #107

Merged

amyleadem requested changes Jun 21, 2024

View reviewed changes

amyleadem requested a review from mahoneycm June 27, 2024 15:40

Disable encoding on fonts

4d9a658

Addresses compression and loading issues in browsers. Example browser errors: - `Failed to decode downloaded font: <URL>` - `OTS parsing error: Failed to convert WOFF 2.0 font to SFNT`

mejiaj mentioned this pull request Jul 1, 2024

[Test] USWDS-Site - Dependencies: Install uswds-compile w/ gulp 5 uswds/uswds-site#2719

Draft

mejiaj added 2 commits July 1, 2024 15:54

Remove encoding from imported images

43277fc

Resolves broken image issue in Cloud Page previews

Remove encoding for icons

91dad33

Resolves 404 issues in Cloud Page previews

mejiaj commented Jul 1, 2024

View reviewed changes

mejiaj requested a review from amyleadem July 1, 2024 21:42

mejiaj commented Jul 2, 2024

View reviewed changes

mahoneycm approved these changes Jul 2, 2024

View reviewed changes

This was referenced Jul 2, 2024

[Snyk] Security upgrade gulp from 4.0.2 to 5.0.0 #106

Closed

[Snyk] Security upgrade gulp from 4.0.2 to 5.0.0 #100

Closed

[Snyk] Security upgrade gulp from 4.0.2 to 5.0.0 #102

Closed

[Snyk] Security upgrade gulp from 4.0.2 to 5.0.0 #108

Closed

amyleadem approved these changes Jul 2, 2024

View reviewed changes

This was referenced Jul 8, 2024

POAM - July '24 uswds/uswds-team#370

Closed

USWDS - POAM: August '24 uswds/uswds#5972

Merged

USWDS-Sandbox - POAM: August '24 uswds/uswds-sandbox#144

Merged

USWDS-Compile - POAM: July '24 #109

Merged

amyleadem requested a review from heymatthenry July 9, 2024 18:12

heymatthenry approved these changes Jul 10, 2024

View reviewed changes

mejiaj merged commit 2d7750a into develop Jul 15, 2024
1 check passed

mejiaj deleted the jm-gulp5 branch July 15, 2024 15:42

This was referenced Jul 15, 2024

USWDS-Compile - Gulp: Support disabling sass sourcemaps #103

Merged

USWDS-Compile - Bug: Platform specific sass-embedded modules are missing from package lock #110

Closed

mahoneycm mentioned this pull request Aug 5, 2024

Bump braces and gulp #105

Closed

amyleadem mentioned this pull request Aug 30, 2024

USWDS Compile 1.2.0 #117

Merged

mahoneycm mentioned this pull request Oct 23, 2024

Public-sans - POAM: September '24 uswds/public-sans#315

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

USWDS-Compile - Dependencies: GulpJS v5 #96

USWDS-Compile - Dependencies: GulpJS v5 #96

mejiaj commented Apr 5, 2024 •

edited

Loading

amyleadem left a comment

mahoneycm commented Jul 1, 2024

mejiaj Jul 1, 2024

mejiaj commented Jul 1, 2024

mejiaj Jul 2, 2024

amyleadem Jul 2, 2024

mahoneycm left a comment

amyleadem left a comment

amyleadem Jul 2, 2024

heymatthenry left a comment

mdmower-csnw commented Jul 19, 2024

angeliquejw commented Jul 19, 2024

annepetersen commented Jul 19, 2024

USWDS-Compile - Dependencies: GulpJS v5 #96

USWDS-Compile - Dependencies: GulpJS v5 #96

Conversation

mejiaj commented Apr 5, 2024 • edited Loading

Previews

Testing

Possible regressions

Issues with assets and compile

Possible regression

amyleadem left a comment

Choose a reason for hiding this comment

Follow-up tasks

mahoneycm commented Jul 1, 2024

Img compilation error

Font compilation error

mejiaj Jul 1, 2024

Choose a reason for hiding this comment

mejiaj commented Jul 1, 2024

mejiaj Jul 2, 2024

Choose a reason for hiding this comment

amyleadem Jul 2, 2024

Choose a reason for hiding this comment

mahoneycm left a comment

Choose a reason for hiding this comment

amyleadem left a comment

Choose a reason for hiding this comment

amyleadem Jul 2, 2024

Choose a reason for hiding this comment

heymatthenry left a comment

Choose a reason for hiding this comment

mdmower-csnw commented Jul 19, 2024

angeliquejw commented Jul 19, 2024

annepetersen commented Jul 19, 2024

mejiaj commented Apr 5, 2024 •

edited

Loading