feat: add gzipped size calculator

lowlighter · May 16, 2024 · 38e5bd2 · 38e5bd2
1 parent c689953
commit 38e5bd2
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ Ideal for fast prototyping, static HTML pages, Markdown-generated documents, and
 - ✅ **No** JavaScript
 - ✅ **No** configuration needed
 - ✅ **No** refactoring required
+- ✅ `~6kB` gzipped _(can be further reduced)_
 
 ### 📸 Screenshot examples
 

diff --git a/app/build/css.ts b/app/build/css.ts
@@ -19,7 +19,5 @@ export async function css(exclude = [] as string[]) {
   for (const { path } of files) {
     css += await Deno.readTextFile(path)
   }
-  const bundled = await bundle(css, { minify: true, banner, rules: { "no-descending-specificity": false, "no-duplicate-selectors": false } })
-  console.log(`Bundle size: ${new Blob([bundled], { type: "text/css" }).size} bytes`)
-  return bundled
+  return bundle(css, { minify: true, banner, rules: { "no-descending-specificity": false, "no-duplicate-selectors": false } })
 }
diff --git a/app/build/html.ts b/app/build/html.ts
@@ -8,6 +8,8 @@ import { default as hljs } from "https://esm.sh/[email protected]/lib/language
 import { default as hlmd } from "https://esm.sh/[email protected]/lib/languages/markdown"
 import { default as hlsh } from "https://esm.sh/[email protected]/lib/languages/diff"
 import { DOMParser } from "https://deno.land/x/[email protected]/deno-dom-wasm.ts"
+import { gzipSize } from "https://deno.land/x/[email protected]/mod.ts"
+import { css } from "./css.ts"
 syntax.registerLanguage("xml", hlxml)
 syntax.registerLanguage("css", hlcss)
 syntax.registerLanguage("lisp", hllisp)
@@ -69,6 +71,12 @@ export async function html() {
     }
   })
   document.querySelector("aside > nav")!.innerHTML = `<ul>${nav.join("")}</ul>`
+  // Compute gzip size
+  const size = document.querySelector("[data-matcha-size]") ? gzipSize(await css()) : NaN
+  Array.from(document.querySelectorAll("[data-matcha-size]")).forEach((_element) => {
+    const element = _element as unknown as HTMLElement
+    element.innerText = `~${new Intl.NumberFormat("en-US", { style: "unit", unit: "kilobyte", unitDisplay: "narrow", maximumSignificantDigits: 3 }).format(size / 1000)}`
+  })
   return `<!DOCTYPE html>${document.documentElement!.outerHTML}`
 }
 

diff --git a/app/mod.html b/app/mod.html
@@ -53,6 +53,7 @@ <h1 id="matcha"><a href="#matcha">matcha.css</a></h1>
             <li><b class="success">✓</b> <em>No</em> JavaScript</li>
             <li><b class="success">✓</b> <em>No</em> configuration needed</li>
             <li><b class="success">✓</b> <em>No</em> refactoring required</li>
+            <li><b class="success">✓</b> <code data-matcha-size></code> gzipped <small><i class="muted">(can be further reduced)</i></small></li>
           </ul>
           <p class="muted">
             <small><b>🍵 Fun Fact:</b> This very page is styled using <em>matcha.css</em>!</small>

diff --git a/deno.lock b/deno.lock