chore(deps-dev): bump prettier from 2.8.8 to 3.0.1 (#3626)

* chore(deps-dev): bump prettier from 2.8.8 to 3.0.1

Bumps [prettier](https://github.com/prettier/prettier) from 2.8.8 to 3.0.1.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](prettier/prettier@2.8.8...3.0.1)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>

* chore: add prettier/sync for build script

* chore(format): run prettier

* chore(deps): update eslint-plugin-prettier to 5.x

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <[email protected]>

package.json

@@ -138,6 +138,7 @@
     "@github/markdownlint-github": "^0.3.0",
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "1.36.0",
+    "@prettier/sync": "0.3.0",
     "@primer/css": "^21.0.1",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-commonjs": "25.0.0",
@@ -199,7 +200,7 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-mdx": "2.0.5",
     "eslint-plugin-playwright": "0.15.1",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-primer-react": "4.0.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -233,7 +234,7 @@
     "micromark-extension-mdxjs": "1.0.1",
     "postcss-custom-properties-fallback": "1.0.2",
     "postcss-preset-env": "9.0.0",
-    "prettier": "2.8.8",
+    "prettier": "3.0.1",
     "primer-changesets-cli": "2.2.1",
     "react": "18.2.0",
     "react-dnd": "14.0.4",

script/components-json/build.ts

@@ -7,7 +7,7 @@ import {pascalCase} from 'change-case'
 import glob from 'fast-glob'
 import fs from 'fs'
 import keyBy from 'lodash.keyby'
-import prettier from 'prettier'
+import prettier from '@prettier/sync'
 import componentSchema from './component.schema.json'
 import outputSchema from './output.schema.json'
 

src/AvatarStack/AvatarStack.tsx

@@ -49,7 +49,10 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     box-shadow: 0 0 0 var(--avatar-border-width) ${get('colors.canvas.default')};
     position: relative;
     overflow: hidden;
-    transition: margin 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
+    transition:
+      margin 0.2s ease-in-out,
+      opacity 0.2s ease-in-out,
+      visibility 0.2s ease-in-out,
       box-shadow 0.1s ease-in-out;
 
     &:first-child {