From 0c23d35b01cf040cd73e3d83533ee5f71b1e107d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 5 Jun 2024 14:30:44 +0000
Subject: [PATCH 1/2] Bump prettier from 3.2.5 to 3.3.1

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

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 17ccd18cdc96710..189b9f0ff5168ca 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "lint-staged": "15.2.5",
     "markdownlint-cli2": "0.13.0",
     "markdownlint-rule-search-replace": "1.2.0",
-    "prettier": "3.2.5"
+    "prettier": "3.3.1"
   },
   "devDependencies": {
     "jest": "^29.7.0"
diff --git a/yarn.lock b/yarn.lock
index cd8e0859882a981..b05c4a1295d6ebc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6863,10 +6863,10 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==
 
-prettier@3.2.5:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
-  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
+prettier@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.1.tgz#e68935518dd90bb7ec4821ba970e68f8de16e1ac"
+  integrity sha512-7CAwy5dRsxs8PHXT3twixW9/OEll8MLE0VRPCJyl7CkS6VHGPSlsVaWTiASPTyGyYRyApxlaWTzwUxVNrhcwDg==
 
 pretty-format@^29.7.0:
   version "29.7.0"

From cecc79d1332b640262e21ac619e10e8b2072b7b1 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 5 Jun 2024 16:57:41 +0200
Subject: [PATCH 2/2] style(prettier): run yarn prettier -w .

---
 .../backgrounds_and_borders/index.md          |  3 +-
 .../video_and_audio_apis/index.md             |  3 +-
 .../web/api/web_authentication_api/index.md   | 12 +--
 files/en-us/web/css/@import/index.md          |  8 +-
 .../css/@media/prefers-reduced-data/index.md  |  6 +-
 files/en-us/web/css/@supports/index.md        |  3 +-
 files/en-us/web/css/background-image/index.md |  3 +-
 .../en-us/web/css/background-origin/index.md  |  3 +-
 .../using_multiple_backgrounds/index.md       |  4 +-
 .../understanding_aspect-ratio/index.md       |  3 +-
 .../using_feature_queries/index.md            |  3 +-
 .../using_filter_effects/index.md             | 10 +--
 .../css_images/using_css_gradients/index.md   | 75 ++++++++++++++-----
 files/en-us/web/css/env/index.md              | 12 +--
 files/en-us/web/css/filter/index.md           |  4 +-
 .../web/css/gradient/conic-gradient/index.md  |  3 +-
 .../en-us/web/css/grid-auto-columns/index.md  |  3 +-
 files/en-us/web/css/mask-image/index.md       |  3 +-
 .../css/transform-function/matrix3d/index.md  | 20 +----
 19 files changed, 102 insertions(+), 79 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
index 4164a35806d5067..d350df0e4ca813c 100644
--- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -45,7 +45,8 @@ The CSS {{cssxref("background")}} property is a shorthand for a number of backgr
         105deg,
         rgb(255 255 255 / 20%) 39%,
         rgb(51 56 57 / 100%) 96%
-      ) center center / 400px 200px no-repeat,
+      )
+      center center / 400px 200px no-repeat,
     url(big-star.png) center no-repeat,
     rebeccapurple;
 }
diff --git a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
index 30056ef5689f68c..e11799e793bc39d 100644
--- a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
+++ b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
@@ -144,7 +144,8 @@ Next, let's look at our button icons:
   font-family: "HeydingsControlsRegular";
   src: url("fonts/heydings_controls-webfont.eot");
   src:
-    url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"),
+    url("fonts/heydings_controls-webfont.eot?#iefix")
+      format("embedded-opentype"),
     url("fonts/heydings_controls-webfont.woff") format("woff"),
     url("fonts/heydings_controls-webfont.ttf") format("truetype");
   font-weight: normal;
diff --git a/files/en-us/web/api/web_authentication_api/index.md b/files/en-us/web/api/web_authentication_api/index.md
index bc4ea9c40123320..9e405485a4e7e70 100644
--- a/files/en-us/web/api/web_authentication_api/index.md
+++ b/files/en-us/web/api/web_authentication_api/index.md
@@ -232,9 +232,9 @@ const createCredentialDefaultArgs = {
     timeout: 60000,
     challenge: new Uint8Array([
       // must be a cryptographically random number sent from a server
-      0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17, 0x1a,
-      0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15, 0x7e, 0x38,
-      0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
+      0x8c, 0x0a, 0x26, 0xff, 0x22, 0x91, 0xc1, 0xe9, 0xb9, 0x4e, 0x2e, 0x17,
+      0x1a, 0x98, 0x6a, 0x73, 0x71, 0x9d, 0x43, 0x48, 0xd5, 0xa7, 0x6a, 0x15,
+      0x7e, 0x38, 0x94, 0x52, 0x77, 0x97, 0x0f, 0xef,
     ]).buffer,
   },
 };
