[ci] yarn format

32 files changed, 434 insertions, 394 deletions

diff --git a/examples/blog-multiple-authors/astro.config.mjs b/examples/blog-multiple-authors/astro.config.mjs
index e6e926d7b..2c8e9130e 100644
--- a/examples/blog-multiple-authors/astro.config.mjs
+++ b/examples/blog-multiple-authors/astro.config.mjs
@@ -5,13 +5,11 @@ export default {
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
     // site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
-    sitemap: true,         // Generate sitemap (set to "false" to disable)
+    sitemap: true, // Generate sitemap (set to "false" to disable)
   },
   devOptions: {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-preact'
-  ]
+  renderers: ['@astrojs/renderer-preact'],
 };
diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs
index e6e926d7b..2c8e9130e 100644
--- a/examples/blog/astro.config.mjs
+++ b/examples/blog/astro.config.mjs
@@ -5,13 +5,11 @@ export default {
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
     // site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
-    sitemap: true,         // Generate sitemap (set to "false" to disable)
+    sitemap: true, // Generate sitemap (set to "false" to disable)
   },
   devOptions: {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-preact'
-  ]
+  renderers: ['@astrojs/renderer-preact'],
 };
diff --git a/examples/blog/public/blog.scss b/examples/blog/public/blog.scss
index afea09108..f74c02692 100644
--- a/examples/blog/public/blog.scss
+++ b/examples/blog/public/blog.scss
@@ -1,37 +1,35 @@
 :root {
-  --font-fallback: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
-  --font-body: "IBM Plex Sans", var(--font-fallback);
-  --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono",
-        "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
-        "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
-        "Courier New", Courier, monospace;
-
-  --color-white: #FFF;
+  --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  --font-body: 'IBM Plex Sans', var(--font-fallback);
+  --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
+    'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+
+  --color-white: #fff;
   --color-black: #000014;
 
-  --color-gray-50: #F9FAFB;
-  --color-gray-100: #F3F4F6;
-  --color-gray-200: #E5E7EB;
-  --color-gray-300: #D1D5DB;
-  --color-gray-400: #9CA3AF;
-  --color-gray-500: #6B7280;
-  --color-gray-600: #4B5563;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
   --color-gray-700: #374151;
-  --color-gray-800: #1F2937;
+  --color-gray-800: #1f2937;
   --color-gray-900: #111827;
 
-  --color-blue: #3894FF;
-  --color-blue-rgb: 56,148,255;
-  --color-green: #17C083;
-  --color-green-rgb: 23,192,131;
-  --color-orange: #FF5D01;
-  --color-orange-rgb: 255,93,1;
-  --color-purple: #882DE7;
-  --color-purple-rgb: 136,45,231;
-  --color-red: #FF1639;
-  --color-red-rgb: 255,22,57;
-  --color-yellow: #FFBE2D;
-  --color-yellow-rgb: 255,190,45;
+  --color-blue: #3894ff;
+  --color-blue-rgb: 56, 148, 255;
+  --color-green: #17c083;
+  --color-green-rgb: 23, 192, 131;
+  --color-orange: #ff5d01;
+  --color-orange-rgb: 255, 93, 1;
+  --color-purple: #882de7;
+  --color-purple-rgb: 136, 45, 231;
+  --color-red: #ff1639;
+  --color-red-rgb: 255, 22, 57;
+  --color-yellow: #ffbe2d;
+  --color-yellow-rgb: 255, 190, 45;
 }
 
 :root {
@@ -140,30 +138,31 @@ nav ul {
 }
 
 h1 {
-  font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem);
+  font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
 }
 
 h2 {
-  font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem);
+  font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
 }
 
 h3 {
-  font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem);
+  font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
 }
 
 h4 {
-  font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem);
+  font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
 }
 
 h5 {
-  font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem);
+  font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
 }
 
 p {
   color: var(--theme-text-light);
 }
 
