diff --git a/.changeset/wicked-gifts-cover.md b/.changeset/wicked-gifts-cover.md
index 0680e0651..087bc7ed3 100644
--- a/.changeset/wicked-gifts-cover.md
+++ b/.changeset/wicked-gifts-cover.md
@@ -18,15 +18,15 @@ This allows you to define components which, for example, only run on mobile devi
 
 Since Astro components can have expressions, you can move common media queries to a module for sharing. For example here are defining:
 
-__media.js__
+**media.js**
 
 ```js
-export const MOBILE = "(max-width: 700px)";
+export const MOBILE = '(max-width: 700px)';
 ```
 
 And then you can reference this in your page:
 
-__index.astro__
+**index.astro**
 
 ```jsx
 import Sidebar from '../components/Sidebar.jsx';
@@ -34,4 +34,4 @@ import { MOBILE } from '../media.js';
 ---
 
 <Sidebar client:media={MOBILE} />
-```
\ No newline at end of file
+```
diff --git a/packages/astro/src/@types/hydrate.ts b/packages/astro/src/@types/hydrate.ts
index 88d6a0cc3..9f2099517 100644
--- a/packages/astro/src/@types/hydrate.ts
+++ b/packages/astro/src/@types/hydrate.ts
@@ -2,4 +2,4 @@ export type GetHydrateCallback = () => Promise<(element: Element, innerHTML: str
 
 export interface HydrateOptions {
   value?: string;
-}
\ No newline at end of file
+}
diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts
index 52f7fd576..79d8049fa 100644
--- a/packages/astro/src/compiler/codegen/index.ts
+++ b/packages/astro/src/compiler/codegen/index.ts
@@ -49,7 +49,7 @@ interface CodeGenOptions {
 
 interface HydrationAttributes {
   method?: 'load' | 'idle' | 'visible' | 'media';
-  value?: undefined | string
+  value?: undefined | string;
 }
 
 /** Searches through attributes to extract hydration-rlated attributes */
@@ -62,7 +62,7 @@ function findHydrationAttributes(attrs: Record<string, string>): HydrationAttrib
   for (const [key, val] of Object.entries(attrs)) {
     if (hydrationDirectives.has(key)) {
       method = key.slice(7) as HydrationAttributes['method'];
-      value = val === "true" ? undefined : val;
+      value = val === 'true' ? undefined : val;
     }
   }
 
@@ -226,12 +226,14 @@ function getComponentWrapper(_name: string, hydration: HydrationAttributes, { ur
     };
 
     let metadata: string = '';
-    if(method) {
+    if (method) {
       const componentUrl = getComponentUrl(astroConfig, url, pathToFileURL(filename));
       const componentExport = getComponentExport();
-      metadata = `{ hydrate: "${method}", displayName: "${name}", componentUrl: "${componentUrl}", componentExport: ${JSON.stringify(componentExport)}, value: ${hydration.value || 'null'} }`;
+      metadata = `{ hydrate: "${method}", displayName: "${name}", componentUrl: "${componentUrl}", componentExport: ${JSON.stringify(componentExport)}, value: ${
+        hydration.value || 'null'
+      } }`;
     } else {
-      metadata = `{ hydrate: undefined, displayName: "${name}", value: ${hydration.value || 'null'} }`
+      metadata = `{ hydrate: undefined, displayName: "${name}", value: ${hydration.value || 'null'} }`;
     }
 
     return {
diff --git a/packages/astro/src/frontend/hydrate/media.ts b/packages/astro/src/frontend/hydrate/media.ts
index 39c57c4f9..99e968f0b 100644
--- a/packages/astro/src/frontend/hydrate/media.ts
+++ b/packages/astro/src/frontend/hydrate/media.ts
@@ -15,9 +15,9 @@ export default async function onMedia(astroId: string, options: HydrateOptions,
   };
 
   const mql = matchMedia(options.value!);
-  if(mql.matches) {
+  if (mql.matches) {
     cb();
   } else {
-    mql.addEventListener('change', cb, {once:true});
+    mql.addEventListener('change', cb, { once: true });
   }
 }