@zvndev/darkmown 0.18.0 → 0.20.0

package/src/skin.js

@@ -14,7 +14,8 @@ const aliases = new Map([
  * @returns {string}
  */
 function resolveProp(prop, rest) {
-  if (prop === "font" && (/^[\d.]/.test(rest[0] || "") || rest.join(" ").includes("/"))) return "font";
+  if (prop === "font" && (/^[\d.]/.test(rest[0] || "") || rest.join(" ").includes("/")))
+    return "font";
   return aliases.get(prop) || prop;
 }
 
@@ -53,7 +54,16 @@ export function compileSkin(source) {
   /** @type {number | null} */
   let tokenIndent = null;
   /** @type {string[]} */
+  let tokenVars = [];
+  /** @type {string[]} */
   const rootVars = [];
+  /** @type {string[]} */
+  const darkVars = [];
+  // Manual-toggle variants: `tokens [data-theme=dark]` collects custom
+  // properties under an attribute-scoped `:root` so a `:store theme` toggle can
+  // flip them with no JS beyond writing the attribute.
+  /** @type {Map<string, string[]>} */
+  const attrVars = new Map();
 
   for (let i = 0; i < lines.length; i++) {
     const { indent, text } = lines[i];
@@ -61,14 +71,41 @@ export function compileSkin(source) {
     // the next line is indented deeper. Everything else is a declaration.
     const opensBlock = i + 1 < lines.length && lines[i + 1].indent > indent;
 
-    if (text === "tokens" && opensBlock) {
+    // `tokens` opens a design-token block emitting `:root { --name: value }`.
+    // An optional modifier picks a variant: `tokens dark` collects into a
+    // `prefers-color-scheme: dark` override (OS-driven), while a bracketed
+    // `tokens [data-theme=dark]` scopes the override to a `:root` attribute for
+    // manual toggling. Both reuse the same `--name` properties.
+    // Capture the whole modifier (`.+`, not `\S+`) so a malformed bracketed
+    // modifier with internal spaces (`[data-theme=dark extra]`) is still routed
+    // to normalizeAttr's null fail-safe rather than slipping through as a bogus
+    // `tokens …` selector.
+    const tokenMatch = /^tokens(?:\s+(.+))?$/.exec(text);
+    if (tokenMatch && opensBlock) {
       tokenIndent = indent;
+      const modifier = tokenMatch[1];
+      if (!modifier) {
+        tokenVars = rootVars;
+      } else if (modifier === "dark") {
+        tokenVars = darkVars;
+      } else if (modifier.startsWith("[") && modifier.endsWith("]")) {
+        const attr = normalizeAttr(modifier);
+        if (attr) {
+          const selector = `:root${attr}`;
+          tokenVars = attrVars.get(selector) ?? [];
+          attrVars.set(selector, tokenVars);
+        } else {
+          tokenVars = rootVars; // malformed `[…]` modifier → fall back to default :root tokens
+        }
+      } else {
+        tokenVars = rootVars;
+      }
       continue;
     }
 
     if (tokenIndent !== null && indent > tokenIndent) {
       const [name, ...rest] = text.split(/\s+/);
-      rootVars.push(`  --${name}: ${rest.join(" ")};`);
+      tokenVars.push(`  --${name}: ${rest.join(" ")};`);
       continue;
     }
 
@@ -96,10 +133,32 @@ export function compileSkin(source) {
     css.push(media ? `${media} { ${rule} }` : rule);
   }
 
+  // Prepend tokens ahead of selector rules. `unshift` reverses insertion order,
+  // so push the overrides first to land them after the `:root` defaults.
+  for (const [selector, vars] of attrVars) {
+    if (vars.length) css.unshift(`${selector} {\n${vars.join("\n")}\n}`);
+  }
+  if (darkVars.length) {
+    css.unshift(`@media (prefers-color-scheme: dark) {\n:root {\n${darkVars.join("\n")}\n}\n}`);
+  }
   if (rootVars.length) css.unshift(`:root {\n${rootVars.join("\n")}\n}`);
   return css.join("\n");
 }
 
+/**
+ * Normalize a bracketed token modifier into a valid attribute selector,
+ * quoting the value so `[data-theme=dark]` becomes `[data-theme="dark"]`.
+ * Returns null for a malformed modifier (`[]`, `[a=b c]`, injection-shaped
+ * input) so the caller can fall back to default `:root` tokens instead of
+ * emitting a junk selector.
+ * @param {string} bracketed
+ * @returns {string | null}
+ */
+function normalizeAttr(bracketed) {
+  const m = bracketed.match(/^\[\s*([^\]=\s]+)\s*=\s*"?([^\]"]*)"?\s*\]$/);
+  return m ? `[${m[1]}="${m[2]}"]` : null;
+}
+
 /**
  * Combine a selector with its parent (handles `&` nesting and comma lists).
  * @param {string} text

package/src/statics.js

@@ -1,6 +1,19 @@
 import fs from "node:fs";
 import http from "node:http";
 import path from "node:path";
+import { BASE_SECURITY_HEADERS, REACTIVE_CSP } from "./headers.js";
+
+/**
+ * Security headers for an HTML response from the local server. The relaxed
+ * (reactive) CSP is a superset that satisfies both static and reactive pages,
+ * so the runtime server uses it for every HTML response; the build-time
+ * outputs (`vercel.json`, `dist/_headers`) tighten static routes per-path.
+ * @type {Record<string, string>}
+ */
+const HTML_SECURITY_HEADERS = {
+  ...BASE_SECURITY_HEADERS,
+  "Content-Security-Policy": REACTIVE_CSP
+};
 
 /**
  * Serve a built file for a request URL out of `distRoot`, or a 404 page.
@@ -12,7 +25,7 @@ import path from "node:path";
 export function serve(distRoot, url, res) {
   const file = resolvePublicFile(distRoot, url || "/");
   if (!file || !fs.existsSync(file)) {
-    res.writeHead(404, { "content-type": "text/html; charset=utf-8" });
+    res.writeHead(404, { "content-type": "text/html; charset=utf-8", ...HTML_SECURITY_HEADERS });
     const notFound = path.join(distRoot, "404.html");
     if (fs.existsSync(notFound)) {
       res.end(fs.readFileSync(notFound));
@@ -21,7 +34,11 @@ export function serve(distRoot, url, res) {
     res.end("<h1>Not found</h1><p>This route is hidden or has not been created.</p>");
     return;
   }
-  res.writeHead(200, { "content-type": contentType(file) });
+  const type = contentType(file);
+  const headers = type.startsWith("text/html")
+    ? { "content-type": type, ...HTML_SECURITY_HEADERS }
+    : { "content-type": type };
+  res.writeHead(200, headers);
   fs.createReadStream(file).pipe(res);
 }