USWDS - Dependencies: Update eslint, prettier, stylelint and dependencies

[anselmbradford]

Summary

• Update eslint, prettier, and stylelint, and bump dependencies.
• Move stylelint config to an ESM module.
• Update CSS formatting changes flagged by the linter.

Dependency updates

Dependency name	Previous version	New version
@18f/identity-stylelint-config	2.0.0	4.0.0
eslint	8.52.0	8.56.0
eslint-plugin-import	2.29.0	2.29.1
prettier	2.8.8	3.2.5
stylelint	15.11.0	16.5.0

[mejiaj]

Thanks for submitting this!

Adding to 3.9.0 milestone and noting that eslint-config-prettier was updated in 9054094.

[mahoneycm]

Thanks for your work here @anselmbradford! Do you have any availability to pull the latest from USWDS devlop and resolve the merge conflicts?

Additionally, I see the following message when running the lint:sass script:

`output` is deprecated. Use `report` or `code` instead.

It looks like this could be resolved by replacing output with report on lintSass.js

uswds/tasks/lint.js

Lines 42 to 53 in 98566ec

	async function lintSass(callback) {
	const { errored, output } = await stylelint.lint({
	files: [
	`${PROJECT_SASS_SRC}/**/*.scss`,
	`!${PROJECT_SASS_SRC}/uswds/**/*.scss`,
	`!${PROJECT_SASS_SRC}/uswds-elements/lib/**/*.scss`,
	],
	formatter: "string",
	});
	callback(errored ? new Error(output) : null);
	}

If you could make those changes it'd help us get this into the design system quicker! But if not, let us know and we'll create a new PR with your contribution 👍

[mahoneycm]

Adding trailing commas to all multi-line statements

The new version of prettier updates the trailingCommas default to all. As you can see from the changed files, this adds additional commas to about 83 pages.

This blog post is a quick and easy read that outlines the benefit of adding these trailing commas. After reading it, I'm lean towards keeping the new standard for our code styles.

If we decide we don't want to keep the trailing commas for all lines, we can create a .prettierconfig file or use a flag to set the trailingCommas value to es5

[anselmbradford]

@mahoneycm I'll aim to update this soon. May not be able to get to it today though.

[mahoneycm]

@anselmbradford no immediate rush! I appreciate your work and the response 👍

[anselmbradford]

@mahoneycm I've updated this. There seems to be a circle ci failure that looks unrelated to this PR?

EDIT: actually, I regenerated the package-lock.json and there are changes, so let's see how 8f0d5b2 fares.

EDIT2: Hmm, nope didn't help. Do you see what I am missing?

[mahoneycm]

Hey there @anselmbradford,

This was tricky but it looks like it can be resolved by installing sass-embedded's optionalDependencies

uswds/package-lock.json

Lines 25373 to 25382 in 519108c

	"optionalDependencies": {
	"sass-embedded-darwin-arm64": "1.69.5",
	"sass-embedded-darwin-x64": "1.69.5",
	"sass-embedded-linux-arm": "1.69.5",
	"sass-embedded-linux-arm64": "1.69.5",
	"sass-embedded-linux-ia32": "1.69.5",
	"sass-embedded-linux-x64": "1.69.5",
	"sass-embedded-win32-ia32": "1.69.5",
	"sass-embedded-win32-x64": "1.69.5"
	}

I was able to confirm that we have the sass-embedded-darwin-arm64 directory in our node_modules on the develop branch, which is missing on this branch.

You can add it to your package-lock.json without needing to define it in package.json by running:

 npm install sass-embedded --save-exact --include=dev    

After this, I was able to install, build, and start the project without error 👍

[anselmbradford]

@mahoneycm Thanks! Updated the PR (and also ran some Prettier fixes I missed)

[mahoneycm]

Thanks for these updates @anselmbradford ! Planning to discuss our position on the trailing commas on all lines today and will be able to update this PR with our decision by EOD

[mejiaj]

Question on the decision behind the stylelint config change, otherwise LGTM.

[mahoneycm]

Lgtm! Thanks for your effort here and the quick respones @anselmbradford

Testing checklist

• npm install runs without error
• Linters run without error
• Prettier runs without error
• New trailingComma Prettier default adds value to code styles

Note

Stylelint CommonJS Node.js API is deprecated
This isn't an issue for this version of Stylelint (16.5.0) but will prevent us from updating to the next major version unless we migrate to ESM. ¹

Footnotes

1. Stylint: Deprecated CommonJS API ↩

[anselmbradford]

Thanks @mahoneycm - What happens now, in terms of getting this merged?

[mahoneycm]

@anselmbradford We'll get one more peer review and then move it onto our Final Fed review to be included in the upcoming release.

We have this slated for 3.8.1 which we're in the process of finalizing so you should see additional updates soon 👍

[amyleadem]

Looks good to me! Thanks for submitting this PR.

I performed the following tests:

• Run npm install without error
• Run npm run prettier without error and without changes in files
• Run npm run lint without error and without changes in files
• Run npm run start without error and confirm it builds
• Review file changes
• Merge in the changes from POAM April 24 and confirm no conflicts or issues
• Install on uswds-site and confirm no issues

[anselmbradford]

@mahoneycm @amyleadem I noticed the package-lock.json in this PR is removing the resolved and integrity entries. This appears be a known possible bug in npm npm/cli#6301. I followed the steps on npm/cli#4263 (comment) to flush and regenerate everything and it does, in fact, bring back the resolved and integrity fields, but also does some additions/deletions and sub-dependency bumps (maybe because package-lock.json hasn't been cleared in awhile?). What would you like to see happen with this? Maybe the whole thing should be flushed higher up than this PR in the aggregate 3.8.1 release branch (if that's a thing)? Or would you like me to push up the flushed out package-lock.json here? Or something else?

[mahoneycm]

@anselmbradford it sounds like our best option would be to flush out the cache once all of the dependency updates from this PR and our monthly POAM updates are merged into develop. This way, we can ensure it's the most up-to-date with the release

Thank you for the detailed explanation and additional links! For this PR, I'd say let's leave it as isolated as we can and avoid any additional dependency bumps if possible.

I've created #5929 to keep track of this! I'll complete the steps when all dependency updates are merged 👍

[thisisdano]

Sure are a lot of commas to check... but beyond that, there's one formatting rule I don't really understand, which seems to be expanding the the last function in a multifiunction expression? What's that meant to do?

[thisisdano]

This type of formatting rule doesn't make sense to me

[thisisdano]

I don't understand this formatting rule

[thisisdano]

I don't understand this formatting rule

[thisisdano]

Looks like those reformats above are coming from an 80-char max line-length rule. We can leave as-is.