From 4bbb20395e511a517318b748af52b5d044fa6b25 Mon Sep 17 00:00:00 2001
From: Nick Schonning <nschonni@gmail.com>
Date: Fri, 19 May 2023 19:43:37 -0400
Subject: [PATCH] Add Prettier to lint command (#20674)

* chore: Opt-in cleaned folders and CI for Prettier

* Format remaining files

* Format remaining file

---------

Co-authored-by: Queen Vinyl Da.i'gyu-Kazotetsu <vinyldarkscratch@gmail.com>
---
 .github/workflows/markdown-lint.yml           |   1 +
 .github/workflows/pr-check_markdownlint.yml   |   5 +
 .../en-us/web/api/storage_access_api/index.md |   5 +-
 .../web/api/storage_access_api/using/index.md |  18 +-
 .../getstats/index.md                         |   2 +-
 .../web/css/@counter-style/symbols/index.md   |   4 +-
 .../css_scroll_snap/basic_concepts/index.md   |   2 +-
 .../attribute/preserveaspectratio/index.md    | 215 +++++++++---------
 package.json                                  |   4 +-
 9 files changed, 132 insertions(+), 124 deletions(-)

diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml
index 3f9704d355475fb..fee9351f939bf2f 100644
--- a/.github/workflows/markdown-lint.yml
+++ b/.github/workflows/markdown-lint.yml
@@ -7,6 +7,7 @@ on:
     paths:
       - .markdownlint-cli2.jsonc
       - .nvmrc
+      - .prettier*
       - package.json
       - yarn.lock
       - .github/workflows/markdown-lint.yml
diff --git a/.github/workflows/pr-check_markdownlint.yml b/.github/workflows/pr-check_markdownlint.yml
index ec21082e0b97b32..b1beaae2c76c048 100644
--- a/.github/workflows/pr-check_markdownlint.yml
+++ b/.github/workflows/pr-check_markdownlint.yml
@@ -45,3 +45,8 @@ jobs:
           yarn markdownlint-cli2 ${files_to_lint}
           echo "Linting front-matter"
           node scripts/front-matter_linter.js ${files_to_lint}
+
+      - name: Prettier markdown files
+        run: |
+          files_to_lint="${{ env.DIFF_DOCUMENTS }}"
+          yarn prettier -c ${files_to_lint}
diff --git a/files/en-us/web/api/storage_access_api/index.md b/files/en-us/web/api/storage_access_api/index.md
index 05e2ec6ad01586a..678b338c54a370a 100644
--- a/files/en-us/web/api/storage_access_api/index.md
+++ b/files/en-us/web/api/storage_access_api/index.md
@@ -64,10 +64,11 @@ Several different security measures could cause a {{domxref("Document.requestSto
 5. Sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the `allow-storage-access-by-user-activation` [sandbox token](/en-US/docs/Web/HTML/Element/iframe#sandbox). The embedding website needs to add this to allow storage access requests to be successful, along with `allow-scripts` and `allow-same-origin` to allow it to execute a script to call the API and execute it in an origin that can have cookies:
 
    ```html
-   <iframe sandbox="allow-storage-access-by-user-activation
+   <iframe
+     sandbox="allow-storage-access-by-user-activation
                    allow-scripts
                    allow-same-origin">
-    …
+     …
    </iframe>
    ```
 
diff --git a/files/en-us/web/api/storage_access_api/using/index.md b/files/en-us/web/api/storage_access_api/using/index.md
index f1161ae55bff796..bf0d21a3262dff8 100644
--- a/files/en-us/web/api/storage_access_api/using/index.md
+++ b/files/en-us/web/api/storage_access_api/using/index.md
@@ -19,7 +19,8 @@ In the example below, we show how an embedded cross-site {{htmlelement("iframe")
 First of all, if the `<iframe>` is sandboxed, the embedding website needs to add the `allow-storage-access-by-user-activation` [sandbox token](/en-US/docs/Web/HTML/Element/iframe#sandbox) to allow Storage Access API requests to be successful, along with `allow-scripts` and `allow-same-origin` to allow it to execute a script to call the API and execute it in an origin that can have cookies:
 
 ```html
-<iframe sandbox="allow-storage-access-by-user-activation
+<iframe
+  sandbox="allow-storage-access-by-user-activation
                  allow-scripts
                  allow-same-origin">
   …
@@ -31,12 +32,7 @@ First of all, if the `<iframe>` is sandboxed, the embedding website needs to add
 Now on to the code executed inside the embedded document. In this code:
 
 1. We first use feature detection (`if (document.hasStorageAccess === null) {}`) to check whether the API is supported. If not, we run our code that accesses cookies anyway, and hope that it works. It should be coded defensively to deal with such eventualities anyway.
-2. If the API is supported, we call `document.hasStorageAccess()`.
-   3. If that call returns `true`, it means this {{htmlelement("iframe")}} has already obtained access, and we can run our code that accesses cookies right away.
-   4. If that call returns `false`, we then call {{domxref("Permissions.query()")}} to check whether permission to access unpartitioned cookies has already been granted (i.e. to another same-site embed).
-      5. If the permission state is `"granted"`, we immediately call `document.requestStorageAccess()`. This call will automatically resolve, saving the user some time, then we can run our code that accesses cookies.
-      6. If the permission state is `"prompt"`, we call `document.requestStorageAccess()` after user interaction. This call may trigger a prompt to the user. If this call resolves, then we can run our code that accesses cookies.
-      7. If the permission state is `"denied"`, the user has denied our requests to access unpartitioned cookies, and our code cannot make use of them.
+2. If the API is supported, we call `document.hasStorageAccess()`. 3. If that call returns `true`, it means this {{htmlelement("iframe")}} has already obtained access, and we can run our code that accesses cookies right away. 4. If that call returns `false`, we then call {{domxref("Permissions.query()")}} to check whether permission to access unpartitioned cookies has already been granted (i.e. to another same-site embed). 5. If the permission state is `"granted"`, we immediately call `document.requestStorageAccess()`. This call will automatically resolve, saving the user some time, then we can run our code that accesses cookies. 6. If the permission state is `"prompt"`, we call `document.requestStorageAccess()` after user interaction. This call may trigger a prompt to the user. If this call resolves, then we can run our code that accesses cookies. 7. If the permission state is `"denied"`, the user has denied our requests to access unpartitioned cookies, and our code cannot make use of them.
 
 ```js
 function doThingsWithCookies() {
@@ -56,7 +52,9 @@ async function handleCookieAccess() {
     } else {
       // Check whether unpartitioned cookie access has been granted
       // to another same-site embed
-      const permission = await navigator.permissions.query({ name: "storage-access" });
+      const permission = await navigator.permissions.query({
+        name: "storage-access",
+      });
 
       if (permission.state === "granted") {
         // If so, you can just call requestStorageAccess() without a user interaction,
@@ -69,11 +67,11 @@ async function handleCookieAccess() {
           try {
             await document.requestStorageAccess();
             doThingsWithCookies();
-          } catch(err) {
+          } catch (err) {
             // If there is an error obtaining storage access.
             console.error(`Error obtaining storage access: ${err}.
                           Please sign in.`);
-          };
+          }
         });
       } else if (permission.state === "denied") {
         // User has denied unpartitioned cookie access, so we'll
diff --git a/files/en-us/web/api/webtransportreceivestream/getstats/index.md b/files/en-us/web/api/webtransportreceivestream/getstats/index.md
index 0218a7a977fe0fd..58b888458a0a1ad 100644
--- a/files/en-us/web/api/webtransportreceivestream/getstats/index.md
+++ b/files/en-us/web/api/webtransportreceivestream/getstats/index.md
@@ -36,7 +36,7 @@ The returned object has the following properties:
   - : A {{domxref("DOMHighResTimeStamp")}} indicating the timestamp at which the statistics were gathered, relative to Jan 1, 1970, UTC.
 - `bytesReceived`
   - : A positive integer indicating the number of bytes received by this stream, up to the first missing byte.
-     The number does not include any network overhead, and can only increase.
+    The number does not include any network overhead, and can only increase.
 - `bytesRead`
   - : A positive integer indicating the number of bytes the application has read from this `WebTransportReceiveStream` stream.
     This number can only increase, and is always less than or equal to `bytesReceived`.
diff --git a/files/en-us/web/css/@counter-style/symbols/index.md b/files/en-us/web/css/@counter-style/symbols/index.md
index a4189233e46fe93..1e643bb32ede986 100644
--- a/files/en-us/web/css/@counter-style/symbols/index.md
+++ b/files/en-us/web/css/@counter-style/symbols/index.md
@@ -29,7 +29,7 @@ A symbol can be a string, image, or identifier. It is used within the {{cssxref(
 
 ```css
 symbols: A B C D E;
-symbols: "\24B6" "\24B7" "\24B8"D E;
+symbols: "\24B6""\24B7""\24B8"D E;
 symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
 symbols: url("one.svg") url("two.svg") url("three.svg");
 symbols: indic-numbers;
@@ -68,7 +68,7 @@ While a space between quoted symbols is not required, it makes the CSS more legi
 ```css
 @counter-style symbols-example {
   system: fixed;
-  symbols: A "1" "\24B7" D E;
+  symbols: A "1" "\24B7"D E;
 }
 
 .list {
diff --git a/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md b/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md
index 3afc92d493c5112..e4fbbd508cb50ae 100644
--- a/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md
+++ b/files/en-us/web/css/css_scroll_snap/basic_concepts/index.md
@@ -18,7 +18,7 @@ You can then define scroll snapping on the scroll container by using the followi
 
 - {{cssxref("scroll-snap-type")}}: Using this property, you can define whether or not the scrollable viewport can be snapped to, whether snapping is required or optional, and the axis on which the snapping should occur.
 - {{cssxref("scroll-snap-align")}}: This property is set on every child of the scroll container and you can use it to define each child's snap position or lack thereof. (Using the {{cssxref("scroll-snap-stop")}} property, you can ensure that a child is snapped to during scrolling and not passed over. You can also set several {{cssxref("scroll-margin")}} properties on child elements that are snapped to during scrolling to create an outset from the defined box.)
-Optional {{cssxref("scroll-padding")}} properties can be set on the scroll container to create a snapping offset.
+  Optional {{cssxref("scroll-padding")}} properties can be set on the scroll container to create a snapping offset.
 
 The example below demonstrates scroll snapping along the vertical axis, which is defined by `scroll-snap-type`. Additionally, `scroll-snap-align` applies on all the children of the `<section>` element, dictating the point where the scrolling of each child should stop.
 
diff --git a/files/en-us/web/svg/attribute/preserveaspectratio/index.md b/files/en-us/web/svg/attribute/preserveaspectratio/index.md
index 0f747c760e03a11..ba0c34d33425f46 100644
--- a/files/en-us/web/svg/attribute/preserveaspectratio/index.md
+++ b/files/en-us/web/svg/attribute/preserveaspectratio/index.md
@@ -23,10 +23,10 @@ This example shows the use of `meet` when the element's `width` is greater than
 html,
 body,
 svg {
-  height: 100%; 
-} 
+  height: 100%;
+}
 
-/* place flex element on each iframe body for responsitivity at different screen sizes */ 
+/* place flex element on each iframe body for responsitivity at different screen sizes */
 body {
   display: flex;
 }
@@ -38,37 +38,38 @@ body {
     <path
       id="smiley"
       d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
-  </defs> 
+  </defs>
+</svg>
 ```
 
 ```html
-  <rect x="0" y="0" width="60" height="30">
-    <title>xMidYMid meet</title>
-  </rect>
-  <svg
-    viewBox="0 0 100 100"
-    width="60"
-    height="30"
-    preserveAspectRatio="xMidYMid meet"
-    x="0"
-    y="0">
-    <use href="#smiley" />
-  </svg>
+<rect x="0" y="0" width="60" height="30">
+  <title>xMidYMid meet</title>
+</rect>
+<svg
+  viewBox="0 0 100 100"
+  width="60"
+  height="30"
+  preserveAspectRatio="xMidYMid meet"
+  x="0"
+  y="0">
+  <use href="#smiley" />
+</svg>
 ```
 
 ```html
-  <rect x="70" y="0" width="60" height="30">
-    <title>xMinYMid meet</title>
-  </rect>
-  <svg
-    viewBox="0 0 100 100"
-    width="60"
-    height="30"
-    preserveAspectRatio="xMinYMid meet"
-    x="70"
-    y="0">
-    <use href="#smiley" />
-  </svg>
+<rect x="70" y="0" width="60" height="30">
+  <title>xMinYMid meet</title>
+</rect>
+<svg
+  viewBox="0 0 100 100"
+  width="60"
+  height="30"
+  preserveAspectRatio="xMinYMid meet"
+  x="70"
+  y="0">
+  <use href="#smiley" />
+</svg>
 ```
 
 ```html
@@ -101,8 +102,6 @@ rect:hover,
 rect:active {
   outline: 1px solid red;
 }
-
-
 ```
 
 {{EmbedLiveSample('meet width height', '100%', 200)}}
@@ -115,10 +114,10 @@ This example shows the use of `slice` when the element's `width` is greater than
 html,
 body,
 svg {
-  height: 100%; 
-} 
+  height: 100%;
+}
 
-/* place flex element on each iframe body for responsitivity at different screen sizes */ 
+/* place flex element on each iframe body for responsitivity at different screen sizes */
 body {
   display: flex;
 }
@@ -130,37 +129,38 @@ body {
     <path
       id="smiley"
       d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
-  </defs> 
+  </defs>
+</svg>
 ```
 
 ```html
-  <rect x="0" y="15" width="60" height="30">
-    <title>xMidYMin slice</title>
-  </rect>
-  <svg
-    viewBox="0 0 100 100"
-    width="60"
-    height="30"
-    preserveAspectRatio="xMidYMin slice"
-    x="0"
-    y="15">
-    <use href="#smiley" />
-  </svg>
+<rect x="0" y="15" width="60" height="30">
+  <title>xMidYMin slice</title>
+</rect>
+<svg
+  viewBox="0 0 100 100"
+  width="60"
+  height="30"
+  preserveAspectRatio="xMidYMin slice"
+  x="0"
+  y="15">
+  <use href="#smiley" />
+</svg>
 ```
 
 ```html
-  <rect x="70" y="15" width="60" height="30">
-    <title>xMidYMid slice</title>
-  </rect>
-  <svg
-    viewBox="0 0 100 100"
-    width="60"
-    height="30"
-    preserveAspectRatio="xMidYMid slice"
-    x="70"
-    y="15">
-    <use href="#smiley" />
-  </svg>
+<rect x="70" y="15" width="60" height="30">
+  <title>xMidYMid slice</title>
+</rect>
+<svg
+  viewBox="0 0 100 100"
+  width="60"
+  height="30"
+  preserveAspectRatio="xMidYMid slice"
+  x="70"
+  y="15">
+  <use href="#smiley" />
+</svg>
 ```
 
 ```html
@@ -205,10 +205,10 @@ This example shows the use of `meet` when the element's `height` is greater than
 html,
 body,
 svg {
-  height: 100%; 
-} 
+  height: 100%;
+}
 
-/* place flex element on each iframe body for responsitivity at different screen sizes */ 
+/* place flex element on each iframe body for responsitivity at different screen sizes */
 body {
   display: flex;
 }
@@ -220,7 +220,8 @@ body {
     <path
       id="smiley"
       d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
-  </defs> 
+  </defs>
+</svg>
 ```
 
 ```html
@@ -239,18 +240,18 @@ body {
 ```
 
 ```html
-  <rect x="35" y="0" width="30" height="75">
-    <title>xMidYMid meet</title>
-  </rect>
-  <svg
-    viewBox="0 0 100 100"
-    width="30"
-    height="75"
-    preserveAspectRatio="xMidYMid meet"
-    x="35"
-    y="0">
-    <use href="#smiley" />
-  </svg>
+<rect x="35" y="0" width="30" height="75">
+  <title>xMidYMid meet</title>
+</rect>
+<svg
+  viewBox="0 0 100 100"
+  width="30"
+  height="75"
+  preserveAspectRatio="xMidYMid meet"
+  x="35"
+  y="0">
+  <use href="#smiley" />
+</svg>
 ```
 
 ```html
@@ -295,10 +296,10 @@ This example shows the use of `slice` when the element's `height` is greater tha
 html,
 body,
 svg {
-  height: 100%; 
-} 
+  height: 100%;
+}
 
-/* place flex element on each iframe body for responsitivity at different screen sizes */ 
+/* place flex element on each iframe body for responsitivity at different screen sizes */
 body {
   display: flex;
 }
@@ -310,37 +311,38 @@ body {
     <path
       id="smiley"
       d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
-  </defs> 
+  </defs>
+</svg>
 ```
 
 ```html
-  <rect x="0" y="0" width="30" height="75">
-    <title>xMinYMid slice</title>
-  </rect>
-  <svg
-    viewBox="0 0 100 100"
-    width="30"
-    height="75"
-    preserveAspectRatio="xMinYMid slice"
-    x="0"
-    y="0">
-    <use href="#smiley" />
-  </svg>
+<rect x="0" y="0" width="30" height="75">
+  <title>xMinYMid slice</title>
+</rect>
+<svg
+  viewBox="0 0 100 100"
+  width="30"
+  height="75"
+  preserveAspectRatio="xMinYMid slice"
+  x="0"
+  y="0">
+  <use href="#smiley" />
+</svg>
 ```
 
 ```html
-  <rect x="35" y="0" width="30" height="75">
-    <title>xMidYMid slice</title>
-  </rect>
-  <svg
-    viewBox="0 0 100 100"
-    width="30"
-    height="75"
-    preserveAspectRatio="xMidYMid slice"
-    x="35"
-    y="0">
-    <use href="#smiley" />
-  </svg>
+<rect x="35" y="0" width="30" height="75">
+  <title>xMidYMid slice</title>
+</rect>
+<svg
+  viewBox="0 0 100 100"
+  width="30"
+  height="75"
+  preserveAspectRatio="xMidYMid slice"
+  x="35"
+  y="0">
+  <use href="#smiley" />
+</svg>
 ```
 
 ```html
@@ -385,10 +387,10 @@ This example shows an element with the alignment value set to `none`.
 html,
 body,
 svg {
-  height: 100%; 
-} 
+  height: 100%;
+}
 
-/* place flex element on each iframe body for responsitivity at different screen sizes */ 
+/* place flex element on each iframe body for responsitivity at different screen sizes */
 body {
   display: flex;
 }
@@ -400,7 +402,8 @@ body {
     <path
       id="smiley"
       d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
-  </defs> 
+  </defs>
+</svg>
 ```
 
 ```html
diff --git a/package.json b/package.json
index 1f1af58288b7094..82e34aaedfdb995 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,12 @@
     "fix:fm": "node scripts/front-matter_linter.js --fix true",
     "fix:js": "prettier -w \"**/*.(m)?js\"",
     "fix:json": "prettier -w \"**/*.json(c)?\"",
-    "fix:md": "markdownlint-cli2-fix \"**/*.md\"",
+    "fix:md": "markdownlint-cli2-fix \"**/*.md\" && prettier -w \"**/*.md\"",
     "fix:yml": "prettier -w \"**/*.yml\"",
     "lint:fm": "node scripts/front-matter_linter.js",
     "lint:js": "prettier -c \"**/*.(m)?js\"",
     "lint:json": "prettier -c \"**/*.json(c)?\"",
-    "lint:md": "markdownlint-cli2 \"**/*.md\"",
+    "lint:md": "markdownlint-cli2 \"**/*.md\" && prettier -c \"**/*.md\"",
     "lint:yml": "prettier -c \"**/*.yml\"",
     "prepare": "husky install",
     "start": "yarn up-to-date-check && env-cmd --silent cross-env CONTENT_ROOT=files REACT_APP_DISABLE_AUTH=true BUILD_OUT_ROOT=build yari-server",