Upgrade Prettier to v3 (#9289)

* Upgrade Prettier to v3

changelog: Internal, Dependencies, Update dependencies to latest versions

* Update normalize specs

* Use consistent syntax for version ranges

* Upgrade stylelint-prettier

* Update yarn.lock

app/assets/stylesheets/components/_btn.scss

@@ -16,7 +16,15 @@
 
 .usa-button:disabled.usa-button--active,
 .usa-button--disabled.usa-button--active {
-  &:not(.usa-button--unstyled, .usa-button--secondary, .usa-button--accent-cool, .usa-button--accent-warm, .usa-button--base, .usa-button--outline, .usa-button--inverse) {
+  &:not(
+      .usa-button--unstyled,
+      .usa-button--secondary,
+      .usa-button--accent-cool,
+      .usa-button--accent-warm,
+      .usa-button--base,
+      .usa-button--outline,
+      .usa-button--inverse
+    ) {
     @include set-text-and-bg('primary-darker', $context: 'Button');
   }
 }

app/javascript/packages/form-steps/form-steps.tsx

@@ -315,29 +315,32 @@ function FormSteps({
    * Returns array of form errors for the current set of values.
    */
   function getValidationErrors(): FormStepError<Record<string, Error>>[] {
-    return Object.keys(fields.current).reduce((result, key) => {
-      const { element, isRequired } = fields.current[key];
-      const isActive = !!element;
-
-      let error: Error | undefined;
-      if (isActive) {
-        if (element instanceof HTMLInputElement) {
-          element.checkValidity();
+    return Object.keys(fields.current).reduce(
+      (result, key) => {
+        const { element, isRequired } = fields.current[key];
+        const isActive = !!element;
+
+        let error: Error | undefined;
+        if (isActive) {
+          if (element instanceof HTMLInputElement) {
+            element.checkValidity();
+          }
+
+          if (element instanceof HTMLInputElement && element.validationMessage) {
+            error = new Error(element.validationMessage);
+          } else if (isRequired && !values[key]) {
+            error = new RequiredValueMissingError();
+          }
         }
 
-        if (element instanceof HTMLInputElement && element.validationMessage) {
-          error = new Error(element.validationMessage);
-        } else if (isRequired && !values[key]) {
-          error = new RequiredValueMissingError();
+        if (error) {
+          result = result.concat({ field: key, error });
         }
-      }
-
-      if (error) {
-        result = result.concat({ field: key, error });
-      }
 
-      return result;
-    }, [] as FormStepError<Record<string, Error>>[]);
+        return result;
+      },
+      [] as FormStepError<Record<string, Error>>[],
+    );
   }
 
   // An empty steps array is allowed, in which case there is nothing to render.

app/javascript/packages/normalize-yaml/CHANGELOG.md

@@ -0,0 +1,10 @@
+## Unreleased
+
+### Breaking Changes
+
+- `normalize` method now returns a `Promise`, resolving to a `string`
+- `prettier` peer dependency now requires v3 or newer
+
+## v1.0.0
+
+- Initial release

app/javascript/packages/normalize-yaml/README.md

@@ -49,9 +49,9 @@ yarn normalize-yaml path/to/file.yml --disable-sort-keys
 
 ### API
 
-#### `normalize(content: string, config?: Options): string`
+#### `normalize(content: string, config?: Options): Promise<string>`
 
-Given an input YAML string and optional options, returns a normalized YAML string.
+Given an input YAML string and optional options, resolves to a normalized YAML string.
 
 **Options:**
 

app/javascript/packages/normalize-yaml/cli.js

@@ -10,7 +10,7 @@ import normalize from './index.js';
 const { readFile, writeFile } = fsPromises;
 
 /** @type {Record<string,any>=} */
-const prettierConfig = prettier.resolveConfig.sync(process.cwd());
+const prettierConfig = (await prettier.resolveConfig(process.cwd())) || undefined;
 
 const args = process.argv.slice(2);
 const files = args.filter((arg) => !arg.startsWith('-'));
@@ -34,7 +34,7 @@ await Promise.all(
     const absolutePath = join(process.cwd(), relativePath);
     const content = await readFile(absolutePath, 'utf8');
     try {
-      await writeFile(absolutePath, normalize(content, options));
+      await writeFile(absolutePath, await normalize(content, options));
     } catch (error) {
       console.error(`Error normalizing ${relativePath}: ${error.message}`);
       exitCode = 1;

app/javascript/packages/normalize-yaml/index.js

@@ -12,12 +12,12 @@ import { getVisitors } from './visitors/index.js';
  */
 
 /**
- * Given an input YAML string and optional options, returns a normalized YAML string.
+ * Given an input YAML string and optional options, resolves to a normalized YAML string.
  *
  * @param {string} content Original content.
  * @param {NormalizeOptions} options Normalize options.
  *
- * @return {string} Normalized content.
+ * @return {Promise<string>} Normalized content.
  */
 function normalize(content, { prettierConfig, exclude } = {}) {
   const document = YAML.parseDocument(content);

app/javascript/packages/normalize-yaml/index.spec.js

@@ -1,39 +1,39 @@
 import normalize from './index.js';
 
 describe('normalize', () => {
-  it('applies smart quotes', () => {
+  it('applies smart quotes', async () => {
     const original = '---\na: \'<strong class="example...">Hello "world"...</strong>\'';
     const expected = '---\na: \'<strong class="example...">Hello “world”…</strong>\'\n';
 
-    expect(normalize(original)).to.equal(expected);
+    expect(await normalize(original)).to.equal(expected);
   });
 
-  it('retains comments', () => {
+  it('retains comments', async () => {
     const original = '---\n# Comment\na: true';
     const expected = '---\n# Comment\na: true\n';
 
-    expect(normalize(original)).to.equal(expected);
+    expect(await normalize(original)).to.equal(expected);
   });
 
-  it('sorts keys', () => {
+  it('sorts keys', async () => {
     const original = '---\nmap:\n  b: false\n  a: true';
     const expected = '---\nmap:\n  a: true\n  b: false\n';
 
-    expect(normalize(original)).to.equal(expected);
+    expect(await normalize(original)).to.equal(expected);
   });
 
-  it('formats using prettier', () => {
+  it('formats using prettier', async () => {
     const original = "---\nfoo:  'bar' ";
     const expected = '---\nfoo: "bar"\n';
     const prettierConfig = { singleQuote: false };
 
-    expect(normalize(original, { prettierConfig })).to.equal(expected);
+    expect(await normalize(original, { prettierConfig })).to.equal(expected);
   });
 
-  it('allows formatting with excluded formatters', () => {
+  it('allows formatting with excluded formatters', async () => {
     const original = '---\nmap:\n  b: ...\n  a: ...';
     const expected = '---\nmap:\n  a: ...\n  b: ...\n';
 
-    expect(normalize(original, { exclude: ['smartPunctuation'] })).to.equal(expected);
+    expect(await normalize(original, { exclude: ['smartPunctuation'] })).to.equal(expected);
   });
 });

app/javascript/packages/normalize-yaml/package.json

@@ -37,6 +37,6 @@
     "yaml": "^2.3.1"
   },
   "peerDependencies": {
-    "prettier": "*"
+    "prettier": ">=3"
   }
 }

app/javascript/packages/step-indicator/step-indicator-element.spec.ts

@@ -54,7 +54,7 @@ describe('StepIndicatorElement', () => {
         (element) =>
           ({
             paddingLeft: element.classList.contains('step-indicator__scroller') ? '24px' : '0',
-          } as CSSStyleDeclaration),
+          }) as CSSStyleDeclaration,
       );
       defineProperty(window.Element.prototype, 'scrollWidth', {
         get() {

app/javascript/packages/stylelint-config/CHANGELOG.md

@@ -1,3 +1,12 @@
+## Unreleased
+
+### Breaking Changes
+
+- Breaking changes included in updated dependencies:
+  - [`stylelint-prettier`](https://github.com/prettier/stylelint-prettier/blob/main/CHANGELOG.md):
+    - Minimum supported `prettier` version is now `v3.0.0`.
+    - Minimum supported `stylelint` version is now `v15.8.0`.
+
 ## 2.0.0
 
 ### Breaking Changes

app/javascript/packages/stylelint-config/package.json

@@ -18,7 +18,7 @@
   "homepage": "https://github.com/18f/identity-idp",
   "dependencies": {
     "stylelint-config-recommended-scss": "^10.0.0",
-    "stylelint-prettier": "^3.0.0"
+    "stylelint-prettier": "^4.0.2"
   },
   "peerDependencies": {
     "prettier": "*",

package.json

@@ -72,15 +72,15 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-mocha": "^10.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jsdom": "^22.1.0",
     "mocha": "^10.0.0",
     "mq-polyfill": "^1.1.8",
     "msw": "^1.2.1",
     "postcss": "^8.4.22",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.3",
     "quibble": "^0.6.17",
     "react-test-renderer": "^17.0.2",
     "sinon": "^14.0.0",