@@ -246,9 +246,9 @@ const getCredentialDefaultArgs = {
     // allowCredentials: [newCredential] // see below
     challenge: new Uint8Array([
       // must be a cryptographically random number sent from a server
-      0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15, 0x67,
-      0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f, 0x81, 0x26,
-      0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
+      0x79, 0x50, 0x68, 0x71, 0xda, 0xee, 0xee, 0xb9, 0x94, 0xc3, 0xc2, 0x15,
+      0x67, 0x65, 0x26, 0x22, 0xe3, 0xf3, 0xab, 0x3b, 0x78, 0x2e, 0xd5, 0x6f,
+      0x81, 0x26, 0xe2, 0xa6, 0x01, 0x7d, 0x74, 0x50,
     ]).buffer,
   },
 };
diff --git a/files/en-us/web/css/@import/index.md b/files/en-us/web/css/@import/index.md
index 68983dcfb56cd6a..f175622221a1986 100644
--- a/files/en-us/web/css/@import/index.md
+++ b/files/en-us/web/css/@import/index.md
@@ -101,8 +101,8 @@ The `@import` rules in the above examples show media-dependent conditions that w
 
 ```css
 @import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
-@import url("flexy.css") supports((not (display: grid)) and (display: flex)) screen
-  and (max-width: 400px);
+@import url("flexy.css") supports((not (display: grid)) and (display: flex))
+  screen and (max-width: 400px);
 ```
 
 The `@import` rules above illustrate how you might import a layout that uses a grid if `display: grid` is supported, and otherwise imports CSS that uses `display: flex`.
@@ -114,8 +114,8 @@ You can also specify CSS functions in `supports()`, and it will evaluate to `tru
 For example, the code below shows an `@import` that is conditional on both [child combinators](/en-US/docs/Web/CSS/Child_combinator) (`selector()`) and the `font-tech()` function:
 
 ```css
-@import url("whatever.css") supports((selector(h2 > p)) and
-    (font-tech(color-COLRv1)));
+@import url("whatever.css")
+supports((selector(h2 > p)) and (font-tech(color-COLRv1)));
 ```
 
 ### Importing CSS rules into a cascade layer
diff --git a/files/en-us/web/css/@media/prefers-reduced-data/index.md b/files/en-us/web/css/@media/prefers-reduced-data/index.md
index e6ed3d58621694c..781e76971dd26cd 100644
--- a/files/en-us/web/css/@media/prefers-reduced-data/index.md
+++ b/files/en-us/web/css/@media/prefers-reduced-data/index.md
@@ -58,9 +58,9 @@ In this example the `montserrat-regular.woff2` font file will neither be preload
       local("Montserrat Regular"),
       local("Montserrat-Regular"),
       url("fonts/montserrat-regular.woff2") format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
-      U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
-      U+2212, U+2215, U+FEFF, U+FFFD;
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+      U+2215, U+FEFF, U+FFFD;
   }
 }
 
diff --git a/files/en-us/web/css/@supports/index.md b/files/en-us/web/css/@supports/index.md
index c04e4625ac159b3..547a3bc37c83cbc 100644
--- a/files/en-us/web/css/@supports/index.md
+++ b/files/en-us/web/css/@supports/index.md
@@ -260,7 +260,8 @@ If a browser doesn't support the font technology, a fallback font (`Bungee-fallb
 @font-face {
   font-family: "Bungee Spice";
   src:
-    url("https://fonts.googleapis.com/css2?family=Bungee+Spice") tech(color-COLRv1),
+    url("https://fonts.googleapis.com/css2?family=Bungee+Spice")
+      tech(color-COLRv1),
     url("Bungee-fallback.otf") format("opentype");
 }
 ```
diff --git a/files/en-us/web/css/background-image/index.md b/files/en-us/web/css/background-image/index.md
index 5f48b34d8a7c642..4da7bd0441459d7 100644
--- a/files/en-us/web/css/background-image/index.md
+++ b/files/en-us/web/css/background-image/index.md
@@ -26,7 +26,8 @@ background-image: linear-gradient(
     to bottom,
     rgb(255 255 0 / 50%),
     rgb(0 0 255 / 50%)
-  ), url("catfront.png");
+  ),
+  url("catfront.png");
 
 /* Global values */
 background-image: inherit;
diff --git a/files/en-us/web/css/background-origin/index.md b/files/en-us/web/css/background-origin/index.md
index bc2b2adfd148f1c..3151d069908ee4a 100644
--- a/files/en-us/web/css/background-origin/index.md
+++ b/files/en-us/web/css/background-origin/index.md
@@ -95,7 +95,8 @@ In this example the box has a thick dotted border. The first gradient uses the `
       rgb(131 58 180 / 100%) 0%,
       rgb(253 29 29 / 60%) 60%,
       rgb(252 176 69 / 100%) 100%
