Bump Prettier from 2.8.8 to 3.0.0 (#9304)

* Account for issues caused by Prettier v3.0 API changes * Bump Prettier from 2.8.8 to 3.0.0 * Fix playground * Set trailingComma: es5 (for now) * Bump stylelint-prettier from 3.0.0 to 4.0.0 * Format files with Prettier * Add comment stating why we're using one .mjs import --------- Co-authored-by: Leo McArdle <[email protected]>
mdn · Jul 14, 2023 · d513c79 · d513c79
1 parent 9f237bd
commit d513c79
Show file tree

Hide file tree

Showing 25 changed files with 115 additions and 81 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
+  "trailingComma": "es5",
   "overrides": [
     {
       "files": ["**/package.json"],

diff --git a/build/blog.ts b/build/blog.ts
@@ -217,13 +217,9 @@ export const allPostFrontmatter = memoize(
   }: { includeUnpublished?: boolean } = {}): Promise<BlogPostFrontmatter[]> => {
     return (
       await Promise.all(
-        (
-          await allPostFiles()
-        ).map(
+        (await allPostFiles()).map(
           async (file) =>
-            (
-              await readPost(file, { previousNext: false })
-            ).blogMeta
+            (await readPost(file, { previousNext: false })).blogMeta
         )
       )
     )

diff --git a/build/cli.ts b/build/cli.ts
@@ -315,8 +315,9 @@ async function buildDocuments(
 
   const allBrowserCompat = new Set<string>();
   Object.values(metadata).forEach((localeMeta) =>
-    localeMeta.forEach((doc) =>
-      doc.browserCompat?.forEach((query) => allBrowserCompat.add(query))
+    localeMeta.forEach(
+      (doc) =>
+        doc.browserCompat?.forEach((query) => allBrowserCompat.add(query))
     )
   );
   fs.writeFileSync(

diff --git a/build/flaws/index.ts b/build/flaws/index.ts
@@ -315,7 +315,7 @@ export async function fixFixableFlaws(doc: Partial<Doc>, options, document) {
         )
       );
     } else {
-      Document.update(document.url, newRawBody, document.metadata);
+      await Document.update(document.url, newRawBody, document.metadata);
       if (options.fixFlawsVerbose) {
         console.log(
           chalk.green(

diff --git a/build/index.ts b/build/index.ts
@@ -537,8 +537,8 @@ function addBaseline(doc: Partial<Doc>): WebFeatureStatus | undefined {
     for (const feature of Object.values<WebFeature>(webFeatures)) {
       if (
         feature.status &&
-        feature.compat_features?.some((query) =>
-          doc.browserCompat?.includes(query)
+        feature.compat_features?.some(
+          (query) => doc.browserCompat?.includes(query)
         )
       ) {
         return feature.status;
@@ -570,9 +570,7 @@ export async function buildLiveSamplePageFromURL(url: string) {
     (await kumascript.buildLiveSamplePages(
       document.url,
       document.metadata.title,
-      (
-        await kumascript.render(document.url)
-      )[0],
+      (await kumascript.render(document.url))[0],
       document.rawBody
     )) as BuiltLiveSamplePage[]
   ).find((page) => page.id.toLowerCase() == decodedSampleID);

diff --git a/client/public/index.html b/client/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" prefix="og: https://ogp.me/ns#">
   <head>
     <meta charset="utf-8" />

diff --git a/client/public/runner.html b/client/public/runner.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/client/src/document/mathml-polyfill/mathml-font.scss b/client/src/document/mathml-polyfill/mathml-font.scss
@@ -1,7 +1,8 @@
 @font-face {
   font-family: "STIXTwoMath-Regular";
   font-weight: normal;
-  src: local("STIXTwoMath-Regular"),
+  src:
+    local("STIXTwoMath-Regular"),
     url("./font/STIXTwoMath-Regular.woff2") format("woff2");
 }
 

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
@@ -53,7 +53,9 @@
 
     &:focus {
       border-color: var(--category-color);
-      box-shadow: 0 0 0 3px var(--blend-color), 0 0 0 3px var(--category-color);
+      box-shadow:
+        0 0 0 3px var(--blend-color),
+        0 0 0 3px var(--category-color);
       outline: 0 none;
     }
 

diff --git a/client/src/document/organisms/sidebar/index.tsx b/client/src/document/organisms/sidebar/index.tsx
@@ -43,10 +43,11 @@ export function SidebarContainer({
     const sidebar = document.querySelector("#sidebar-quicklinks");
     const currentSidebarItem = sidebar?.querySelector("em");
     if (sidebar && currentSidebarItem) {
-      [sidebar, sidebar.querySelector(".sidebar-inner-nav")].forEach((n) =>
-        n?.scrollTo({
-          top: currentSidebarItem.offsetTop - window.innerHeight / 4,
-        })
+      [sidebar, sidebar.querySelector(".sidebar-inner-nav")].forEach(
+        (n) =>
+          n?.scrollTo({
+            top: currentSidebarItem.offsetTop - window.innerHeight / 4,
+          })
       );
     }
   }, []);

diff --git a/client/src/playground/index.tsx b/client/src/playground/index.tsx
@@ -1,10 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import useSWRImmutable from "swr/immutable";
-import prettier from "prettier/esm/standalone.mjs";
-import parserBabel from "prettier/esm/parser-babel.mjs";
-import parserCSS from "prettier/esm/parser-postcss.mjs";
-import parserHTML from "prettier/esm/parser-html.mjs";
+import prettier from "prettier/standalone";
+import prettierPluginBabel from "prettier/plugins/babel";
+import prettierPluginCSS from "prettier/plugins/postcss";
+// XXX Using .mjs until https://github.com/prettier/prettier/pull/15018 is deployed
+import prettierPluginESTree from "prettier/plugins/estree.mjs";
+import prettierPluginHTML from "prettier/plugins/html";
 
 import { Button } from "../ui/atoms/button";
 import Editor, { EditorHandle } from "./editor";
@@ -190,14 +192,28 @@ export default function Playground() {
     );
   };
 
-  const format = () => {
+  const format = async () => {
     const { html, css, js } = getEditorContent();
 
     try {
       const formatted = {
-        html: prettier.format(html, { parser: "html", plugins: [parserHTML] }),
-        css: prettier.format(css, { parser: "css", plugins: [parserCSS] }),
-        js: prettier.format(js, { parser: "babel", plugins: [parserBabel] }),
+        html: await prettier.format(html, {
+          parser: "html",
+          plugins: [
+            prettierPluginHTML,
+            prettierPluginCSS,
+            prettierPluginBabel,
+            prettierPluginESTree,
+          ],
+        }),
+        css: await prettier.format(css, {
+          parser: "css",
+          plugins: [prettierPluginCSS],
+        }),
+        js: await prettier.format(js, {
+          parser: "babel",
+          plugins: [prettierPluginBabel, prettierPluginESTree],
+        }),
       };
       htmlRef.current?.setContent(formatted.html);
       cssRef.current?.setContent(formatted.css);

diff --git a/client/src/playground/loader.scss b/client/src/playground/loader.scss
@@ -14,9 +14,15 @@
     animation: rotate 2s linear infinite;
     border-radius: 50%;
 
-    box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f,
-      inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,
-      0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
+    box-shadow:
+      inset 0 0 50px #fff,
+      inset 20px 0 80px #f0f,
+      inset -20px 0 80px #0ff,
+      inset 20px 0 300px #f0f,
+      inset -20px 0 300px #0ff,
+      0 0 50px #fff,
+      -10px 0 80px #f0f,
+      10px 0 80px #0ff;
     height: 100px;
     width: 100px;
   }

diff --git a/client/src/plus/ai-help/index.scss b/client/src/plus/ai-help/index.scss
@@ -87,7 +87,8 @@
 
         &:focus {
           border-color: var(--category-color);
-          box-shadow: 0 0 0 3px var(--blend-color),
+          box-shadow:
+            0 0 0 3px var(--blend-color),
             0 0 0 3px var(--category-color);
           outline: 0 none;
         }

diff --git a/client/src/plus/index.scss b/client/src/plus/index.scss
@@ -66,8 +66,10 @@
     h1 span,
     p {
       // improve text contrast against mandala
-      text-shadow: 2px 2px 3px var(--plus-header),
-        2px -2px 3px var(--plus-header), -2px -2px 3px var(--plus-header),
+      text-shadow:
+        2px 2px 3px var(--plus-header),
+        2px -2px 3px var(--plus-header),
+        -2px -2px 3px var(--plus-header),
         -2px 2px 3px var(--plus-header);
     }
 

diff --git a/client/src/search.tsx b/client/src/search.tsx
@@ -39,7 +39,7 @@ function quicksearchPing(input: string) {
 function useSearchIndex(): readonly [
   null | SearchIndex,
   null | Error,
-  () => void
+  () => void,
 ] {
   const [shouldInitialize, setShouldInitialize] = useState(false);
   const [searchIndex, setSearchIndex] = useState<null | SearchIndex>(null);

diff --git a/client/src/site-search/search-results.tsx b/client/src/site-search/search-results.tsx
@@ -358,9 +358,9 @@ function Results({
                 LANGUAGES.has(document.locale) && (
                   <span
                     className="locale-indicator"
-                    title={`The linked document is in ${
-                      LANGUAGES.get(document.locale)?.English
-                    } which is different from your current locale.`}
+                    title={`The linked document is in ${LANGUAGES.get(
+                      document.locale
+                    )?.English} which is different from your current locale.`}
                   >
                     {LANGUAGES.get(document.locale)?.English}
                   </span>

diff --git a/client/src/ui/base/_typography.scss b/client/src/ui/base/_typography.scss
@@ -4,7 +4,8 @@
   font-stretch: 75% 100%;
   font-style: oblique 0deg 20deg;
   font-weight: 1 999;
-  src: url("../../assets/fonts/Inter.var.woff2")
+  src:
+    url("../../assets/fonts/Inter.var.woff2")
       format("woff2 supports variations"),
     url("../../assets/fonts/Inter.var.woff2") format("woff2-variations");
 }
diff --git a/client/src/ui/molecules/search/index.scss b/client/src/ui/molecules/search/index.scss
@@ -93,7 +93,9 @@
 
     &:focus {
       border-color: var(--category-color);
-      box-shadow: 0 0 0 3px var(--blend-color), 0 0 0 3px var(--category-color);
+      box-shadow:
+        0 0 0 3px var(--blend-color),
+        0 0 0 3px var(--category-color);
       outline: 0 none;
     }
 

diff --git a/content/document.ts b/content/document.ts
@@ -46,7 +46,7 @@ const getHTMLPath = (folder: string) => path.join(folder, HTML_FILENAME);
 const getMarkdownPath = (folder: string) =>
   path.join(folder, MARKDOWN_FILENAME);
 
-export function updateWikiHistory(
+export async function updateWikiHistory(
   localeContentRoot: string,
   oldSlug: string,
   newSlug: string | null = null
@@ -81,7 +81,7 @@ export function updateWikiHistory(
       // trailing newline character. So always doing in automation removes
       // the risk of a conflict at the last line from two independent PRs
       // that edit this file.
-      toPrettyJSON(sorted)
+      await toPrettyJSON(sorted)
     );
   }
 }
@@ -355,7 +355,7 @@ export const read = memoize((folderOrFilePath: string, ...roots: string[]) => {
   };
 });
 
-export function update(url: string, rawBody: string, metadata) {
+export async function update(url: string, rawBody: string, metadata) {
   const folder = urlToFolderPath(url);
   const document = read(folder);
   const locale = document.metadata.locale;
@@ -385,7 +385,7 @@ export function update(url: string, rawBody: string, metadata) {
       frontMatterKeys
     );
     if (isNewSlug) {
-      updateWikiHistory(
+      await updateWikiHistory(
         path.join(root, metadata.locale.toLowerCase()),
         oldSlug,
         newSlug
@@ -402,7 +402,7 @@ export function update(url: string, rawBody: string, metadata) {
       const oldChildSlug = metadata.slug;
       const newChildSlug = oldChildSlug.replace(oldSlug, newSlug);
       metadata.slug = newChildSlug;
-      updateWikiHistory(
+      await updateWikiHistory(
         path.join(root, metadata.locale.toLowerCase()),
         oldChildSlug,
         newChildSlug
@@ -543,7 +543,7 @@ export function findChildren(url: string, recursive = false) {
   return childPaths.map((folder) => read(folder));
 }
 
-export function move(
+export async function move(
   oldSlug: string,
   newSlug: string,
   locale: string,
@@ -573,7 +573,7 @@ export function move(
   }
 
   doc.metadata.slug = newSlug;
-  update(oldUrl, doc.rawBody, doc.metadata);
+  await update(oldUrl, doc.rawBody, doc.metadata);
 
   return pairs;
 }
@@ -606,7 +606,7 @@ export function validate(slug: string, locale: string) {
   }
 }
 
-export function remove(
+export async function remove(
   slug: string,
   locale: string,
   { recursive = false, dry = false, redirect = "" } = {}
@@ -639,7 +639,10 @@ export function remove(
   const removed = [];
   for (const { metadata } of children) {
     const slug = metadata.slug;
-    updateWikiHistory(path.join(root, metadata.locale.toLowerCase()), slug);
+    await updateWikiHistory(
+      path.join(root, metadata.locale.toLowerCase()),
+      slug
+    );
     removed.push(buildURL(locale, slug));
   }
 
@@ -656,7 +659,7 @@ export function remove(
     Redirect.remove(locale, [url, ...removed]);
   }
 
-  updateWikiHistory(
+  await updateWikiHistory(
     path.join(root, metadata.locale.toLowerCase()),
     metadata.slug
   );

diff --git a/content/utils.ts b/content/utils.ts
@@ -108,11 +108,11 @@ export function execGit(args, opts: { cwd?: string } = {}, root = null) {
   return stdout.toString().trim();
 }
 
-export function toPrettyJSON(value: unknown) {
+export async function toPrettyJSON(value: unknown) {
   const json = JSON.stringify(value, null, 2) + "\n";
   if (prettier) {
     try {
-      return prettier.format(json, { parser: "json" });
+      return await prettier.format(json, { parser: "json" });
     } catch (e) {
       // If Prettier formatting failed, don't worry
     }

diff --git a/package.json b/package.json
@@ -214,7 +214,7 @@
     "postcss-loader": "^7.3.3",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^8.5.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.0",
     "prettier-plugin-packagejson": "^2.4.5",
     "prompts": "^2.4.2",
     "react": "^18.2.0",
@@ -242,7 +242,7 @@
     "stylelint-config-recommended": "^12.0.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "stylelint-order": "^6.0.3",
-    "stylelint-prettier": "^3.0.0",
+    "stylelint-prettier": "^4.0.0",
     "stylelint-scss": "^5.0.1",
     "swr": "^2.2.0",
     "tailwindcss": "^3.3.3",

diff --git a/server/document.ts b/server/document.ts
@@ -73,19 +73,19 @@ router.get("/", withDocument, (req: RequestWithDocument, res) => {
 router.put("/", withDocument, async (req: RequestWithDocument, res) => {
   const { rawBody, metadata } = req.body;
   if (metadata.title && rawBody) {
-    Document.update(req.document.url, `${rawBody.trim()}\n`, metadata);
+    await Document.update(req.document.url, `${rawBody.trim()}\n`, metadata);
   }
   res.sendStatus(200);
 });
 
 // XXX deprecated anyway and doesn't work with Markdown
 // router.put("/move", async (req, res) => {
-//   Document.move(req.query.slug, req.query.newSlug, req.query.locale);
+//   await Document.move(req.query.slug, req.query.newSlug, req.query.locale);
 //   res.sendStatus(200);
 // });
 
-router.delete("/", (req, res) => {
-  Document.remove(req.query.slug as string, req.query.locale as string, {
+router.delete("/", async (req, res) => {
+  await Document.remove(req.query.slug as string, req.query.locale as string, {
     recursive: true,
   });
   res.sendStatus(200);