-small, .text_small {
+small,
+.text_small {
   font-size: 0.833rem;
 }
 
@@ -176,14 +175,14 @@ a {
   gap: 0.5rem;
 }
 
-a > code:not([class*="language"]) {
+a > code:not([class*='language']) {
   position: relative;
   color: var(--theme-accent);
   background: transparent;
   text-underline-offset: var(--padding-block);
 }
 
-a > code:not([class*="language"])::before {
+a > code:not([class*='language'])::before {
   content: '';
   position: absolute;
   top: 0;
@@ -213,13 +212,13 @@ strong {
 
 /* Supporting Content */
 
-code:not([class*="language"]) {
+code:not([class*='language']) {
   --border-radius: 3px;
   --padding-block: 0.2rem;
   --padding-inline: 0.33rem;
 
   font-family: var(--font-mono);
-  font-size: .85em;
+  font-size: 0.85em;
   color: inherit;
   background-color: var(--theme-code-inline-bg);
   padding: var(--padding-block) var(--padding-inline);
@@ -227,7 +226,7 @@ code:not([class*="language"]) {
   border-radius: var(--border-radius);
 }
 
-pre > code:not([class*="language"]) {
+pre > code:not([class*='language']) {
   background-color: transparent;
   padding: 0;
   margin: 0;
@@ -245,7 +244,7 @@ pre {
   padding-right: calc(var(--padding-inline) * 2);
   margin-left: calc(50vw - var(--padding-inline));
   transform: translateX(-50vw);
-  
+
   line-height: 1.414;
   width: calc(100vw + (var(--padding-inline) * 2));
   max-width: calc(100% + (var(--padding-inline) * 2));
diff --git a/examples/blog/public/global.scss b/examples/blog/public/global.scss
index c0d03a8fd..5aea52933 100644
--- a/examples/blog/public/global.scss
+++ b/examples/blog/public/global.scss
@@ -1,99 +1,93 @@
 :root {
-    --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono",
-        "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
-        "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
-        "Courier New", Courier, monospace;
-    --color-green: #17c083;
+  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
+    'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+  --color-green: #17c083;
 }
 
 * {
-    box-sizing: border-box;
-    margin: 0;
+  box-sizing: border-box;
+  margin: 0;
 }
 html {
-    display: grid;
-    width: 100%;
-    max-width: 100vw;
-    overflow: hidden;
-    height: 100%;
-    background-color: #000014;
+  display: grid;
+  width: 100%;
+  max-width: 100vw;
+  overflow: hidden;
+  height: 100%;
+  background-color: #000014;
 }
-html, body {
-    padding: 0;
-    font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
-    font-family: var(--font-sans);
-    font-weight: 400;
-    background-image: radial-gradient(
-        87.7% 87.7% at 85.6% 18.14%,
-        #111827 0%,
-        #000014 100%
-    );
-    background-repeat: no-repeat;
-    color: #f3f4f6;
+html,
+body {
+  padding: 0;
+  font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
+  font-family: var(--font-sans);
+  font-weight: 400;
+  background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
+  background-repeat: no-repeat;
+  color: #f3f4f6;
 }
 body {
-    position: relative;
-    display: grid;
-    place-items: center;
-    min-width: 100%;
-    max-width: 100vw;
-    min-height: 100vh;
-    overflow-x: hidden;
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-width: 100%;
+  max-width: 100vw;
+  min-height: 100vh;
+  overflow-x: hidden;
 }
 .visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 a {
-    position: relative;
-    text-decoration: none;
-    color: var(--color-green);
-    padding: 0.05em 0.125em;
-    margin: -0.05em -0.125em;
-    transition: color 120ms cubic-bezier(0.23, 1, 0.320, 1);
-    z-index: 0;
-    display: inline-block;
+  position: relative;
+  text-decoration: none;
+  color: var(--color-green);
+  padding: 0.05em 0.125em;
+  margin: -0.05em -0.125em;
+  transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
+  z-index: 0;
+  display: inline-block;
 
-    &:hover,
-    &:focus {
-        color: rgba(0, 0, 0, 1);
+  &:hover,
+  &:focus {
+    color: rgba(0, 0, 0, 1);
 
-        &::before {
-            transform: scaleY(1);
-            background: var(--color-green);
-        }
+    &::before {
+      transform: scaleY(1);
+      background: var(--color-green);
     }
+  }
 
-    &:visited {
-        // color: var(--color-green);
-        color: var(--color-green);
-        &:hover,
-        &:focus {
-            color: rgba(0, 0, 0, 1);
-        }
+  &:visited {
+    // color: var(--color-green);
+    color: var(--color-green);
+    &:hover,
+    &:focus {
+      color: rgba(0, 0, 0, 1);
     }
+  }
 
-    &::before {
-        transform-origin: bottom center;
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        inset: 0;
-        background: var(--color-green);
-        pointer-events: none;
-        transform: scaleY(0.05);
-        transition: transform 120ms cubic-bezier(0.23, 1, 0.320, 1),
-            background 120ms cubic-bezier(0.23, 1, 0.320, 1);
-        z-index: -1;
-    }
+  &::before {
+    transform-origin: bottom center;
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    inset: 0;
+    background: var(--color-green);
+    pointer-events: none;
+    transform: scaleY(0.05);
+    transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
+    z-index: -1;
+  }
 }
diff --git a/examples/docs/astro.config.mjs b/examples/docs/astro.config.mjs
index 6fd6bb47e..7af3aef7f 100644
--- a/examples/docs/astro.config.mjs
+++ b/examples/docs/astro.config.mjs
@@ -11,7 +11,5 @@ export default {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-preact'
-  ]
+  renderers: ['@astrojs/renderer-preact'],
 };
diff --git a/examples/docs/public/code.css b/examples/docs/public/code.css
index 54b2c5094..ec735a676 100644
--- a/examples/docs/public/code.css
+++ b/examples/docs/public/code.css
@@ -1,155 +1,155 @@
 .language-css > code,
 .language-sass > code,
 .language-scss > code {
-	color: #fd9170;
+  color: #fd9170;
 }
 
-[class*="language-"] .namespace {
-	opacity: 0.7;
+[class*='language-'] .namespace {
+  opacity: 0.7;
 }
 
 .token.atrule {
-	color: #c792ea;
+  color: #c792ea;
 }
 
 .token.attr-name {
-	color: #ffcb6b;
+  color: #ffcb6b;
 }
 
 .token.attr-value {
-	color: #a5e844;
+  color: #a5e844;
 }
 
 .token.attribute {
-	color: #a5e844;
+  color: #a5e844;
 }
 
 .token.boolean {
-	color: #c792ea;
+  color: #c792ea;
 }
 
 .token.builtin {
-	color: #ffcb6b;
+  color: #ffcb6b;
 }
 
 .token.cdata {
-	color: #80cbc4;
+  color: #80cbc4;
 }
 
 .token.char {
-	color: #80cbc4;
+  color: #80cbc4;
 }
 
 .token.class {
-	color: #ffcb6b;
+  color: #ffcb6b;
 }
 
 .token.class-name {
-	color: #f2ff00;
+  color: #f2ff00;
 }
 
 .token.comment {
-	color: #616161;
+  color: #616161;
 }
 
 .token.constant {
-	color: #c792ea;
+  color: #c792ea;
 }
 
 .token.deleted {
-	color: #ff6666;
+  color: #ff6666;
 }
 
 .token.doctype {
-	color: #616161;
+  color: #616161;
 }
 
 .token.entity {
-	color: #ff6666;
+  color: #ff6666;
 }
 
 .token.function {
-	color: #c792ea;
+  color: #c792ea;
 }
 
 .token.hexcode {
-	color: #f2ff00;
+  color: #f2ff00;
 }
 
 .token.id {
-	color: #c792ea;
-	font-weight: bold;
+  color: #c792ea;
+  font-weight: bold;
 }
 
 .token.important {
-	color: #c792ea;
-	font-weight: bold;
+  color: #c792ea;
+  font-weight: bold;
 }
 
 .token.inserted {
-	color: #80cbc4;
+  color: #80cbc4;
 }
 
 .token.keyword {
-	color: #c792ea;
+  color: #c792ea;
 }
 
 .token.number {
-	color: #fd9170;
+  color: #fd9170;
 }
 
 .token.operator {
-	color: #89ddff;
+  color: #89ddff;
 }
 
 .token.prolog {
-	color: #616161;
+  color: #616161;
 }
 
 .token.property {
-	color: #80cbc4;
+  color: #80cbc4;
 }
 
 .token.pseudo-class {
-	color: #a5e844;
+  color: #a5e844;
 }
 
 .token.pseudo-element {
-	color: #a5e844;
+  color: #a5e844;
 }
 
 .token.punctuation {
-	color: #89ddff;
+  color: #89ddff;
 }
 
 .token.regex {
-	color: #f2ff00;
+  color: #f2ff00;
 }
 
 .token.selector {
-	color: #ff6666;
+  color: #ff6666;
 }
 
 .token.string {
-	color: #a5e844;
+  color: #a5e844;
 }
 
 .token.symbol {
-	color: #c792ea;
+  color: #c792ea;
 }
 
 .token.tag {
-	color: #ff6666;
+  color: #ff6666;
 }
 
 .token.unit {
-	color: #fd9170;
+  color: #fd9170;
 }
 
 .token.url {
-	color: #ff6666;
+  color: #ff6666;
 }
 
 .token.variable {
-	color: #ff6666;
+  color: #ff6666;
 }
diff --git a/examples/docs/public/index.css b/examples/docs/public/index.css
index d58558799..1906eeac8 100644
--- a/examples/docs/public/index.css
+++ b/examples/docs/public/index.css
@@ -52,30 +52,31 @@ nav ul {
 }
 
 h1 {
-  font-size: clamp(2.488rem, 1.9240rem + 1.4100vw, 3.052rem);
+  font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem);
 }
 
 h2 {
-  font-size: clamp(2.074rem, 1.7070rem + 0.9175vw, 2.441rem);
+  font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem);
 }
 
 h3 {
-  font-size: clamp(1.728rem, 1.5030rem + 0.5625vw, 1.953rem);
+  font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem);
 }
 
 h4 {
-  font-size: clamp(1.44rem, 1.3170rem + 0.3075vw, 1.563rem);
+  font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem);
 }
 
 h5 {
-  font-size: clamp(1.2rem, 1.1500rem + 0.1250vw, 1.25rem);
+  font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem);
 }
 
 p {
   color: var(--theme-text-light);
 }
 
-small, .text_small {
+small,
+.text_small {
   font-size: 0.833rem;
 }
 
@@ -89,14 +90,14 @@ a {
   gap: 0.5rem;
 }
 
-a > code:not([class*="language"]) {
+a > code:not([class*='language']) {
   position: relative;
   color: var(--theme-accent);
   background: transparent;
   text-underline-offset: var(--padding-block);
 }
 
-a > code:not([class*="language"])::before {
+a > code:not([class*='language'])::before {
   content: '';
   position: absolute;
   top: 0;
@@ -126,13 +127,13 @@ strong {
 
 /* Supporting Content */
 
-code:not([class*="language"]) {
+code:not([class*='language']) {
   --border-radius: 3px;
   --padding-block: 0.2rem;
   --padding-inline: 0.33rem;
 
   font-family: var(--font-mono);
-  font-size: .85em;
+  font-size: 0.85em;
   color: inherit;
   background-color: var(--theme-code-inline-bg);
   padding: var(--padding-block) var(--padding-inline);
@@ -140,7 +141,7 @@ code:not([class*="language"]) {
   border-radius: var(--border-radius);
 }
 
-pre > code:not([class*="language"]) {
+pre > code:not([class*='language']) {
   background-color: transparent;
   padding: 0;
   margin: 0;
@@ -158,7 +159,7 @@ pre {
   padding-right: calc(var(--padding-inline) * 2);
   margin-left: calc(50vw - var(--padding-inline));
   transform: translateX(-50vw);
-  
+
   line-height: 1.414;
   width: calc(100vw + 4px);
   max-width: calc(100% + (var(--padding-inline) * 2));
@@ -211,7 +212,6 @@ button {
   background-color: var(--theme-bg);
 }
 button:hover {
-
 }
 
 #theme-toggle {
@@ -254,7 +254,7 @@ button:hover {
   opacity: 1;
 }
 
-input[name="theme-toggle"] {
+input[name='theme-toggle'] {
   position: absolute;
   opacity: 0;
   top: 0;
@@ -354,7 +354,7 @@ nav h4 {
 }
 
 .nav-groups > li + li {
-  margin-top: 2rem;  
+  margin-top: 2rem;
 }
 
 /* Scrollbar */
@@ -362,7 +362,7 @@ nav h4 {
 /* Firefox */
 body {
   scrollbar-width: thin;
-  scrollbar-color: var(--theme-text-lighter) var(--theme-divider);  
+  scrollbar-color: var(--theme-text-lighter) var(--theme-divider);
 }
 
 /* width */
diff --git a/examples/docs/public/theme.css b/examples/docs/public/theme.css
index d381604c8..7a4613188 100644
--- a/examples/docs/public/theme.css
+++ b/examples/docs/public/theme.css
@@ -1,34 +1,34 @@
 :root {
-  --font-fallback: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+  --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   --font-body: system-ui, var(--font-fallback);
-  --font-mono: source-code-pro,Menlo,Monaco,Consolas,'Courier New',monospace;
+  --font-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 
-  --color-white: #FFF;
+  --color-white: #fff;
   --color-black: #000014;
 
-  --color-gray-50: #F9FAFB;
-  --color-gray-100: #F3F4F6;
-  --color-gray-200: #E5E7EB;
-  --color-gray-300: #D1D5DB;
-  --color-gray-400: #9CA3AF;
-  --color-gray-500: #6B7280;
-  --color-gray-600: #4B5563;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
   --color-gray-700: #374151;
-  --color-gray-800: #1F2937;
+  --color-gray-800: #1f2937;
   --color-gray-900: #111827;
 
-  --color-blue: #3894FF;
-  --color-blue-rgb: 56,148,255;
-  --color-green: #17C083;
-  --color-green-rgb: 23,192,131;
-  --color-orange: #FF5D01;
-  --color-orange-rgb: 255,93,1;
-  --color-purple: #882DE7;
-  --color-purple-rgb: 136,45,231;
-  --color-red: #FF1639;
-  --color-red-rgb: 255,22,57;
-  --color-yellow: #FFBE2D;
-  --color-yellow-rgb: 255,190,45;
+  --color-blue: #3894ff;
+  --color-blue-rgb: 56, 148, 255;
+  --color-green: #17c083;
+  --color-green-rgb: 23, 192, 131;
+  --color-orange: #ff5d01;
+  --color-orange-rgb: 255, 93, 1;
+  --color-purple: #882de7;
+  --color-purple-rgb: 136, 45, 231;
+  --color-red: #ff1639;
+  --color-red-rgb: 255, 22, 57;
+  --color-yellow: #ffbe2d;
+  --color-yellow-rgb: 255, 190, 45;
 }
 
 :root {
diff --git a/examples/framework-lit/astro.config.mjs b/examples/framework-lit/astro.config.mjs
index 20f741ec6..e4cabec8f 100644
--- a/examples/framework-lit/astro.config.mjs
+++ b/examples/framework-lit/astro.config.mjs
@@ -11,7 +11,5 @@ export default {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-lit'
-  ]
-};
\ No newline at end of file
+  renderers: ['@astrojs/renderer-lit'],
+};
diff --git a/examples/framework-lit/public/style/home.css b/examples/framework-lit/public/style/home.css
index c4271a845..280398c17 100644
--- a/examples/framework-lit/public/style/home.css
+++ b/examples/framework-lit/public/style/home.css
@@ -1,38 +1,39 @@
 :root {
-    --font-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
-    --color-light: #F3F4F6;
+  --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
+    'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+  --color-light: #f3f4f6;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-        --color-light: #1F2937;
-    }
+  :root {
+    --color-light: #1f2937;
+  }
 }
 
 a {
-    color: inherit;
+  color: inherit;
 }
 
 header > div {
-    font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
+  font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
 }
 
 header > div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 header h1 {
-    font-size: 1em;
-    font-weight: 500;
+  font-size: 1em;
+  font-weight: 500;
 }
 header img {
-    width: 2em;
-    height: 2.667em;
+  width: 2em;
+  height: 2.667em;
 }
 
 h2 {
-    font-weight: 500;
-    font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
+  font-weight: 500;
+  font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
 }
diff --git a/examples/framework-multiple/astro.config.mjs b/examples/framework-multiple/astro.config.mjs
index 89abd7323..ce25e5aff 100644
--- a/examples/framework-multiple/astro.config.mjs
+++ b/examples/framework-multiple/astro.config.mjs
@@ -11,10 +11,5 @@ export default {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-preact',
-    '@astrojs/renderer-react',
-    '@astrojs/renderer-svelte',
-    '@astrojs/renderer-vue',
-  ]
+  renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
 };
diff --git a/examples/framework-multiple/src/components/VueCounter.vue b/examples/framework-multiple/src/components/VueCounter.vue
index 8179fb1d9..2703b8b9b 100644
--- a/examples/framework-multiple/src/components/VueCounter.vue
+++ b/examples/framework-multiple/src/components/VueCounter.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="counter">
-      <button @click="subtract()">-</button>
-      <pre>{{ count }}</pre>
-      <button @click="add()">+</button>
+    <button @click="subtract()">-</button>
+    <pre>{{ count }}</pre>
+    <button @click="add()">+</button>
   </div>
   <div class="children">
-      <slot />
+    <slot />
   </div>
 </template>
 
@@ -13,15 +13,15 @@
 import { ref } from 'vue';
 export default {
   setup() {
-    const count = ref(0)
-    const add = () => count.value = count.value + 1;
-    const subtract = () => count.value = count.value - 1;
+    const count = ref(0);
+    const add = () => (count.value = count.value + 1);
+    const subtract = () => (count.value = count.value - 1);
 
     return {
       count,
       add,
-      subtract
-    }
-  }
-}
+      subtract,
+    };
+  },
+};
 </script>
diff --git a/examples/framework-preact/astro.config.mjs b/examples/framework-preact/astro.config.mjs
index 2d1454d51..350d6c7de 100644
--- a/examples/framework-preact/astro.config.mjs
+++ b/examples/framework-preact/astro.config.mjs
@@ -11,7 +11,5 @@ export default {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-preact'
-  ]
+  renderers: ['@astrojs/renderer-preact'],
 };
diff --git a/examples/framework-react/astro.config.mjs b/examples/framework-react/astro.config.mjs
index f0e022923..da818c2be 100644
--- a/examples/framework-react/astro.config.mjs
+++ b/examples/framework-react/astro.config.mjs
@@ -11,7 +11,5 @@ export default {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-react'
-  ]
+  renderers: ['@astrojs/renderer-react'],
 };
diff --git a/examples/framework-svelte/astro.config.mjs b/examples/framework-svelte/astro.config.mjs
index 59ddc78f0..40dbab1ad 100644
--- a/examples/framework-svelte/astro.config.mjs
+++ b/examples/framework-svelte/astro.config.mjs
@@ -11,7 +11,5 @@ export default {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-svelte'
-  ]
+  renderers: ['@astrojs/renderer-svelte'],
 };
diff --git a/examples/framework-vue/astro.config.mjs b/examples/framework-vue/astro.config.mjs
index 1fec0a4dd..964aa2145 100644
--- a/examples/framework-vue/astro.config.mjs
+++ b/examples/framework-vue/astro.config.mjs
@@ -11,7 +11,5 @@ export default {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-vue'
-  ]
+  renderers: ['@astrojs/renderer-vue'],
 };
diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue
index 8179fb1d9..2703b8b9b 100644
--- a/examples/framework-vue/src/components/Counter.vue
+++ b/examples/framework-vue/src/components/Counter.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="counter">
-      <button @click="subtract()">-</button>
-      <pre>{{ count }}</pre>
-      <button @click="add()">+</button>
+    <button @click="subtract()">-</button>
+    <pre>{{ count }}</pre>
+    <button @click="add()">+</button>
   </div>
   <div class="children">
-      <slot />
+    <slot />
   </div>
 </template>
 
@@ -13,15 +13,15 @@
 import { ref } from 'vue';
 export default {
   setup() {
-    const count = ref(0)
-    const add = () => count.value = count.value + 1;
-    const subtract = () => count.value = count.value - 1;
+    const count = ref(0);
+    const add = () => (count.value = count.value + 1);
+    const subtract = () => (count.value = count.value - 1);
 
     return {
       count,
       add,
-      subtract
-    }
-  }
-}
+      subtract,
+    };
+  },
+};
 </script>
diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs
index 2d1454d51..350d6c7de 100644
--- a/examples/portfolio/astro.config.mjs
+++ b/examples/portfolio/astro.config.mjs
@@ -11,7 +11,5 @@ export default {
     // port: 3000,         // The port to run the dev server on.
     // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-preact'
-  ]
+  renderers: ['@astrojs/renderer-preact'],
 };
diff --git a/examples/portfolio/public/global.scss b/examples/portfolio/public/global.scss
index 3cac56a42..b5a95caf2 100644
--- a/examples/portfolio/public/global.scss
+++ b/examples/portfolio/public/global.scss
@@ -86,35 +86,69 @@ h1 {
 $colors: 'black', 'blue', 'white';
 @each $color in $colors {
   // text color
-  .tc-#{$color} { color: var(--c-#{color}); }
+  .tc-#{$color} {
+    color: var(--c-#{color});
+  }
   // background color
-  .bg-#{$color} { background-color: var(--c-#{color}); }
+  .bg-#{$color} {
+    background-color: var(--c-#{color});
+  }
 }
 
 // font size
 @for $i from 0 through 18 {
-  .f-u#{$i} { font-size: var(--f-u#{$i}); }
-  .f-d#{$i} { font-size: var(--f-d#{$i}); }
+  .f-u#{$i} {
+    font-size: var(--f-u#{$i});
+  }
+  .f-d#{$i} {
+    font-size: var(--f-d#{$i});
+  }
 }
 
 // margin & padding
 @for $i from 0 through 36 {
-  .ma#{$i} { margin: #{0.5 * $i}rem; }
-  .mt#{$i} { margin-top: #{0.5 * $i}rem; }
-  .mr#{$i} { margin-right: #{0.5 * $i}rem; }
-  .mb#{$i} { margin-bottom: #{0.5 * $i}rem; }
-  .ml#{$i} { margin-left: #{0.5 * $i}rem; }
-  .pa#{$i} { padding: #{0.5 * $i}rem; }
-  .pt#{$i} { padding-top: #{0.5 * $i}rem; }
-  .pr#{$i} { padding-right: #{0.5 * $i}rem; }
-  .pb#{$i} { padding-bottom: #{0.5 * $i}rem; }
-  .pl#{$i} { padding-left: #{0.5 * $i}rem; }
+  .ma#{$i} {
+    margin: #{0.5 * $i}rem;
+  }
+  .mt#{$i} {
+    margin-top: #{0.5 * $i}rem;
+  }
+  .mr#{$i} {
+    margin-right: #{0.5 * $i}rem;
+  }
+  .mb#{$i} {
+    margin-bottom: #{0.5 * $i}rem;
+  }
+  .ml#{$i} {
+    margin-left: #{0.5 * $i}rem;
+  }
+  .pa#{$i} {
+    padding: #{0.5 * $i}rem;
+  }
+  .pt#{$i} {
+    padding-top: #{0.5 * $i}rem;
+  }
+  .pr#{$i} {
+    padding-right: #{0.5 * $i}rem;
+  }
+  .pb#{$i} {
+    padding-bottom: #{0.5 * $i}rem;
+  }
+  .pl#{$i} {
+    padding-left: #{0.5 * $i}rem;
+  }
 }
 
 // text align