-    ), radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
+    ),
+    radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
   border: 20px dashed black;
   padding: 20px;
   width: 400px;
diff --git a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 03a3c2c9cc4ddaa..1ed6ad56d43463d 100644
--- a/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/en-us/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -37,8 +37,8 @@ In this example, three backgrounds are stacked: the Firefox logo, an image of bu
 .multi-bg-example {
   width: 100%;
   height: 400px;
-  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(30
-          75 115 / 100%), rgb(255 255 255 / 0%));
+  background-image: url(firefox.png), url(bubbles.png),
+    linear-gradient(to right, rgb(30 75 115 / 100%), rgb(255 255 255 / 0%));
   background-repeat: no-repeat, no-repeat, no-repeat;
   background-position:
     bottom right,
diff --git a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
index 82371e43c0ca790..6fe023ac8bf32f6 100644
--- a/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
+++ b/files/en-us/web/css/css_box_sizing/understanding_aspect-ratio/index.md
@@ -53,7 +53,8 @@ div {
       to right,
       black 0px 1px,
       transparent 1px 20px
-    ), repeating-linear-gradient(black 0px 1px, transparent 1px 20px);
+    ),
+    repeating-linear-gradient(black 0px 1px, transparent 1px 20px);
   background-size:
     181px 5px,
     5px 121px;
diff --git a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md
index e80dcc6072683e2..69b8e1eeecdc83a 100644
--- a/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md
+++ b/files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md
@@ -111,7 +111,8 @@ For example, the `selector()` function can be used to import a stylesheet for br
 
 ```css
 /* A `selector()` query within a `supports()` function */
-@import `/css/webkitShadowStyles.css` supports(selector(::-webkit-inner-spin-button));
+@import `/css/webkitShadowStyles.css`
+  supports(selector(::-webkit-inner-spin-button));
 ```
 
 ## Examples
