feat(root): add shadow root support (#52)

Author: lowlighter

.github/FUNDING.yml

@@ -1 +1 @@
-github: lowlighter
+github: lowlighter

.github/workflows/ci.yml

@@ -28,4 +28,4 @@ jobs:
       - name: Run npm publish
         run: |
           deno task build
-          deno run --allow-all jsr:@libs/bundle/ts/cli/publish deno.jsonc --loglevel debug --npm.registry 'https://registry.npmjs.org' --npm.token '${{ secrets.NPM_TOKEN }}' --npm.access public
+          deno run --allow-all jsr:@libs/bundle/ts/cli/publish deno.jsonc --loglevel debug --npm.registry 'https://registry.npmjs.org' --npm.token '${{ secrets.NPM_TOKEN }}' --npm.access public

app/build/ssg.ts

@@ -23,6 +23,9 @@ export async function ssg() {
   console.log("Created .pages/mod.svg")
   await copy(new URL("app/mod.css", root), new URL(".pages/mod.css", root))
   console.log("Created .pages/mod.css")
+  // Copy examples
+  await copy(fromFileUrl(new URL("app/examples", root)), new URL(".pages/examples", root))
+  console.log(`Created .pages/examples`)
   // Generate CSS
   const dist = fromFileUrl(new URL("dist", root)).replaceAll("\\", "/")
   await ensureDir(new URL(".pages/v/main", root))

app/examples/shadow-root/styles.css

@@ -0,0 +1,31 @@
+.example-shadow-root-content {
+  display: flex;
+  justify-content: space-around;
+}
+
+section {
+  margin-bottom: 0;
+}
+
+img {
+  max-width: 100px;
+  flex-shrink: 1;
+  box-shadow: var(--shadow);
+  margin: 1rem;
+}
+
+aside {
+  margin: 0;
+  flex-grow: 1;
+  border-left: none;
+}
+
+aside b {
+  color: var(--default);
+}
+
+audio {
+  margin-top: 0.25rem;
+  border-radius: var(--bd-radius);
+  width: 100%;
+}

app/mod.css

@@ -82,7 +82,7 @@ details summary a {
 }
 
 .matcha-build .variables input[name$="opacity"] {
-  margin-left: .25rem;
+  margin-left: 0.25rem;
   width: 3rem;
   text-align: center;
 }
@@ -106,7 +106,7 @@ details summary a {
 }
 
 .matcha-build .styling label small {
-  opacity: .75;
+  opacity: 0.75;
 }
 
 .matcha-build .styling > div {
@@ -170,13 +170,13 @@ details summary a {
   font-size: 85%;
   font-weight: normal;
   list-style: circle;
-  margin: 0 .5rem;
+  margin: 0 0.5rem;
 }
 
 .css-compatibility-table.details :is(td, th) > :nth-child(1) {
   border-bottom: 1px solid var(--bg-contrast);
-  padding-bottom: .5rem;
-  margin-bottom: .5rem;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .css-compatibility-table.details :is(td, th) > :nth-child(n+2) {
@@ -281,7 +281,7 @@ details summary a {
   justify-content: end;
   margin-bottom: 0;
   border-bottom: none;
-  margin: .5rem 0 .25rem;
+  margin: 0.5rem 0 0.25rem;
 }
 
 .example-tabs > li {
@@ -366,12 +366,12 @@ details summary a {
   width: 1.5em;
 }
 
-.example input:is([type="datetime-local"],[type="date"],[type="month"],[type="week"],[type="time"]) {
+.example input:is([type="datetime-local"], [type="date"], [type="month"], [type="week"], [type="time"]) {
   max-width: 100px;
 }
 
 @media (min-width: 640px) {
-  .example input:is([type="datetime-local"],[type="date"],[type="month"],[type="week"],[type="time"]) {
+  .example input:is([type="datetime-local"], [type="date"], [type="month"], [type="week"], [type="time"]) {
     max-width: none;
   }
 }
@@ -380,6 +380,11 @@ details summary a {
   z-index: 200;
 }
 
+.example .example-shadow-root {
+  border: 2px dotted var(--bg-contrast);
+  border-radius: var(--bd-radius);
+}
+
 /* Layout structure */
 .layout-structure, .layout-structure ul {
   padding-left: 1rem;
@@ -405,7 +410,7 @@ details summary a {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(100, 0, 0, .2);
+  background-color: rgba(100, 0, 0, 0.2);
   backdrop-filter: brightness(50%) blur(5px);
 }
 
@@ -418,15 +423,15 @@ details summary a {
 }
 
 .easter-egg.glitch.blue, .easter-egg.glitch.red {
-  opacity: .1;
+  opacity: 0.1;
   animation: 1s glitch infinite;
 }
 
 @keyframes glitch {
-  1%{
+  1% {
     transform: rotateX(10deg) skewX(90deg);
   }
-  2%{
+  2% {
     transform: rotateX(0deg) skewX(0deg);
   }
 }

app/mod.html

@@ -39,6 +39,8 @@ switch (Deno.args[0]) {
             return api_minify(request)
           case new URLPattern("/api/preview", url.origin).test(url.href.replace(url.search, "")):
             return api_preview(request)
+          case new URLPattern("/examples/shadow-root/styles.css", url.origin).test(url.href.replace(url.search, "")):
+            return new Response(await Deno.readFile(new URL("examples/shadow-root/styles.css", import.meta.url)), { headers: { "Content-Type": "text/css" } })
           case new URLPattern("/highlight.js", url.origin).test(url.href.replace(url.search, "")):
             return fetch(highlight)
           case new URLPattern("/v/*", url.origin).test(url.href.replace(url.search, "")):

app/mod.ts

@@ -1,19 +1,20 @@
 <section>
   <h3 id="preset-builds"><a href="#preset-builds">Preset builds</a></h3>
   <p>
-    <em>matcha.css</em> provides preset builds for added convenience.
-    If you need a specific set of features, you can also use the <a href="#custom-build">custom builder</a>.
+    <em>matcha.css</em> provides preset builds for added convenience. If you need a specific set of features, you can also use the <a href="#custom-build">custom builder</a>.
   </p>
   <ul>
-    <li>Default <code data-matcha-size="matcha.css"></code>
+    <li>
+      Default <code data-matcha-size="matcha.css"></code>
       <ul>
         <li>
           All semantic styling and extra features except <code>@istanbul-coverage</code>.
         </li>
         <li><code class="usage-snippet" data-hl="html">&lt;link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css"&gt;</code></li>
       </ul>
     </li>
-    <li>Lite <code data-matcha-size="matcha.lite.css"></code>
+    <li>
+      Lite <code data-matcha-size="matcha.lite.css"></code>
       <ul>
         <li>
           All semantic styling,
@@ -23,7 +24,8 @@ <h3 id="preset-builds"><a href="#preset-builds">Preset builds</a></h3>
         <li><code class="usage-snippet" data-hl="html">&lt;link rel="stylesheet" href="https://matcha.mizu.sh/matcha.lite.css"&gt;</code></li>
       </ul>
     </li>
-    <li>Utility classes <code data-matcha-size="matcha.utilities.css"></code>
+    <li>
+      Utility classes <code data-matcha-size="matcha.utilities.css"></code>
       <ul>
         <li>
           <a href="/@root.css"><code>@root</code></a> and
@@ -32,7 +34,8 @@ <h3 id="preset-builds"><a href="#preset-builds">Preset builds</a></h3>
         <li><code class="usage-snippet" data-hl="html">&lt;link rel="stylesheet" href="https://matcha.mizu.sh/matcha.utilities.css"&gt;</code></li>
       </ul>
     </li>
-    <li>Istanbul coverage <code data-matcha-size="matcha.istanbul.css"></code>
+    <li>
+      Istanbul coverage <code data-matcha-size="matcha.istanbul.css"></code>
       <ul>
         <li>
           <a href="/@root.css"><code>@root</code></a>,
@@ -43,4 +46,4 @@ <h3 id="preset-builds"><a href="#preset-builds">Preset builds</a></h3>
       </ul>
     </li>
   </ul>
-</section>
+</section>

app/sections/preset-build.html

@@ -10,9 +10,8 @@ <h3><a href="#preview-website">🕵️ Preview a Website</a></h3>
     <label for="url">
       Website URL:
       <small>
-        Please note that the previewed site will be stripped of its <code data-hl="html">&lt;style&gt;</code> and <code data-hl="html">&lt;script&gt;</code> tags.
-        External resources may not load properly.
-        This form is intended for quick previews only.
+        Please note that the previewed site will be stripped of its <code data-hl="html">&lt;style&gt;</code> and <code data-hl="html">&lt;script&gt;</code> tags. External resources may not load
+        properly. This form is intended for quick previews only.
       </small>
       <input list="preview-datalist" type="url" placeholder="https://example.com" value="https://example.com" required>
       <datalist id="preview-datalist">
@@ -26,10 +25,20 @@ <h3><a href="#preview-website">🕵️ Preview a Website</a></h3>
   </form>
   <menu class="example-tabs">
     <li class="color-scheme">
-      <svg class="light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0ZM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8Zm13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8Zm-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13Zm3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061ZM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z"></path></svg>
-      <svg class="dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678Z"></path></svg>
+      <svg class="light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+        <path
+          d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-1.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Zm5.657-8.157a.75.75 0 0 1 0 1.061l-1.061 1.06a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.06-1.06a.75.75 0 0 1 1.06 0Zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0ZM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8Zm13 0a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8Zm-8 5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13Zm3.536-1.464a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061ZM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-1.06-1.06a.75.75 0 0 1 0-1.06Z"
+        >
+        </path>
+      </svg>
+      <svg class="dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+        <path
+          d="M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Zm1.616 1.945a7 7 0 0 1-7.678 7.678 5.499 5.499 0 1 0 7.678-7.678Z"
+        >
+        </path>
+      </svg>
     </li>
   </menu>
   <iframe class="matcha-preview" loading="lazy" title="preview" height="420" class="bd-muted"></iframe>
   <script data-script="/app/sections/preview-website.js"></script>
-</details>
+</details>

app/sections/preview-website.html

@@ -22,15 +22,22 @@ <h3><a href="#supported-browsers">☑️ Supported browsers</a></h3>
     </ol>
     <b>Notes:</b>
     <ul>
-      <li>Browser list adheres to <code>defaults</code> (<code>&gt; 0.5%, last 2 versions, Firefox ESR, not dead</code>).</li>
+      <li>
+        Browser list adheres to <code>defaults</code> (<code>&gt; 0.5%, last 2 versions, Firefox ESR, not dead</code>).
+      </li>
       <li>The first row displays the overall support for each browser.</li>
       <li>Please note that the auto-generated table may contain minor inaccuracies due to the complexity of mapping CSS features against compatibility data.</li>
       <li>Thus, browsers scoring 90% and above are considered fully supported.</li>
     </ul>
     <p>
       You can toggle verbosity to display additional information, such as specific CSS features and rules reported as partially supported or unsupported.
     </p>
-    <button class="variant" onclick="event.preventDefault();document.querySelectorAll('table.css-compatibility-table,ul.css-compatibility-legend').forEach(element => element.classList.toggle('details'))">Toggle verbosity</button>
+    <button
+      class="variant"
+      onclick="event.preventDefault();document.querySelectorAll('table.css-compatibility-table,ul.css-compatibility-legend').forEach(element => element.classList.toggle('details'))"
+    >
+      Toggle verbosity
+    </button>
     <ul class="css-compatibility-legend">
       <li class="danger">Unsupported feature</li>
       <li class="warning">Partially supported feature</li>
@@ -41,4 +48,4 @@ <h3><a href="#supported-browsers">☑️ Supported browsers</a></h3>
   <div class="table-responsive">
     <!--/.pages/compatibility.html-->
   </div>
-</details>
+</details>

app/sections/supported-browsers.html

@@ -2,21 +2,33 @@
   <em>matcha.css</em> provides classes that can be used to create a simple code editor with syntax highlighting.
 </p>
 <p>
-  <b>Required structure:</b><br>
+  <b>Required structure:</b>
+  <br>
   <small class="muted">Elements marked with <code class="danger">*</code> are required.</small>
 </p>
 <ul class="layout-structure">
-  <li><code data-hl="css">.editor</code><span class="danger">*</span>
+  <li>
+    <code data-hl="css">.editor</code>
+    <span class="danger">*</span>
     <ul>
-      <li><code data-hl="css">&gt; textarea</code><span class="danger">*</span></li>
-      <li><code data-hl="css">&gt; div.highlight</code><span class="danger">*</span></li>
+      <li>
+        <code data-hl="css">&gt; textarea</code>
+        <span class="danger">*</span>
+      </li>
+      <li>
+        <code data-hl="css">&gt; div.highlight</code>
+        <span class="danger">*</span>
+      </li>
     </ul>
   </li>
 </ul>
 <section>
   <div class="example">
     <div class="editor">
-      <textarea rows="6">// This element is editable and highlights TypeScript code
+      <textarea
+        rows="6"
+      >
+// This element is editable and highlights TypeScript code
 import * as mizu from "https://mizu.sh/mizu.js"
 
 const { version } = mizu
@@ -27,9 +39,10 @@
     <script data-keep data-script="/styles/@code-editor/mod.js"></script>
   </div>
   <p class="flash attention">
-    These extra styles does not actually perform syntax highlighting, it is only for styling the code editor.
-    It is required to include a syntax highlighting library like <a href="https://highlightjs.org" target="_blank">highlight.js</a>.
-    See the example code above for a simple implementation.
+    These extra styles does not actually perform syntax highlighting, it is only for styling the code editor. It is required to include a syntax highlighting library like <a
+      href="https://highlightjs.org"
+      target="_blank"
+    >highlight.js</a>. See the example code above for a simple implementation.
   </p>
   <p class="flash accent">
     Use with <a href="#syntax-highlighting"><em>matcha.css</em>'s syntax highlighting classes</a> for a extra synergy!

styles/@code-editor/mod.html

@@ -1,10 +1,10 @@
 ::-webkit-scrollbar {
-  width: .5rem;
-  height: .5rem;
+  width: 0.5rem;
+  height: 0.5rem;
   background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: var(--bd-radius);
   background-color: var(--muted);
-}
+}

styles/@discrete-scrollbars/mod.css

@@ -1,11 +1,11 @@
 textarea:user-invalid,
 select:user-invalid,
-input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"]):user-invalid {
+input:not([type="radio"], [type="checkbox"], [type="range"], [type="submit"], [type="image"]):user-invalid {
   border: 1px solid var(--danger);
 }
 
 textarea:user-valid,
 select:user-valid,
-input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"]):user-valid {
+input:not([type="radio"], [type="checkbox"], [type="range"], [type="submit"], [type="image"]):user-valid {
   border: 1px solid var(--success);
-}
+}

styles/@form-validation/mod.css

@@ -2,16 +2,21 @@
   <em>matcha.css</em> provides rules that automatically colors the borders of inputs based on their validation status.
 </p>
 <ul>
-  <li><code data-hl="css">:user-valid</code> has <code><span class="success">◉</span> --success</code> borders.</li>
-  <li><code data-hl="css">:user-invalid</code> has <code><span class="danger">◉</span> --danger</code> borders.</li>
+  <li>
+    <code data-hl="css">:user-valid</code> has <code><span class="success">◉</span> --success</code> borders.
+  </li>
+  <li>
+    <code data-hl="css">:user-invalid</code> has <code><span class="danger">◉</span> --danger</code> borders.
+  </li>
 </ul>
 <div class="example">
   <p class="note">*No validation except the ones operated by the browser are performed.</p>
   <form method="get" onsubmit="event.preventDefault()">
     <label>
       URL:
-      <small>Type an URL below. If it is valid, it'll appear in <code><span class="success">◉</span> --success</code> while it'll appear in <code><span class="danger">◉</span> --danger</code> if not.</small>
+      <small>Type an URL below. If it is valid, it'll appear in <code><span class="success">◉</span> --success</code> while it'll appear in <code><span class="danger">◉</span> --danger</code> if
+        not.</small>
       <input required type="url" placeholder="https://example.com">
     </label>
   </form>
-</div>
+</div>

styles/@form-validation/mod.html

@@ -92,4 +92,4 @@ span.cline-neutral {
 }
 .cover-empty {
   background: var(--bg-muted);
-}
+}