-.tac { text-align: center; }
-.tal { text-align: left; }
-.tar { text-align: right; }
+.tac {
+  text-align: center;
+}
+.tal {
+  text-align: left;
+}
+.tar {
+  text-align: right;
+}
 
 // wrapper
 .wrapper {
@@ -126,4 +160,4 @@ $colors: 'black', 'blue', 'white';
 }
 .wrapper__readable {
   max-width: 50em;
-}
\ No newline at end of file
+}
diff --git a/examples/snowpack/astro.config.mjs b/examples/snowpack/astro.config.mjs
index 15bc31b47..b829c204f 100644
--- a/examples/snowpack/astro.config.mjs
+++ b/examples/snowpack/astro.config.mjs
@@ -6,6 +6,6 @@ export default {
   renderers: [
     '@astrojs/renderer-vue',
     '@astrojs/renderer-svelte',
-    '@astrojs/renderer-preact'
-  ]
+    '@astrojs/renderer-preact',
+  ],
 };
diff --git a/examples/snowpack/public/favicon/site.webmanifest b/examples/snowpack/public/favicon/site.webmanifest
index 45dc8a206..fa99de77d 100644
--- a/examples/snowpack/public/favicon/site.webmanifest
+++ b/examples/snowpack/public/favicon/site.webmanifest
@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/examples/snowpack/public/styles/_utils.scss b/examples/snowpack/public/styles/_utils.scss
index d61627ddb..ace88d71d 100644
--- a/examples/snowpack/public/styles/_utils.scss
+++ b/examples/snowpack/public/styles/_utils.scss
@@ -4,22 +4,48 @@
 
 // margin & padding
 @for $i from 0 through 36 {
-  .ma#{$i} { margin: #{0.5 * $i}rem; }
-  .mt#{$i} { margin-top: #{0.5 * $i}rem; }
-  .mr#{$i} { margin-right: #{0.5 * $i}rem; }
-  .mb#{$i} { margin-bottom: #{0.5 * $i}rem; }
-  .ml#{$i} { margin-left: #{0.5 * $i}rem; }
-  .pa#{$i} { padding: #{0.5 * $i}rem; }
-  .pt#{$i} { padding-top: #{0.5 * $i}rem; }
-  .pr#{$i} { padding-right: #{0.5 * $i}rem; }
-  .pb#{$i} { padding-bottom: #{0.5 * $i}rem; }
-  .pl#{$i} { padding-left: #{0.5 * $i}rem; }
+  .ma#{$i} {
+    margin: #{0.5 * $i}rem;
+  }
+  .mt#{$i} {
+    margin-top: #{0.5 * $i}rem;
+  }
+  .mr#{$i} {
+    margin-right: #{0.5 * $i}rem;
+  }
+  .mb#{$i} {
+    margin-bottom: #{0.5 * $i}rem;
+  }
+  .ml#{$i} {
+    margin-left: #{0.5 * $i}rem;
+  }
+  .pa#{$i} {
+    padding: #{0.5 * $i}rem;
+  }
+  .pt#{$i} {
+    padding-top: #{0.5 * $i}rem;
+  }
+  .pr#{$i} {
+    padding-right: #{0.5 * $i}rem;
+  }
+  .pb#{$i} {
+    padding-bottom: #{0.5 * $i}rem;
+  }
+  .pl#{$i} {
+    padding-left: #{0.5 * $i}rem;
+  }
 }
 
 // text align