diff --git a/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md b/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md
index 6d14c47211ccf13..7479bbbb665f2ea 100644
--- a/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md
+++ b/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md
@@ -169,12 +169,10 @@ img {
 
 ```css nolint
 img {
-  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
-      -2px -2px 0 hsl(210deg 100% 50%)
-    )
-    drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
-      -2px -2px 0 hsl(30deg 100% 50%)
-    );
+  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
+    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
+    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
+    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
 }
 img + img {
   filter: none;
diff --git a/files/en-us/web/css/css_images/using_css_gradients/index.md b/files/en-us/web/css/css_images/using_css_gradients/index.md
index e90075c10c939c7..ef15f34ab79774e 100644
--- a/files/en-us/web/css/css_images/using_css_gradients/index.md
+++ b/files/en-us/web/css/css_images/using_css_gradients/index.md
@@ -355,7 +355,8 @@ div {
       217deg,
       rgb(255 0 0 / 80%),
       rgb(255 0 0 / 0%) 70.71%
-    ), linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
+    ),
+    linear-gradient(127deg, rgb(0 255 0 / 80%), rgb(0 255 0 / 0%) 70.71%),
     linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
 }
 ```
@@ -385,7 +386,8 @@ div {
 
 ```css
 div {
-  background: linear-gradient(to top, red, blue), linear-gradient(to right, #5500ff, #00ff55);
+  background: linear-gradient(to top, red, blue),
+    linear-gradient(to right, #5500ff, #00ff55);
 }
 
 .screen {
@@ -651,7 +653,8 @@ div {
         circle at 93.3% 75%,
         rgb(0 255 0 / 50%),
         rgb(0 255 0 / 0%) 70.71%
-      ) beige;
+      )
+      beige;
   border-radius: 50%;
 }
 ```
@@ -799,7 +802,8 @@ div {
       rgb(75 0 130 / 50%) 240px,
       rgb(238 130 238 / 50%) 280px,
       rgb(255 0 0 / 50%) 300px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       -190deg,
       rgb(255 0 0 / 50%) 30px,
       rgb(255 153 0 / 50%) 60px,
@@ -809,8 +813,18 @@ div {
       rgb(75 0 130 / 50%) 180px,
       rgb(238 130 238 / 50%) 210px,
       rgb(255 0 0 / 50%) 230px
-    ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
-        200px, blue 250px, indigo 300px, violet 350px, red 370px);
+    ),
+    repeating-linear-gradient(
+      23deg,
+      red 50px,
+      orange 100px,
+      yellow 150px,
+      green 200px,
+      blue 250px,
+      indigo 300px,
+      violet 350px,
+      red 370px
+    );
 }
 ```
 
@@ -847,7 +861,8 @@ div {
       transparent 116px,
       rgb(255 206 0 / 25%) 116px,
       rgb(255 206 0 / 25%) 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       0deg,
       transparent,
       transparent 50px,
@@ -861,15 +876,21 @@ div {
       transparent 116px,
       rgb(255 206 0 / 25%) 116px,
       rgb(255 206 0 / 25%) 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       -45deg,
       transparent,
       transparent 5px,
       rgb(143 77 63 / 25%) 5px,
       rgb(143 77 63 / 25%) 10px
-    ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(
-          143 77 63 / 25%
-        ) 5px, rgb(143 77 63 / 25%) 10px);
+    ),
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 5px,
+      rgb(143 77 63 / 25%) 5px,
+      rgb(143 77 63 / 25%) 10px
+    );
 
   background: repeating-linear-gradient(
       90deg,
@@ -879,7 +900,8 @@ div {
       rgb(255 127 0 / 25%) 63px 69px,
       transparent 69px 116px,
       rgb(255 206 0 / 25%) 116px 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       0deg,
       transparent 0 50px,
       rgb(255 127 0 / 25%) 50px 56px,
@@ -887,12 +909,17 @@ div {
       rgb(255 127 0 / 25%) 63px 69px,
       transparent 69px 116px,
       rgb(255 206 0 / 25%) 116px 166px
-    ), repeating-linear-gradient(
+    ),
+    repeating-linear-gradient(
       -45deg,
       transparent 0 5px,
       rgb(143 77 63 / 25%) 5px 10px
-    ), repeating-linear-gradient(45deg, transparent 0 5px, rgb(143 77 63 / 25%) 5px
-        10px);
+    ),
+    repeating-linear-gradient(
+      45deg,
+      transparent 0 5px,
+      rgb(143 77 63 / 25%) 5px 10px
+    );
 }
 ```
 
@@ -948,14 +975,16 @@ div {
         rgb(0 0 0 / 50%) 15px,
         rgb(255 255 255 / 50%) 15px,
         rgb(255 255 255 / 50%) 30px
-      ) top left no-repeat,
+      )
+      top left no-repeat,
     repeating-radial-gradient(
         ellipse at 20% 50%,
         rgb(0 0 0 / 50%),
         rgb(0 0 0 / 50%) 10px,
         rgb(255 255 255 / 50%) 10px,
         rgb(255 255 255 / 50%) 20px
-      ) top left no-repeat yellow;
+      )
+      top left no-repeat yellow;
   background-size:
     200px 200px,
     150px 150px;
