Upgrade USWDS to 3.8.0

[TomElliottFlexion]

Acceptance Criteria

• USWDS is updated to version 3.8.0
• Icon spacing issues are resolved (PR here)
• Cypress does not lose styling in snapshots

Pain Avoided/Frustration Saved

• Maintains ability to use Cypress for visual testing

Breadth/Pervasiveness of Problem

• Funky icons are present throughout the UI, all Cypress tests affected

Complexity of Problem (Low, Medium, High) and Why it's Complex

• ???

Notes

• Could be related to a new CSP (seems unlikely)
• Losing style in snapshots is a recurring issue
• Perhaps it's the media links
• Another open Cypress issue
• This seems to indicate that at least some of the issues are related to grid style layout
• Overriding dependencies updated in 3.8.0 does not seem to resolve the issue

[Mwindo]

Wow, this was bizarre. The issue has nothing to do with any of the things listed above.

After some trial and error, I discovered the root of the problem is that there are new SVG icons bundled with USWDS that are interfering with how Cypress injects styles into the DOM snapshots. Here is an example of such an SVG icon:

The <style></style> section in particular is causing problems for Cypress. Here is the garbled CSS that we get within Cypress snapshots due to this "bad" SVG:

When I clean these SVGs up using svgo, the Cypress snapshot issues are resolved.

One way to fix this issue, then, is to use svgo, which is already a dependency of uswds, and clean up the images upon npm i. I.e., put this in package.json:

"postinstall": "husky install && cd ./node_modules/@uswds/uswds/dist/img && npx svgo -r ."

where the && portion is new. I've verified this works locally. I am not yet sure this is the best solution.

[Mwindo]

I opened an issue with USDWS ("Clean up your SVGs, please!") and will ask the team if they have a better solution than the one I posted above.

[Mwindo]

A quick finding:

While everything I said above still holds, I have been investigating what is happening on our end (e.g., when we bundle) that might be contributing to the issue (i.e., trying to answer the question "why are there not more reports of this error from other teams?").

Somehow, it seems the issue with Cypress styles and these SVGs has to do with the fact that they are loaded inline via our esbuild:

    loader: {
      '.html': 'text',
      '.pdf': 'file',
      '.png': 'dataurl',
      '.svg': 'dataurl',
      '.ttf': 'file',
      '.woff': 'file',
      '.woff2': 'file',
    },

If I switch from '.svg': 'dataurl' to '.svg': 'file' (and also set publicPath: '/' because otherwise Cypress cannot locate the image in the DOM via the relative import), everything works.

[Mwindo]

Still waiting on USWDS, but there has been an update.