@zappie/check 0.1.3 → 0.2.0

package/dist/index.js

@@ -42,7 +42,7 @@ function distance(left, right) {
   }
   return row[right.length] ?? Infinity;
 }
-function unknownKeys(value, allowed, path13, issue) {
+function unknownKeys(value, allowed, path14, issue) {
   for (const key of Object.keys(value)) {
     if (allowed.includes(key)) {
       continue;
@@ -50,7 +50,7 @@ function unknownKeys(value, allowed, path13, issue) {
     const closest = allowed.map((candidate) => ({ candidate, score: distance(key, candidate) })).sort((left, right) => left.score - right.score)[0];
     const hint = closest && closest.score <= 2 ? closest.candidate : void 0;
     issue({
-      path: path13 ? `${path13}.${key}` : key,
+      path: path14 ? `${path14}.${key}` : key,
       code: "unknown_key",
       message: hint ? `Unknown field "${key}". Rename it to "${hint}".` : `Unknown field "${key}". Remove it from the configuration.`,
       severity: "error"
@@ -76,20 +76,20 @@ function hostname(value) {
 }
 
 // ../sdk/src/site-config/sections.ts
-function nested(value, path13, keys, issue, validate) {
+function nested(value, path14, keys, issue, validate) {
   if (value === void 0) {
     return;
   }
   if (!record(value)) {
     issue({
-      path: path13,
+      path: path14,
       code: "invalid_type",
-      message: `Expected an object. Set ${path13} to an object or remove it.`,
+      message: `Expected an object. Set ${path14} to an object or remove it.`,
       severity: "error"
     });
     return;
   }
-  unknownKeys(value, keys, path13, issue);
+  unknownKeys(value, keys, path14, issue);
   validate(value);
 }
 function budgets(value, issue, error) {
@@ -189,7 +189,7 @@ var rootKeys = [
 function validateConfig(input) {
   const issues = [];
   const issue = (value) => issues.push(value);
-  const error = (path13, code, message5) => issue({ path: path13, code, message: message5, severity: "error" });
+  const error = (path14, code, message5) => issue({ path: path14, code, message: message5, severity: "error" });
   if (!record(input)) {
     return {
       valid: false,
@@ -284,12 +284,12 @@ function validateConfig(input) {
     issues
   };
 }
-function requiredSlug(value, path13, error) {
+function requiredSlug(value, path14, error) {
   if (!nonblank(value)) {
     error(
-      path13,
+      path14,
       value === void 0 ? "missing_required" : "invalid_type",
-      `Expected a non-empty storefront slug. Set ${path13} to the slug used by createZappie().`
+      `Expected a non-empty storefront slug. Set ${path14} to the slug used by createZappie().`
     );
   }
 }
@@ -308,29 +308,29 @@ function theme(value, error) {
     );
   }
 }
-function stringList(value, path13, error, options = {}) {
+function stringList(value, path14, error, options = {}) {
   if (value === void 0) {
     return void 0;
   }
   if (!Array.isArray(value) || value.some((entry) => typeof entry !== "string")) {
     error(
-      path13,
+      path14,
       "invalid_type",
-      `Expected an array of strings. Set ${path13} to string values.`
+      `Expected an array of strings. Set ${path14} to string values.`
     );
     return void 0;
   }
   if (options.nonempty && value.length === 0) {
     error(
-      path13,
+      path14,
       "invalid_format",
-      `Expected at least one value. Add a value to ${path13} or remove the field.`
+      `Expected at least one value. Add a value to ${path14} or remove the field.`
     );
   }
   value.forEach((entry, index) => {
     if (options.slug && !nonblank(entry)) {
       error(
-        `${path13}[${index}]`,
+        `${path14}[${index}]`,
         "invalid_format",
         "Expected a non-empty branch slug. Remove the empty value or use a branch slug."
       );
@@ -338,17 +338,17 @@ function stringList(value, path13, error, options = {}) {
   });
   if (options.unique && new Set(value).size !== value.length) {
     error(
-      path13,
+      path14,
       "duplicate",
-      `Expected unique values. Remove duplicates from ${path13}.`
+      `Expected unique values. Remove duplicates from ${path14}.`
     );
   }
   return value;
 }
 function paths(value, error) {
   const values = stringList(value, "prerender", error, { unique: true });
-  values?.forEach((path13, index) => {
-    if (!path13.startsWith("/")) {
+  values?.forEach((path14, index) => {
+    if (!path14.startsWith("/")) {
       error(
         `prerender[${index}]`,
         "invalid_format",
@@ -851,11 +851,11 @@ var record2 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 var includes = (values, key) => values.includes(key);
 function validateTheme(input) {
   const issues = [];
-  const issue = (path13, code, message5, severity = "error") => issues.push({ path: path13, code, message: message5, severity });
-  const keys = (obj, allowed, path13) => {
+  const issue = (path14, code, message5, severity = "error") => issues.push({ path: path14, code, message: message5, severity });
+  const keys = (obj, allowed, path14) => {
     for (const key of Object.keys(obj)) {
       if (!allowed.includes(key)) {
-        issue(path13 ? `${path13}.${key}` : key, "invalid_theme", "Unknown field");
+        issue(path14 ? `${path14}.${key}` : key, "invalid_theme", "Unknown field");
       }
     }
   };
@@ -916,9 +916,9 @@ function validateTheme(input) {
       }
     }
     for (const [key, value] of Object.entries(values)) {
-      const path13 = `${group}.${key}`;
+      const path14 = `${group}.${key}`;
       if (!includes(TOKEN_NAMES, key)) {
-        issue(path13, "unknown_token", "Unknown semantic token");
+        issue(path14, "unknown_token", "Unknown semantic token");
         continue;
       }
       let code, valid = false;
@@ -936,7 +936,7 @@ function validateTheme(input) {
         valid = typeof value === "string" && safeValue(value) && (includes(DURATION_TOKENS, key) ? isDuration(value) : isEasing(value));
       }
       if (!valid) {
-        issue(path13, code, "Invalid or unsafe token value");
+        issue(path14, code, "Invalid or unsafe token value");
       }
     }
   }
@@ -946,30 +946,30 @@ function validateTheme(input) {
     } else {
       const roles = /* @__PURE__ */ new Set();
       input.fonts.forEach((font, i) => {
-        const path13 = `fonts[${i}]`;
+        const path14 = `fonts[${i}]`;
         if (!record2(font)) {
-          issue(path13, "invalid_font", "Expected a font object");
+          issue(path14, "invalid_font", "Expected a font object");
           return;
         }
-        keys(font, ["family", "source", "url", "weights", "role"], path13);
+        keys(font, ["family", "source", "url", "weights", "role"], path14);
         if (typeof font.family !== "string" || !isFontFamily(font.family) || font.family.includes(",")) {
           issue(
-            `${path13}.family`,
+            `${path14}.family`,
             "invalid_font",
             "Expected one unquoted font family"
           );
         }
         if (typeof font.source !== "string" || !["google", "self", "system"].includes(font.source)) {
-          issue(`${path13}.source`, "invalid_font", "Unknown font source");
+          issue(`${path14}.source`, "invalid_font", "Unknown font source");
         }
         if (typeof font.role !== "string" || !["display", "body", "mono"].includes(font.role) || roles.has(font.role)) {
-          issue(`${path13}.role`, "invalid_font", "Expected a unique font role");
+          issue(`${path14}.role`, "invalid_font", "Expected a unique font role");
         }
         roles.add(String(font.role));
         if (font.source === "self" || font.url !== void 0) {
           if (typeof font.url !== "string" || !isAssetUrl(font.url, false) || !new URL(font.url).pathname.endsWith(".woff2")) {
             issue(
-              `${path13}.url`,
+              `${path14}.url`,
               "invalid_font",
               "Expected an HTTPS .woff2 URL"
             );
@@ -979,7 +979,7 @@ function validateTheme(input) {
           (w) => typeof w !== "number" || !Number.isInteger(w) || w < 1 || w > 1e3
         ))) {
           issue(
-            `${path13}.weights`,
+            `${path14}.weights`,
             "invalid_font",
             "Expected 1\u20139 integer weights between 1 and 1000"
           );
@@ -1556,10 +1556,784 @@ ${stderr}`.split(/\r?\n/).map((line) => line.trimEnd()).filter(Boolean).slice(-1
   return lines.length > 0 ? lines.join("\n") : "The build exited without output.";
 }
 
+// src/css-files.ts
+import { lstat, readFile as readFile8, readdir as readdir2 } from "fs/promises";
+import path8 from "path";
+var FILE_SIZE_CAP = 1024 * 1024;
+var BUILD_FILE_SIZE_CAP = 8 * 1024 * 1024;
+var ignoredDirectories = /* @__PURE__ */ new Set([
+  "node_modules",
+  "build",
+  "dist",
+  "coverage",
+  "public",
+  "vendor",
+  "test",
+  "tests",
+  "e2e",
+  "test-results",
+  "playwright-report"
+]);
+var codeExtension = /\.(?:[cm]?[jt]sx?|html|mdx)$/;
+var testFile = /\.(?:test|spec)\.[^.]+$/;
+async function readCssInputs(cwd) {
+  const source = [];
+  await collect2(cwd, source, (name) => {
+    return !name.startsWith(".") && !ignoredDirectories.has(name);
+  });
+  const built = [];
+  await collect2(path8.join(cwd, "build/client"), built, () => true);
+  const read = (files, cap) => texts(cwd, files, cap);
+  return {
+    sourceCss: await read(
+      source.filter((file) => file.endsWith(".css")),
+      FILE_SIZE_CAP
+    ),
+    sourceCode: await read(
+      source.filter(
+        (file) => codeExtension.test(file) && !testFile.test(file) && !/(?:^|[/\\])[^/\\]+\.config\.[^.]+$/.test(file)
+      ),
+      FILE_SIZE_CAP
+    ),
+    builtCss: await read(
+      built.filter((file) => file.endsWith(".css")),
+      BUILD_FILE_SIZE_CAP
+    ),
+    builtCode: await read(
+      built.filter((file) => file.endsWith(".js")),
+      BUILD_FILE_SIZE_CAP
+    )
+  };
+}
+async function texts(cwd, files, cap) {
+  const result = [];
+  for (const file of files.sort()) {
+    const info = await lstat(file);
+    if (!info.isFile() || info.size > cap) {
+      continue;
+    }
+    result.push({
+      file: relative(cwd, file),
+      text: await readFile8(file, "utf8")
+    });
+  }
+  return result;
+}
+async function collect2(directory, files, enter) {
+  let entries;
+  try {
+    entries = await readdir2(directory, { withFileTypes: true });
+  } catch (error) {
+    if (error instanceof Error && "code" in error && error.code === "ENOENT") {
+      return;
+    }
+    throw error;
+  }
+  for (const entry of entries) {
+    if (entry.isSymbolicLink()) {
+      continue;
+    }
+    const file = path8.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      if (enter(entry.name)) {
+        await collect2(file, files, enter);
+      }
+    } else if (entry.isFile()) {
+      files.push(file);
+    }
+  }
+}
+
+// src/css-rules.ts
+import postcss from "postcss";
+var CSS_ERRORS = /* @__PURE__ */ new Set([
+  "css/important",
+  "css/class-patch"
+]);
+function analyseCss(inputs) {
+  const source = parseAll(inputs.sourceCss);
+  const built = parseAll(inputs.builtCss);
+  return [
+    ...source.problems,
+    ...built.problems,
+    ...important(source.parsed, inputs.sourceCode),
+    ...duplicateKeyframes(source.parsed, built.parsed),
+    ...duplicateSelectors(source.parsed),
+    ...arbitraryTokens(source.parsed, inputs.sourceCode),
+    ...unusedCustomProperties(source.parsed, built.parsed, inputs),
+    ...reducedMotion(source.parsed),
+    ...classPatches(source.parsed),
+    ...literalTokens(source.parsed)
+  ];
+}
+function parseAll(files) {
+  const parsed = [];
+  const problems = [];
+  for (const entry of files) {
+    try {
+      parsed.push({
+        ...entry,
+        root: postcss.parse(entry.text, { from: entry.file }),
+        lines: entry.text.split(/\r?\n/)
+      });
+    } catch (error) {
+      const line = error && typeof error === "object" && "line" in error ? Number(error.line) : void 0;
+      problems.push(
+        problem(
+          `${entry.file} could not be read as CSS: ${error instanceof Error ? error.message : String(error)}`,
+          "Fix the CSS syntax so zappie check can read the file.",
+          {
+            rule: "css/unreadable",
+            file: entry.file,
+            ...line && line > 0 ? { line } : {}
+          }
+        )
+      );
+    }
+  }
+  return { parsed, problems };
+}
+var allowImportant = /zappie-allow-important:\s*\S/;
+function important(css, code) {
+  const problems = [];
+  const allowed = (lines, line) => line !== void 0 && allowImportant.test(lines[line - 1] ?? "");
+  for (const entry of css) {
+    entry.root.walkDecls((decl) => {
+      const line = decl.source?.start?.line;
+      if (decl.important && !allowed(entry.lines, line) && !insideMedia(decl.parent, "reduce")) {
+        problems.push(
+          importantProblem(
+            `${decl.prop} is marked !important.`,
+            entry.file,
+            line
+          )
+        );
+      }
+    });
+    entry.root.walkAtRules("apply", (rule) => {
+      const line = rule.source?.start?.line;
+      const flagged = rule.params.split(/\s+/).filter((token) => importantUtility(token));
+      if ((flagged.length > 0 || /!important\b/.test(rule.params)) && !allowed(entry.lines, line)) {
+        problems.push(
+          importantProblem(
+            `@apply ${rule.params} forces !important.`,
+            entry.file,
+            line
+          )
+        );
+      }
+    });
+  }
+  for (const entry of code) {
+    const lines = entry.text.split(/\r?\n/);
+    lines.forEach((text, index) => {
+      if (allowImportant.test(text)) {
+        return;
+      }
+      for (const list of classLists(text)) {
+        for (const token of list.split(/\s+/)) {
+          if (importantUtility(token)) {
+            problems.push(
+              importantProblem(
+                `The utility ${token} forces !important.`,
+                entry.file,
+                index + 1
+              )
+            );
+          }
+        }
+      }
+    });
+  }
+  return problems;
+}
+function importantProblem(message5, file, line) {
+  return problem(
+    message5,
+    "Raise the selector's specificity or reorder the rules instead. For a reviewed case, add /* zappie-allow-important: <reason> */ on the same line.",
+    { rule: "css/important", file, ...line ? { line } : {} }
+  );
+}
+var utilityToken = /^!?-?[a-z0-9@[\]_\-:/.%()#,'=&>*~+!]*[a-z0-9\])%]!?$/;
+function importantUtility(token) {
+  const utility = withoutVariants(token).utility;
+  if (utility.length < 3) {
+    return false;
+  }
+  if (/^!-?[a-z[]/.test(utility)) {
+    return true;
+  }
+  return /[a-z0-9\])%]!$/.test(utility) && /[-[]/.test(utility);
+}
+function classLists(line) {
+  const lists = [];
+  for (const match of line.matchAll(/(["'`])([^"'`]*?)\1/g)) {
+    const value = match[2]?.trim() ?? "";
+    if (!value) {
+      continue;
+    }
+    const tokens = value.split(/\s+/);
+    if (tokens.every((token) => utilityToken.test(token)) && tokens.some((token) => token.includes("-"))) {
+      lists.push(value);
+    }
+  }
+  return lists;
+}
+function withoutVariants(token) {
+  let depth = 0;
+  let cut = 0;
+  for (let index = 0; index < token.length; index++) {
+    const character = token[index];
+    if (character === "[" || character === "(") {
+      depth++;
+    } else if (character === "]" || character === ")") {
+      depth--;
+    } else if (character === ":" && depth === 0) {
+      cut = index + 1;
+    }
+  }
+  return { variants: token.slice(0, cut), utility: token.slice(cut) };
+}
+function keyframesIn(files) {
+  const found = [];
+  for (const entry of files) {
+    entry.root.walkAtRules(/keyframes$/i, (rule) => {
+      const line = rule.source?.start?.line;
+      found.push({
+        name: rule.params.trim(),
+        vendor: rule.name.toLowerCase().replace(/keyframes$/, ""),
+        body: framesBody(rule),
+        file: entry.file,
+        ...line ? { line } : {}
+      });
+    });
+  }
+  return found;
+}
+function framesBody(rule) {
+  const frames = [];
+  rule.each((node) => {
+    if (node.type !== "rule") {
+      return;
+    }
+    const declarations = [];
+    node.walkDecls((decl) => {
+      declarations.push(
+        `${decl.prop.toLowerCase()}:${normaliseValue(decl.value)}${decl.important ? "!" : ""}`
+      );
+    });
+    const selector = node.selectors.map(
+      (value) => value.trim().toLowerCase().replace(/^from$/, "0%").replace(/^to$/, "100%")
+    ).join(",");
+    frames.push(`${selector}{${declarations.join(";")}}`);
+  });
+  return frames.join("");
+}
+function normaliseValue(value) {
+  return value.toLowerCase().replace(/\s+/g, "").replace(/(^|[^\d.])0+(\.\d)/g, "$1$2").replace(/(\d)\.0+(?!\d)/g, "$1");
+}
+function duplicateKeyframes(source, built) {
+  const problems = [];
+  const reported = /* @__PURE__ */ new Set();
+  const sourceFrames = keyframesIn(source);
+  const builtFrames = keyframesIn(built);
+  const fix = "Keep one @keyframes for each animation and refer to it by that name.";
+  const byName = (frames) => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const frame of frames) {
+      const key = `${frame.vendor}${frame.name}`;
+      groups.set(key, [...groups.get(key) ?? [], frame]);
+    }
+    return groups;
+  };
+  for (const [key, group] of byName(sourceFrames)) {
+    if (group.length > 1) {
+      reported.add(key);
+      const [first, ...rest] = group;
+      for (const frame of rest) {
+        problems.push(
+          problem(
+            `@keyframes ${frame.name} is defined again (first in ${first?.file}${first?.line ? `:${first.line}` : ""}).`,
+            fix,
+            location("css/duplicate-keyframes", frame)
+          )
+        );
+      }
+    }
+  }
+  for (const [key, group] of byName(builtFrames)) {
+    if (reported.has(key) || new Set(group.map(({ body }) => body)).size < 2) {
+      continue;
+    }
+    reported.add(key);
+    const first = group[0];
+    problems.push(
+      problem(
+        `@keyframes ${first?.name} is defined more than once with different frames in the built CSS, so the last one wins.`,
+        `${fix} Rename yours if it clashes with one from a library or Tailwind.`,
+        location("css/duplicate-keyframes", first)
+      )
+    );
+  }
+  const byBody = /* @__PURE__ */ new Map();
+  for (const frame of [...sourceFrames, ...builtFrames]) {
+    if (!frame.body) {
+      continue;
+    }
+    const key = `${frame.vendor}${frame.body}`;
+    const group = byBody.get(key) ?? [];
+    if (!group.some(({ name }) => name === frame.name)) {
+      group.push(frame);
+    }
+    byBody.set(key, group);
+  }
+  for (const group of byBody.values()) {
+    if (group.length < 2) {
+      continue;
+    }
+    const names = group.map(({ name }) => name);
+    const [first, ...rest] = group;
+    problems.push(
+      problem(
+        `@keyframes ${names.join(", ")} have the same frames under different names.`,
+        `${fix} Use ${first?.name} for all of them.`,
+        location("css/duplicate-keyframes", rest[0])
+      )
+    );
+  }
+  return problems;
+}
+function location(rule, entry) {
+  return {
+    rule,
+    ...entry ? { file: entry.file } : {},
+    ...entry?.line ? { line: entry.line } : {}
+  };
+}
+function contextOf(node) {
+  const parts = [];
+  for (let parent = node; parent && parent.type !== "root"; parent = parent.parent) {
+    if (parent.type === "atrule") {
+      const rule = parent;
+      parts.unshift(`@${rule.name} ${rule.params.replace(/\s+/g, " ").trim()}`);
+    } else if (parent.type === "rule") {
+      parts.unshift(
+        parent.selectors.map(normaliseSelector).join(",")
+      );
+    }
+  }
+  return parts.join(" > ");
+}
+var normaliseSelector = (selector) => selector.replace(/\s+/g, " ").replace(/\s*([>+~,])\s*/g, "$1").trim();
+function duplicateSelectors(source) {
+  const seen = /* @__PURE__ */ new Map();
+  const problems = [];
+  for (const entry of source) {
+    entry.root.walkRules((rule) => {
+      if (rule.parent?.type === "atrule" && /keyframes$/i.test(rule.parent.name)) {
+        return;
+      }
+      const context = contextOf(rule.parent);
+      const line = rule.source?.start?.line;
+      const selectors = [...new Set(rule.selectors.map(normaliseSelector))];
+      const keys = selectors.length === 1 ? selectors : [[...selectors].sort().join(",")];
+      for (const selector of keys) {
+        const key = `${context}\0${selector}`;
+        const first = seen.get(key);
+        if (!first) {
+          seen.set(key, { file: entry.file, ...line ? { line } : {} });
+          continue;
+        }
+        problems.push(
+          problem(
+            `${selector}${context ? ` (inside ${context})` : ""} is already styled in ${first.file}${first.line ? `:${first.line}` : ""}.`,
+            "Merge the declarations into one rule so the cascade order cannot change the result.",
+            location("css/duplicate-selector", {
+              file: entry.file,
+              ...line ? { line } : {}
+            })
+          )
+        );
+      }
+    });
+  }
+  return problems;
+}
+var namespaces = [
+  ["font-weight", ["font"]],
+  ["inset-shadow", ["inset-shadow"]],
+  ["drop-shadow", ["drop-shadow"]],
+  ["text-shadow", ["text-shadow"]],
+  [
+    "color",
+    [
+      "text",
+      "bg",
+      "border",
+      "border-x",
+      "border-y",
+      "border-t",
+      "border-r",
+      "border-b",
+      "border-l",
+      "border-s",
+      "border-e",
+      "ring",
+      "ring-offset",
+      "outline",
+      "fill",
+      "stroke",
+      "decoration",
+      "accent",
+      "caret",
+      "divide",
+      "placeholder",
+      "from",
+      "via",
+      "to",
+      "shadow",
+      "inset-shadow",
+      "inset-ring"
+    ]
+  ],
+  [
+    "radius",
+    [
+      "rounded",
+      "rounded-t",
+      "rounded-r",
+      "rounded-b",
+      "rounded-l",
+      "rounded-tl",
+      "rounded-tr",
+      "rounded-br",
+      "rounded-bl",
+      "rounded-s",
+      "rounded-e",
+      "rounded-ss",
+      "rounded-se",
+      "rounded-es",
+      "rounded-ee"
+    ]
+  ],
+  ["font", ["font"]],
+  ["text", ["text"]],
+  ["tracking", ["tracking"]],
+  ["leading", ["leading"]],
+  ["shadow", ["shadow"]],
+  ["blur", ["blur"]],
+  ["ease", ["ease"]],
+  ["animate", ["animate"]],
+  ["container", ["max-w", "min-w", "w"]]
+];
+function themeTokens(source) {
+  const tokens = [];
+  for (const entry of source) {
+    entry.root.walkAtRules("theme", (rule) => {
+      rule.walkDecls(/^--/, (decl) => {
+        for (const [namespace, utilities] of namespaces) {
+          const prefix = `--${namespace}-`;
+          if (decl.prop.startsWith(prefix) && decl.prop.length > prefix.length) {
+            tokens.push({
+              variable: decl.prop,
+              value: compact(decl.value),
+              utilities,
+              name: decl.prop.slice(prefix.length)
+            });
+            break;
+          }
+        }
+      });
+    });
+  }
+  return tokens;
+}
+var compact = (value) => value.toLowerCase().replace(/_/g, " ").replace(/\s+/g, "");
+var arbitraryUtility = /(?<![\w-])((?:[^\s"'`<>{}]*:)?)(!?)(-?)([a-z][a-z-]*?)-(\[([^\]\s"'`]+)\]|\((--[a-z0-9_-]+)\))((?:\/[\w.%]+)?!?)(?![\w-])/g;
+function arbitraryTokens(source, code) {
+  const tokens = themeTokens(source);
+  if (tokens.length === 0) {
+    return [];
+  }
+  const problems = [];
+  const scan = (text, file, lineOffset = 0) => {
+    text.split(/\r?\n/).forEach((line, index) => {
+      for (const match of line.matchAll(arbitraryUtility)) {
+        const [
+          whole,
+          variants = "",
+          bang = "",
+          negative = "",
+          utility = "",
+          ,
+          bracket,
+          parenthesis,
+          modifier = ""
+        ] = match;
+        const raw = bracket ?? `var(${parenthesis})`;
+        const value = compact(raw.replace(/^[a-z-]+:(?!\/)/, ""));
+        const token = tokens.find(
+          (candidate) => candidate.utilities.includes(utility) && (value === candidate.value || value === `var(${candidate.variable})`)
+        );
+        if (!token) {
+          continue;
+        }
+        const replacement = `${variants}${bang}${negative}${utility}-${token.name}${modifier}`;
+        problems.push(
+          problem(
+            `${whole} restates the theme token ${token.variable}.`,
+            `Use ${replacement}.`,
+            { rule: "css/arbitrary-token", file, line: lineOffset + index + 1 }
+          )
+        );
+      }
+    });
+  };
+  for (const entry of code) {
+    scan(entry.text, entry.file);
+  }
+  for (const entry of source) {
+    entry.root.walkAtRules("apply", (rule) => {
+      scan(rule.params, entry.file, (rule.source?.start?.line ?? 1) - 1);
+    });
+  }
+  return problems;
+}
+function unusedCustomProperties(source, built, inputs) {
+  const definitions = /* @__PURE__ */ new Map();
+  for (const entry of source) {
+    entry.root.walkDecls(/^--/, (decl) => {
+      if (insideTheme(decl.parent) || definitions.has(decl.prop)) {
+        return;
+      }
+      const line = decl.source?.start?.line;
+      definitions.set(decl.prop, {
+        file: entry.file,
+        ...line ? { line } : {}
+      });
+    });
+  }
+  if (definitions.size === 0) {
+    return [];
+  }
+  const read = /* @__PURE__ */ new Set();
+  const cssReads = /var\(\s*(--[\w-]+)/g;
+  for (const entry of [...source, ...built]) {
+    for (const match of entry.text.matchAll(cssReads)) {
+      read.add(match[1] ?? "");
+    }
+  }
+  const scriptMentions = /(?<![\w-])(--[a-zA-Z][\w-]*)/g;
+  for (const entry of [...inputs.sourceCode, ...inputs.builtCode]) {
+    for (const match of entry.text.matchAll(scriptMentions)) {
+      read.add(match[1] ?? "");
+    }
+  }
+  const problems = [];
+  for (const [name, where] of definitions) {
+    if (!read.has(name)) {
+      problems.push(
+        problem(
+          `${name} is defined but nothing reads it.`,
+          "Remove the custom property, or read it with var().",
+          location("css/unused-custom-property", where)
+        )
+      );
+    }
+  }
+  return problems;
+}
+function insideTheme(node) {
+  for (let parent = node; parent; parent = parent.parent) {
+    if (parent.type === "atrule" && parent.name === "theme") {
+      return true;
+    }
+  }
+  return false;
+}
+var motionProperties = /* @__PURE__ */ new Set([
+  "animation",
+  "animation-name",
+  "transition",
+  "transition-property"
+]);
+var stillValue = /^(?:none|0m?s|initial|unset|inherit)$/i;
+var reducedMotionQuery = (rule, preference) => rule.name === "media" && new RegExp(`prefers-reduced-motion\\s*:\\s*${preference}`, "i").test(
+  rule.params
+);
+function insideMedia(node, preference) {
+  for (let parent = node; parent; parent = parent.parent) {
+    if (parent.type === "atrule" && reducedMotionQuery(parent, preference)) {
+      return true;
+    }
+  }
+  return false;
+}
+var globalSelector = /^(?:\*|html|:root|body|\*::?before|\*::?after|::?before|::?after)$/;
+function reducedMotion(source) {
+  let global = false;
+  const stilled = /* @__PURE__ */ new Set();
+  for (const entry of source) {
+    entry.root.walkAtRules("media", (media) => {
+      if (!reducedMotionQuery(media, "reduce")) {
+        return;
+      }
+      media.walkRules((rule) => {
+        let touchesMotion = false;
+        rule.walkDecls((decl) => {
+          if (/^(?:animation|transition)/.test(decl.prop)) {
+            touchesMotion = true;
+          }
+        });
+        if (!touchesMotion) {
+          return;
+        }
+        for (const selector of rule.selectors.map(normaliseSelector)) {
+          stilled.add(selector);
+          if (globalSelector.test(selector)) {
+            global = true;
+          }
+        }
+      });
+    });
+  }
+  if (global) {
+    return [];
+  }
+  const problems = [];
+  for (const entry of source) {
+    entry.root.walkDecls((decl) => {
+      if (!motionProperties.has(decl.prop) || stillValue.test(decl.value.trim())) {
+        return;
+      }
+      const parent = decl.parent;
+      if (insideMedia(parent, "reduce") || insideMedia(parent, "no-preference") || insideTheme(parent) || parent?.type !== "rule") {
+        return;
+      }
+      const selectors = parent.selectors.map(
+        normaliseSelector
+      );
+      if (selectors.every((selector) => stilled.has(selector))) {
+        return;
+      }
+      const line = decl.source?.start?.line;
+      problems.push(
+        problem(
+          `${selectors.join(", ")} sets ${decl.prop} with no prefers-reduced-motion path.`,
+          "Wrap the motion in @media (prefers-reduced-motion: no-preference), or still it in a @media (prefers-reduced-motion: reduce) block.",
+          location("css/reduced-motion", {
+            file: entry.file,
+            ...line ? { line } : {}
+          })
+        )
+      );
+    });
+  }
+  return problems;
+}
+var classAttribute = /\[\s*class\s*[*^$~|]?=\s*(?:"[^"]*"|'[^']*'|[^\]\s]+)\s*(?:[is]\s*)?\]/gi;
+function classPatches(source) {
+  const problems = [];
+  for (const entry of source) {
+    entry.root.walkRules((rule) => {
+      for (const match of rule.selector.matchAll(classAttribute)) {
+        const line = rule.source?.start?.line;
+        problems.push(
+          problem(
+            `${match[0]} patches elements by their class attribute.`,
+            "Style the element through a theme token or its own class. Dark mode goes through tokens, not by matching utility classes.",
+            location("css/class-patch", {
+              file: entry.file,
+              ...line ? { line } : {}
+            })
+          )
+        );
+      }
+    });
+  }
+  return problems;
+}
+var colourLiteral = /#[0-9a-f]{3,8}\b|(?:rgba?|hsla?|oklch|oklab|lab|lch|color)\([^()]*\)/gi;
+var trivialValue = /^(?:0|none|inherit|initial|unset|auto|transparent|currentcolor|0px)$/;
+function literalTokens(source) {
+  const tokens = /* @__PURE__ */ new Map();
+  for (const entry of source) {
+    entry.root.walkDecls(/^--/, (decl) => {
+      const value = compact(decl.value);
+      if (value.includes("var(") || trivialValue.test(value) || tokens.has(value)) {
+        return;
+      }
+      const parent = decl.parent;
+      const rootLevel = parent?.type === "rule" && parent.selectors.some(
+        (selector) => /^(?::root|html)$/.test(selector.trim())
+      );
+      if (insideTheme(parent) || rootLevel) {
+        tokens.set(value, decl.prop);
+      }
+    });
+  }
+  if (tokens.size === 0) {
+    return [];
+  }
+  const problems = [];
+  for (const entry of source) {
+    entry.root.walkDecls((decl) => {
+      if (decl.prop.startsWith("--") || insideTheme(decl.parent)) {
+        return;
+      }
+      const prop = decl.prop.toLowerCase();
+      const candidates = [];
+      if (/radius$/.test(prop) || /shadow$/.test(prop)) {
+        candidates.push(decl.value);
+      }
+      if (/(?:^|-)(?:color|background|border|outline|fill|stroke|shadow|decoration)/.test(
+        prop
+      ) || prop === "color" || prop === "fill" || prop === "stroke") {
+        candidates.push(...decl.value.match(colourLiteral) ?? []);
+      }
+      for (const candidate of new Set(candidates.map(compact))) {
+        const token = tokens.get(candidate);
+        if (!token || trivialValue.test(candidate)) {
+          continue;
+        }
+        const line = decl.source?.start?.line;
+        problems.push(
+          problem(
+            `${decl.prop}: ${decl.value} restates the token ${token}.`,
+            `Use var(${token}).`,
+            location("css/literal-token", {
+              file: entry.file,
+              ...line ? { line } : {}
+            })
+          )
+        );
+        break;
+      }
+    });
+  }
+  return problems;
+}
+
+// src/css.ts
+async function checkCss({
+  cwd,
+  signal
+}) {
+  signal?.throwIfAborted();
+  const inputs = await readCssInputs(cwd);
+  if (inputs.sourceCss.length === 0 && inputs.builtCss.length === 0) {
+    return skipped("css", "No source or built CSS files were found.");
+  }
+  const problems = analyseCss(inputs);
+  signal?.throwIfAborted();
+  const failed = problems.some(({ rule }) => CSS_ERRORS.has(rule));
+  return step("css", failed ? "failed" : "passed", problems);
+}
+
 // src/lint.ts
 import zappie from "eslint-plugin-zappie";
 import { createRequire } from "module";
-import path8 from "path";
+import path9 from "path";
 import { pathToFileURL as pathToFileURL2 } from "url";
 async function checkLint({
   cwd,
@@ -1568,7 +2342,7 @@ async function checkLint({
   signal?.throwIfAborted();
   let ESLint;
   try {
-    const require2 = createRequire(path8.join(cwd, "package.json"));
+    const require2 = createRequire(path9.join(cwd, "package.json"));
     const loadedEslint = await import(pathToFileURL2(require2.resolve("eslint")).href);
     ESLint = loadedEslint.ESLint;
   } catch (error) {
@@ -1634,7 +2408,9 @@ function recommendedRules() {
     Object.assign(result, config.rules ?? {});
   }
   return Object.fromEntries(
-    Object.entries(result).filter(([name]) => name.startsWith("zappie/"))
+    Object.entries(result).filter(
+      ([name]) => name.startsWith("zappie/") || name.startsWith("jsx-a11y/")
+    )
   );
 }
 function level(value) {
@@ -1657,7 +2433,7 @@ async function sourceFile(cwd) {
   for (const candidate of candidates) {
     try {
       await import("fs/promises").then(
-        ({ access: access3 }) => access3(path8.join(cwd, candidate))
+        ({ access: access3 }) => access3(path9.join(cwd, candidate))
       );
       return candidate;
     } catch {
@@ -1671,8 +2447,8 @@ function message2(error) {
 }
 
 // src/readiness.ts
-import { readFile as readFile8 } from "fs/promises";
-import path9 from "path";
+import { readFile as readFile9 } from "fs/promises";
+import path10 from "path";
 import { pathToFileURL as pathToFileURL3 } from "url";
 async function checkReadiness({
   cwd,
@@ -1690,9 +2466,9 @@ async function checkReadiness({
       )
     ]);
   }
-  const file = path9.join(cwd, "react-router.config.ts");
+  const file = path10.join(cwd, "react-router.config.ts");
   try {
-    await readFile8(file, "utf8");
+    await readFile9(file, "utf8");
     const version = Date.now();
     const config = await import(`${pathToFileURL3(file).href}?readiness=${version}`);
     if (config.default?.routeDiscovery?.mode === "initial") {
@@ -1723,8 +2499,8 @@ function message3(error) {
 }
 
 // src/secrets.ts
-import { lstat, readFile as readFile9, readdir as readdir2 } from "fs/promises";
-import path10 from "path";
+import { lstat as lstat2, readFile as readFile10, readdir as readdir3 } from "fs/promises";
+import path11 from "path";
 
 // src/secret-patterns.ts
 var FIX = "Move the value to a server environment variable and rotate it.";
@@ -1805,18 +2581,18 @@ var SECRET_FILE_SIZE_CAP = 1024 * 1024;
 async function scanSecrets(dir) {
   const findings = [];
   for (const file of await filesToScan(dir)) {
-    const info = await lstat(file);
+    const info = await lstat2(file);
     if (!info.isFile() || info.size > SECRET_FILE_SIZE_CAP) {
       continue;
     }
-    const contents = await readFile9(file);
+    const contents = await readFile10(file);
     if (contents.includes(0)) {
       continue;
     }
     const source = contents.toString("utf8");
     for (const match of secretMatches(
       source,
-      path10.basename(file).startsWith(".env")
+      path11.basename(file).startsWith(".env")
     )) {
       findings.push({
         rule: match.rule,
@@ -1847,17 +2623,17 @@ async function checkSecrets({
 async function filesToScan(cwd) {
   const files = [];
   for (const directory of ["app", "public"]) {
-    await collect2(path10.join(cwd, directory), files);
+    await collect3(path11.join(cwd, directory), files);
   }
-  await collect2(
-    path10.join(cwd, "build/client"),
+  await collect3(
+    path11.join(cwd, "build/client"),
     files,
     (file) => file.endsWith(".js")
   );
   try {
-    for (const entry of await readdir2(cwd, { withFileTypes: true })) {
+    for (const entry of await readdir3(cwd, { withFileTypes: true })) {
       if (entry.isFile() && rootConfig(entry.name)) {
-        files.push(path10.join(cwd, entry.name));
+        files.push(path11.join(cwd, entry.name));
       }
     }
   } catch {
@@ -1865,15 +2641,15 @@ async function filesToScan(cwd) {
   }
   return [...new Set(files)].sort();
 }
-async function collect2(directory, files, accept = () => true) {
+async function collect3(directory, files, accept = () => true) {
   try {
-    for (const entry of await readdir2(directory, { withFileTypes: true })) {
+    for (const entry of await readdir3(directory, { withFileTypes: true })) {
       if (entry.isSymbolicLink()) {
         continue;
       }
-      const file = path10.join(directory, entry.name);
+      const file = path11.join(directory, entry.name);
       if (entry.isDirectory()) {
-        await collect2(file, files, accept);
+        await collect3(file, files, accept);
       } else if (entry.isFile() && accept(file)) {
         files.push(file);
       }
@@ -1892,13 +2668,13 @@ function lineAt(source, index) {
 }
 
 // src/test-step.ts
-import path11 from "path";
+import path12 from "path";
 async function checkTests({
   cwd,
   packageManager,
   signal
 }) {
-  const manifest = await json(path11.join(cwd, "package.json"));
+  const manifest = await json(path12.join(cwd, "package.json"));
   if (!manifest.scripts?.test) {
     return skipped("test", "No test script is defined in package.json.");
   }
@@ -1921,11 +2697,11 @@ async function checkTests({
 }
 
 // src/types-step.ts
-import path12 from "path";
+import path13 from "path";
 async function checkTypes(options) {
   const { cwd, packageManager, signal } = options;
   signal?.throwIfAborted();
-  const manifest = await json(path12.join(cwd, "package.json"));
+  const manifest = await json(path13.join(cwd, "package.json"));
   if (manifest.dependencies?.["react-router"]) {
     const generated = execArgs(packageManager, "react-router", ["typegen"]);
     const result2 = await command(
@@ -1985,7 +2761,8 @@ var runners = [
   { name: "build", run: checkBuild },
   { name: "secrets", run: checkSecrets },
   { name: "readiness", run: checkReadiness },
-  { name: "budgets", run: checkBudgets }
+  { name: "budgets", run: checkBudgets },
+  { name: "css", run: checkCss }
 ];
 async function runCheck(options) {
   const steps = [];
@@ -2018,11 +2795,14 @@ function message4(error) {
 }
 export {
   BUILTIN_ALLOWLIST_SOURCE,
+  CSS_ERRORS,
   SECRET_FILE_SIZE_CAP,
+  analyseCss,
   checkAllowlist,
   checkBudgets,
   checkBuild,
   checkConfig,
+  checkCss,
   checkLint,
   checkReadiness,
   checkSecrets,