Running prettier on the website files

website/bundling.html

@@ -1 +1,4 @@
-<include src="website/include/layout.html" locals='{"title": "Bundling", "url": "bundling.html", "page": "website/pages/bundling.md"}' />
+<include
+  src="website/include/layout.html"
+  locals='{"title": "Bundling", "url": "bundling.html", "page": "website/pages/bundling.md"}'
+/>

website/css-modules.html

@@ -1 +1,4 @@
-<include src="website/include/layout.html" locals='{"title": "CSS Modules", "url": "css-modules.html", "page": "website/pages/css-modules.md"}' />
+<include
+  src="website/include/layout.html"
+  locals='{"title": "CSS Modules", "url": "css-modules.html", "page": "website/pages/css-modules.md"}'
+/>

website/docs.css

@@ -1,24 +1,40 @@
-@import "synthwave.css";
+@import 'synthwave.css';
 
 html {
   color-scheme: dark;
   background: #111;
   font-family: system-ui;
   --gold: lch(80% 82.34 80.104);
   --gold-text: lch(85% 82.34 80.104);
-  --gold-shadow: lch(80% 82.34 80.104 / .7);
+  --gold-shadow: lch(80% 82.34 80.104 / 0.7);
 }
 
 @font-face {
-  font-family:"din-1451-lt-pro-engschrift";
-  src:url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/l?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/d?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/a?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("opentype");
-  font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
+  font-family: 'din-1451-lt-pro-engschrift';
+  src: url('https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/l?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/d?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/a?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
 }
 
 @font-face {
-  font-family:"urbane-rounded";
-  src:url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("opentype");
-  font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
+  font-family: 'urbane-rounded';
+  src: url('https://use.typekit.net/af/916187/00000000000000007735bfa0/30/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/916187/00000000000000007735bfa0/30/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/916187/00000000000000007735bfa0/30/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: normal;
 }
 
 header {
@@ -27,17 +43,23 @@ header {
   margin: 0 auto;
   padding: 50px 0;
   font-size: 16px;
-  background: radial-gradient(closest-side, lch(80% 82.34 80.104 / .25), transparent);
+  background: radial-gradient(
+    closest-side,
+    lch(80% 82.34 80.104 / 0.25),
+    transparent
+  );
   display: grid;
   column-gap: 30px;
   grid-area: header;
-  grid-template-areas: "logo header"
-                        "logo subheader"
-                        ". links";
+  grid-template-areas:
+    'logo header'
+    'logo subheader'
+    '. links';
 }
 
 header svg {
-  filter: drop-shadow(0 0 5px var(--gold-shadow)) drop-shadow(0 0 15px var(--gold-shadow));
+  filter: drop-shadow(0 0 5px var(--gold-shadow))
+    drop-shadow(0 0 15px var(--gold-shadow));
   grid-area: logo;
   place-self: center end;
   width: 50px;
@@ -58,7 +80,8 @@ header .title {
   font-weight: 600;
   -webkit-text-stroke: 2px var(--gold-text);
   color: transparent;
-  filter: drop-shadow(0 0 3px var(--gold-shadow)) drop-shadow(0 0 10px var(--gold));
+  filter: drop-shadow(0 0 3px var(--gold-shadow))
+    drop-shadow(0 0 10px var(--gold));
   margin: 0;
   letter-spacing: -0.02em;
   text-decoration: none;
@@ -69,11 +92,13 @@ header .title::selection {
   background-color: var(--gold-text);
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   font-family: urbane-rounded, ui-rounded;
   font-weight: 600;
   color: lch(65% 85 35);
-  margin: 2em 0 .5em 0;
+  margin: 2em 0 0.5em 0;
   letter-spacing: -0.02em;
 }
 
@@ -91,7 +116,7 @@ header p a {
   font-weight: 600;
   font-size: 1em;
   color: lch(90% 50.34 80.104);
-  filter: drop-shadow(0 0 8px lch(90% 50.34 80.104 / .7));
+  filter: drop-shadow(0 0 8px lch(90% 50.34 80.104 / 0.7));
   text-decoration-color: lch(90% 50.34 80.104 / 0);
   text-decoration-style: wavy;
   text-decoration-thickness: 2px;
@@ -106,10 +131,11 @@ header a:hover {
 
 @media (width < 500px) {
   header {
-    grid-template-areas: "logo"
-                          "header"
-                          "subheader"
-                          "links";
+    grid-template-areas:
+      'logo'
+      'header'
+      'subheader'
+      'links';
     place-items: center;
     text-align: center;
     gap: 8px;
@@ -141,9 +167,10 @@ body {
   display: grid;
   grid-template-columns: 180px 1fr;
   gap: 40px;
-  grid-template-areas: "header header"
-                       "nav    main"
-                       "footer footer";
+  grid-template-areas:
+    'header header'
+    'nav    main'
+    'footer footer';
 }
 
 main {
@@ -153,7 +180,8 @@ main {
   position: relative;
 }
 
-p, li {
+p,
+li {
   line-height: 1.5em;
 }
 
@@ -169,7 +197,7 @@ nav {
   grid-area: nav;
   text-align: end;
   padding-right: 20px;
-  border-right: 1px solid lch(90% 50.34 80.104 / .1);
+  border-right: 1px solid lch(90% 50.34 80.104 / 0.1);
   height: fit-content;
   position: sticky;
   top: 40px;
@@ -189,7 +217,7 @@ main > aside {
   position: absolute;
   left: 100%;
   margin-left: 40px;
-  border-left: 1px solid lch(90% 50.34 80.104 / .1);
+  border-left: 1px solid lch(90% 50.34 80.104 / 0.1);
   padding-left: 20px;
   overflow: auto;
   max-height: calc(100vh - 80px);
@@ -264,15 +292,15 @@ a[aria-current] {
   nav {
     text-align: start;
     border-right: none;
-    border-bottom: 1px solid lch(90% 50.34 80.104 / .1);
+    border-bottom: 1px solid lch(90% 50.34 80.104 / 0.1);
     padding-bottom: 20px;
     position: static;
   }
 }
 
 .warning {
   border: 4px solid lch(70% 82.34 80.104);
-  background: lch(80% 82.34 80.104 / .15);
+  background: lch(80% 82.34 80.104 / 0.15);
   padding: 20px;
   border-radius: 8px;
   margin: 20px 0;
@@ -287,7 +315,7 @@ a[aria-current] {
 }
 
 .warning pre {
-  background: rgb(0 0 0 / .65);
+  background: rgb(0 0 0 / 0.65);
 }
 
 .warning :is(h1, h2, h3) {

website/docs.html

@@ -1 +1,4 @@
-<include src="website/include/layout.html" locals='{"title": "Getting Started", "url": "docs.html", "page": "website/pages/docs.md"}' />
+<include
+  src="website/include/layout.html"
+  locals='{"title": "Getting Started", "url": "docs.html", "page": "website/pages/docs.md"}'
+/>

website/docs.js

@@ -8,7 +8,7 @@ for (let link of tocLinks) {
 }
 
 let intersectingHeaders = new Set();
-let observer = new IntersectionObserver(entries => {
+let observer = new IntersectionObserver((entries) => {
   for (let entry of entries) {
     if (entry.isIntersecting) {
       intersectingHeaders.add(entry.target);

website/include/layout.html

@@ -1,32 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <title>{{ title }} – Lightning CSS</title>
-    <link rel="icon" href="favicon.svg">
-    <link rel="mask-icon" href="favicon.svg" color="#f9bb03">
-    <meta name="description" content="An extremely fast CSS parser, transformer, bundler, and minifier.">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:image" content="og.jpeg">
-    <meta name="twitter:site" content="@lightningcss">
-    <meta name="twitter:creator" content="@lightningcss">
-    <meta property="og:type" content="website">
-    <meta property="og:locale" content="en_US">
-    <meta property="og:url" content="https://lightningcss.dev/{{ url }}">
-    <meta property="og:title" content="{{ title }} – Lightning CSS">
-    <meta property="og:description" content="An extremely fast CSS parser, transformer, bundler, and minifier.">
-    <meta property="og:image" content="og.jpeg">
-    <link rel="stylesheet" href="docs.css">
+    <link rel="icon" href="favicon.svg" />
+    <link rel="mask-icon" href="favicon.svg" color="#f9bb03" />
+    <meta
+      name="description"
+      content="An extremely fast CSS parser, transformer, bundler, and minifier."
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="og.jpeg" />
+    <meta name="twitter:site" content="@lightningcss" />
+    <meta name="twitter:creator" content="@lightningcss" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:url" content="https://lightningcss.dev/{{ url }}" />
+    <meta property="og:title" content="{{ title }} – Lightning CSS" />
+    <meta
+      property="og:description"
+      content="An extremely fast CSS parser, transformer, bundler, and minifier."
+    />
+    <meta property="og:image" content="og.jpeg" />
+    <link rel="stylesheet" href="docs.css" />
   </head>
   <body>
     <header>
       <svg viewBox="495 168 360 654">
-        <path class="outer" d="M594.41,805c-.71,0-1.43-.15-2.11-.47-2.2-1.03-3.34-3.48-2.72-5.83l67.98-253.71h-140.45c-1.86,0-3.57-1.04-4.44-2.69-.86-1.65-.73-3.65,.34-5.18l26.85-38.35q25.56-36.51,104.91-149.83l106.31-151.82c1.39-1.99,4.01-2.69,6.21-1.66,2.2,1.03,3.34,3.48,2.72,5.83l-67.98,253.71h140.45c1.86,0,3.57,1.04,4.43,2.69,.86,1.65,.73,3.65-.34,5.18l-238.07,340c-.96,1.37-2.51,2.13-4.1,2.13Zm-67.69-270h137.37c1.55,0,3.02,.72,3.97,1.96,.95,1.23,1.27,2.84,.86,4.34l-62.33,232.61,216.29-308.9h-137.36c-1.55,0-3.02-.72-3.97-1.96-.95-1.23-1.27-2.84-.86-4.34l62.33-232.61-90.04,128.59q-79.35,113.32-104.91,149.83l-21.34,30.48Z"/>
-        <path class="inner" d="M594.41,805c-.71,0-1.43-.15-2.11-.47-2.2-1.03-3.34-3.48-2.72-5.83l67.98-253.71h-140.45c-1.86,0-3.57-1.04-4.44-2.69-.86-1.65-.73-3.65,.34-5.18l26.85-38.35q25.56-36.51,104.91-149.83l106.31-151.82c1.39-1.99,4.01-2.69,6.21-1.66,2.2,1.03,3.34,3.48,2.72,5.83l-67.98,253.71h140.45c1.86,0,3.57,1.04,4.43,2.69,.86,1.65,.73,3.65-.34,5.18l-238.07,340c-.96,1.37-2.51,2.13-4.1,2.13Zm-67.69-270h137.37c1.55,0,3.02,.72,3.97,1.96,.95,1.23,1.27,2.84,.86,4.34l-62.33,232.61,216.29-308.9h-137.36c-1.55,0-3.02-.72-3.97-1.96-.95-1.23-1.27-2.84-.86-4.34l62.33-232.61-90.04,128.59q-79.35,113.32-104.91,149.83l-21.34,30.48Z"/>
+        <path
+          class="outer"
+          d="M594.41,805c-.71,0-1.43-.15-2.11-.47-2.2-1.03-3.34-3.48-2.72-5.83l67.98-253.71h-140.45c-1.86,0-3.57-1.04-4.44-2.69-.86-1.65-.73-3.65,.34-5.18l26.85-38.35q25.56-36.51,104.91-149.83l106.31-151.82c1.39-1.99,4.01-2.69,6.21-1.66,2.2,1.03,3.34,3.48,2.72,5.83l-67.98,253.71h140.45c1.86,0,3.57,1.04,4.43,2.69,.86,1.65,.73,3.65-.34,5.18l-238.07,340c-.96,1.37-2.51,2.13-4.1,2.13Zm-67.69-270h137.37c1.55,0,3.02,.72,3.97,1.96,.95,1.23,1.27,2.84,.86,4.34l-62.33,232.61,216.29-308.9h-137.36c-1.55,0-3.02-.72-3.97-1.96-.95-1.23-1.27-2.84-.86-4.34l62.33-232.61-90.04,128.59q-79.35,113.32-104.91,149.83l-21.34,30.48Z"
+        />
+        <path
+          class="inner"
+          d="M594.41,805c-.71,0-1.43-.15-2.11-.47-2.2-1.03-3.34-3.48-2.72-5.83l67.98-253.71h-140.45c-1.86,0-3.57-1.04-4.44-2.69-.86-1.65-.73-3.65,.34-5.18l26.85-38.35q25.56-36.51,104.91-149.83l106.31-151.82c1.39-1.99,4.01-2.69,6.21-1.66,2.2,1.03,3.34,3.48,2.72,5.83l-67.98,253.71h140.45c1.86,0,3.57,1.04,4.43,2.69,.86,1.65,.73,3.65-.34,5.18l-238.07,340c-.96,1.37-2.51,2.13-4.1,2.13Zm-67.69-270h137.37c1.55,0,3.02,.72,3.97,1.96,.95,1.23,1.27,2.84,.86,4.34l-62.33,232.61,216.29-308.9h-137.36c-1.55,0-3.02-.72-3.97-1.96-.95-1.23-1.27-2.84-.86-4.34l62.33-232.61-90.04,128.59q-79.35,113.32-104.91,149.83l-21.34,30.48Z"
+        />
       </svg>
       <a href="/" class="title">Lightning CSS</a>
-      <p><a href="./playground/index.html">Playground</a> • <a href="docs.html">Docs</a> • <a href="https://docs.rs/lightningcss" target="_blank">Rust docs</a> • <a href="https://npmjs.com/lightningcss" target="_blank">npm</a>  • <a href="https://github.com/parcel-bundler/lightningcss" target="_blank">GitHub</a></p>
+      <p>
+        <a href="./playground/index.html">Playground</a> •
+        <a href="docs.html">Docs</a> •
+        <a href="https://docs.rs/lightningcss" target="_blank">Rust docs</a> •
+        <a href="https://npmjs.com/lightningcss" target="_blank">npm</a> •
+        <a href="https://github.com/parcel-bundler/lightningcss" target="_blank"
+          >GitHub</a
+        >
+      </p>
     </header>
     <nav>
       <h3>Docs</h3>
@@ -37,15 +60,17 @@ <h3>Docs</h3>
         <li><a href="bundling.html">Bundling</a></li>
         <li><a href="minification.html">Minification</a></li>
         <li><a href="transforms.html">Custom transforms</a></li>
-        <script>document.querySelector(`nav a[href="${location.pathname}"]`).setAttribute('aria-current', 'page')</script>
+        <script>
+          document
+            .querySelector(`nav a[href="${location.pathname}"]`)
+            .setAttribute('aria-current', 'page');
+        </script>
       </ul>
     </nav>
     <main>
       <markdown src="{{ page }}"></markdown>
     </main>
-    <footer>
-      Copyright © 2022 Devon Govett and Parcel Contributors.
-    </footer>
+    <footer>Copyright © 2022 Devon Govett and Parcel Contributors.</footer>
     <script async src="docs.js"></script>
   </body>
 </html>