-.tac { text-align: center; }
-.tal { text-align: left; }
-.tar { text-align: right; }
+.tac {
+  text-align: center;
+}
+.tal {
+  text-align: left;
+}
+.tar {
+  text-align: right;
+}
 
 // wrapper
 .wrapper {
@@ -32,4 +58,4 @@
 
 .wrapper__readable {
   max-width: 55em;
-}
\ No newline at end of file
+}
diff --git a/examples/snowpack/src/components/NewsTitle.vue b/examples/snowpack/src/components/NewsTitle.vue
index 00194ac1e..fdc77b600 100644
--- a/examples/snowpack/src/components/NewsTitle.vue
+++ b/examples/snowpack/src/components/NewsTitle.vue
@@ -8,8 +8,8 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
-    }
-  }
-}
+      required: true,
+    },
+  },
+};
 </script>
diff --git a/examples/starter/public/style/home.css b/examples/starter/public/style/home.css
index 70741a8da..39de76a44 100644
--- a/examples/starter/public/style/home.css
+++ b/examples/starter/public/style/home.css
@@ -1,40 +1,41 @@
 :root {
-    --font-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
-    --color-light: #F3F4F6;
+  --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
+    'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+  --color-light: #f3f4f6;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-        --color-light: #1F2937;
-    }
+  :root {
+    --color-light: #1f2937;
+  }
 }
 
 a {
-    color: inherit;
+  color: inherit;
 }
 
 header > div {
-    font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
+  font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
 }
 
 header > div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 header h1 {
-    font-size: 1em;
-    font-weight: 500;
+  font-size: 1em;
+  font-weight: 500;
 }
 header img {
-    width: 2em;
-    height: 2.667em;
+  width: 2em;
+  height: 2.667em;
 }
 
 h2 {
-    font-weight: 500;
-    font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
+  font-weight: 500;
+  font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
 }
 
 .counter {
diff --git a/examples/with-markdown-plugins/astro.config.mjs b/examples/with-markdown-plugins/astro.config.mjs
index 9057b5c2f..e02cde821 100644
--- a/examples/with-markdown-plugins/astro.config.mjs
+++ b/examples/with-markdown-plugins/astro.config.mjs
@@ -4,19 +4,15 @@ export default {
   // dist: './dist',       // When running `astro build`, path to final static output
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
-    site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
+    site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
     // sitemap: true,      // Generate sitemap (set to "false" to disable)
   },
   markdownOptions: {
-    remarkPlugins: [
-      'remark-code-titles',
-      'remark-slug',
-      ['remark-autolink-headings', { behavior: 'prepend' }],
-    ],
+    remarkPlugins: ['remark-code-titles', 'remark-slug', ['remark-autolink-headings', { behavior: 'prepend' }]],
     rehypePlugins: [
-      ['rehype-toc', { headings: ["h2", "h3"] }],
-      ['rehype-add-classes', { 'h1,h2,h3': 'title', }],
-    ]
+      ['rehype-toc', { headings: ['h2', 'h3'] }],
+      ['rehype-add-classes', { 'h1,h2,h3': 'title' }],
+    ],
   },
   devOptions: {
     // port: 3000,         // The port to run the dev server on.
diff --git a/examples/with-markdown-plugins/public/global.css b/examples/with-markdown-plugins/public/global.css
index f1e536546..ea585d269 100644
--- a/examples/with-markdown-plugins/public/global.css
+++ b/examples/with-markdown-plugins/public/global.css
@@ -34,20 +34,20 @@ body {
 }
 
 .remark-code-title,
-pre[class^="language-"] {
+pre[class^='language-'] {
   padding: 10px;
   margin: 0;
 }
 
 .remark-code-title {
-  border-bottom: 1px solid rgba(0,0,0,.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 4px 4px 0 0;
-  background: rgba(0,0,0,.08);
+  background: rgba(0, 0, 0, 0.08);
   font-family: monospace;
   font-weight: bold;
 }
 
-pre[class^="language-"] {
-  background: rgba(0,0,0,.05);
+pre[class^='language-'] {
+  background: rgba(0, 0, 0, 0.05);
   border-radius: 0 0 4px 4px;
 }
diff --git a/examples/with-markdown/public/styles/global.scss b/examples/with-markdown/public/styles/global.scss
index 1eda4646f..5d758a003 100644
--- a/examples/with-markdown/public/styles/global.scss
+++ b/examples/with-markdown/public/styles/global.scss
@@ -3,4 +3,4 @@
 body {
   max-width: 900px;
   margin: auto;
-}
\ No newline at end of file
+}
diff --git a/examples/with-markdown/src/components/VueCounter.vue b/examples/with-markdown/src/components/VueCounter.vue
index 8179fb1d9..2703b8b9b 100644
--- a/examples/with-markdown/src/components/VueCounter.vue
+++ b/examples/with-markdown/src/components/VueCounter.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="counter">
-      <button @click="subtract()">-</button>
-      <pre>{{ count }}</pre>
-      <button @click="add()">+</button>
+    <button @click="subtract()">-</button>
+    <pre>{{ count }}</pre>
+    <button @click="add()">+</button>
   </div>
   <div class="children">
-      <slot />
+    <slot />
   </div>
 </template>
 
@@ -13,15 +13,15 @@
 import { ref } from 'vue';
 export default {
   setup() {
-    const count = ref(0)
-    const add = () => count.value = count.value + 1;
-    const subtract = () => count.value = count.value - 1;
+    const count = ref(0);
+    const add = () => (count.value = count.value + 1);
+    const subtract = () => (count.value = count.value - 1);
 
     return {
       count,
       add,
-      subtract
-    }
-  }
-}
+      subtract,
+    };
+  },
+};
 </script>