@@ -1013,13 +1042,19 @@ div {
       #5691f580 0% 8.25%,
       #b338ff80 8.25% 16.5%,
       #f8305880 16.5% 25%
-    ), repeating-conic-gradient(
+    ),
+    repeating-conic-gradient(
       from 15deg at 50% 50%,
       #e856f580 0% 8.25%,
       #ff384c80 8.25% 16.5%,
       #e7f83080 16.5% 25%
-    ), repeating-conic-gradient(from 0deg at 20% 50%, #f58356ff 0% 8.25%, #caff38ff
-        8.25% 16.5%, #30f88aff 16.5% 25%);
+    ),
+    repeating-conic-gradient(
+      from 0deg at 20% 50%,
+      #f58356ff 0% 8.25%,
+      #caff38ff 8.25% 16.5%,
+      #30f88aff 16.5% 25%
+    );
 }
 ```
 
diff --git a/files/en-us/web/css/env/index.md b/files/en-us/web/css/env/index.md
index 7693cc26f48d839..6d27369e1ac611f 100644
--- a/files/en-us/web/css/env/index.md
+++ b/files/en-us/web/css/env/index.md
@@ -60,10 +60,8 @@ You can then use `env()` in your CSS:
 
 ```css
 body {
-  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
-      safe-area-inset-bottom,
-      20px
-    ) env(safe-area-inset-left, 20px);
+  padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
 }
 ```
 
@@ -139,10 +137,8 @@ The below example makes use of the optional second parameter of `env()`, which a
 p {
   width: 300px;
   border: 2px solid red;
-  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env(
-      safe-area-inset-bottom,
-      50px
-    ) env(SAFE-AREA-INSET-LEFT, 50px);
+  padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px) env(SAFE-AREA-INSET-LEFT, 50px);
 }
 ```
 
diff --git a/files/en-us/web/css/filter/index.md b/files/en-us/web/css/filter/index.md
index 60cb855d9d045a8..423f84c520323a5 100644
--- a/files/en-us/web/css/filter/index.md
+++ b/files/en-us/web/css/filter/index.md
@@ -196,8 +196,8 @@ Filter functions are applied in order of appearance. The same filter function ca
 ```css
 #MDN-logo {
   border: 1px solid blue;
-  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
-        red);
+  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg)
+    drop-shadow(5px 5px 0 red);
 }
 ```
 
diff --git a/files/en-us/web/css/gradient/conic-gradient/index.md b/files/en-us/web/css/gradient/conic-gradient/index.md
index aba36c5d082fcc3..073d34dd5d5d227 100644
--- a/files/en-us/web/css/gradient/conic-gradient/index.md
+++ b/files/en-us/web/css/gradient/conic-gradient/index.md
@@ -212,7 +212,8 @@ div {
       #000 0.25turn 0.5turn,
       #fff 0.5turn 0.75turn,
       #000 0.75turn
-    ) top left / 25% 25% repeat;
+    )
+    top left / 25% 25% repeat;
   border: 1px solid;
 }
 ```
diff --git a/files/en-us/web/css/grid-auto-columns/index.md b/files/en-us/web/css/grid-auto-columns/index.md
index 62b13f9f11d7b4b..99c37880b1c8936 100644
--- a/files/en-us/web/css/grid-auto-columns/index.md
+++ b/files/en-us/web/css/grid-auto-columns/index.md
@@ -49,7 +49,8 @@ grid-auto-columns: min-content max-content auto;
 grid-auto-columns: 100px 150px 390px;
 grid-auto-columns: 10% 33.3%;
 grid-auto-columns: 0.5fr 3fr 1fr;
-grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)
+  minmax(20%, 80vmax);
 grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
 
 /* Global values */
diff --git a/files/en-us/web/css/mask-image/index.md b/files/en-us/web/css/mask-image/index.md
index e254b7273d21fd9..58d40b43cc58b92 100644
--- a/files/en-us/web/css/mask-image/index.md
+++ b/files/en-us/web/css/mask-image/index.md
@@ -24,7 +24,8 @@ mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
 mask-image: image(url(mask.png), skyblue);
 
 /* Multiple values */
-mask-image: image(url(mask.png), skyblue), linear-gradient(rgb(0 0 0 / 100%), transparent);
+mask-image: image(url(mask.png), skyblue),
+  linear-gradient(rgb(0 0 0 / 100%), transparent);
 
 /* Global values */
 mask-image: inherit;
diff --git a/files/en-us/web/css/transform-function/matrix3d/index.md b/files/en-us/web/css/transform-function/matrix3d/index.md
index b24423b4ecfb0d0..25536a4f4edbd7e 100644
--- a/files/en-us/web/css/transform-function/matrix3d/index.md
+++ b/files/en-us/web/css/transform-function/matrix3d/index.md
@@ -110,24 +110,8 @@ a `matrix3d()` transform to it.
 
 #example-element:hover,
 #example-element:focus {
-  transform: rotate3d(1, 1, 1, 30deg) matrix3d(
-      1,
-      0,
-      0,
-      0,
-      0,
-      1,
-      6,
-      0,
-      0,
-      0,
-      1,
-      0,
-      50,
-      100,
-      0,
-      1.1
-    );
+  transform: rotate3d(1, 1, 1, 30deg)
+    matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
 }
 
 .face {