diff --git a/examples/with-nanostores/astro.config.mjs b/examples/with-nanostores/astro.config.mjs
index ce0e15031..05b7f0961 100644
--- a/examples/with-nanostores/astro.config.mjs
+++ b/examples/with-nanostores/astro.config.mjs
@@ -9,12 +9,7 @@ export default {
   },
   devOptions: {
     // port: 3000,         // The port to run the dev server on.
-    tailwindConfig: './tailwind.config.js',  // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
+    tailwindConfig: './tailwind.config.js', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-preact',
-    '@astrojs/renderer-react',
-    '@astrojs/renderer-svelte',
-    '@astrojs/renderer-vue',
-  ]
+  renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
 };
diff --git a/examples/with-nanostores/public/style/home.css b/examples/with-nanostores/public/style/home.css
index c4271a845..280398c17 100644
--- a/examples/with-nanostores/public/style/home.css
+++ b/examples/with-nanostores/public/style/home.css
@@ -1,38 +1,39 @@
 :root {
-    --font-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
-    --color-light: #F3F4F6;
+  --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
+    'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+  --color-light: #f3f4f6;
 }
 
 @media (prefers-color-scheme: dark) {
-    :root {
-        --color-light: #1F2937;
-    }
+  :root {
+    --color-light: #1f2937;
+  }
 }
 
 a {
-    color: inherit;
+  color: inherit;
 }
 
 header > div {
-    font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
+  font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
 }
 
 header > div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 header h1 {
-    font-size: 1em;
-    font-weight: 500;
+  font-size: 1em;
+  font-weight: 500;
 }
 header img {
-    width: 2em;
-    height: 2.667em;
+  width: 2em;
+  height: 2.667em;
 }
 
 h2 {
-    font-weight: 500;
-    font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
+  font-weight: 500;
+  font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
 }
diff --git a/examples/with-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue
index 68dcd2065..1846c4d21 100644
--- a/examples/with-nanostores/src/components/AdminsVue.vue
+++ b/examples/with-nanostores/src/components/AdminsVue.vue
@@ -2,12 +2,12 @@
   <h1>Vue</h1>
   <ul>
     <li v-for="user in list" :key="user.name">
-      {{JSON.stringify(user, null, 2)}}
+      {{ JSON.stringify(user, null, 2) }}
     </li>
   </ul>
   <div>
     <h3>Counter</h3>
-    <p>{{count}}</p>
+    <p>{{ count }}</p>
     <button @click="decreaseCounter">-1</button>
     <button @click="increaseCounter">+1</button>
   </div>
@@ -15,16 +15,16 @@
 </template>
 
 <script>
-  import { useStore } from 'nanostores/vue'
+import { useStore } from 'nanostores/vue';
 
-  import { admins } from '../store/admins.js'
-  import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'
+import { admins } from '../store/admins.js';
+import { counter, increaseCounter, decreaseCounter } from '../store/counter.js';
 
-  export default {
-    setup() {
-      const list = useStore(admins)
-      const count = useStore(counter)
-      return { list, count, increaseCounter, decreaseCounter }
-    }
-  }
+export default {
+  setup() {
+    const list = useStore(admins);
+    const count = useStore(counter);
+    return { list, count, increaseCounter, decreaseCounter };
+  },
+};
 </script>
diff --git a/examples/with-tailwindcss/astro.config.mjs b/examples/with-tailwindcss/astro.config.mjs
index b69c40cd4..f93e801ce 100644
--- a/examples/with-tailwindcss/astro.config.mjs
+++ b/examples/with-tailwindcss/astro.config.mjs
@@ -5,13 +5,11 @@ export default {
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
     // site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
-    sitemap: true,         // Generate sitemap (set to "false" to disable)
+    sitemap: true, // Generate sitemap (set to "false" to disable)
   },
   devOptions: {
     // port: 3000,         // The port to run the dev server on.
-    tailwindConfig: './tailwind.config.js',  // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
+    tailwindConfig: './tailwind.config.js', // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
   },
-  renderers: [
-    '@astrojs/renderer-preact'
-  ]
+  renderers: ['@astrojs/renderer-preact'],
 };