@heyramzi/lint 1.34.0 → 2.0.0

package/ui-rules-css.js

@@ -0,0 +1,221 @@
+/**
+ * The CSS and Tailwind half of the UI-rules gate: will-change, press scale, keyframe toggles and typography.
+ * Pure. `ui-rules.js` calls it with comment-stripped text and parsed CSS rules.
+ */
+
+export const CSS_MESSAGES = {
+  "will-change-all":
+    "Name the property: `will-change: transform` or `opacity`. `all` puts every property on its own layer and eats memory. Better still, drop it until you've seen the first frame stutter.",
+  "will-change-layout":
+    "will-change only helps transform, opacity and filter. On width, height, top, margin or padding it does nothing and costs a layer. Animate transform instead and drop the hint.",
+  "press-scale-floor":
+    "Press feedback scales to 0.95 or higher: `active:scale-95` or `scale(0.97)`. Lower than that and the control looks like it's collapsing.",
+  "keyframe-toggle":
+    "Use a transition on the state change. A keyframe animation on hover or open restarts from zero when the state flips back, so a quick second tap jumps. A transition reverses from where it is.",
+  "light-small-text":
+    "Use font-normal (400) or heavier at text-base and below. Thin strokes break up on small text.",
+  "line-height-unit":
+    "Write line-height with no unit: `line-height: 1.5` or `leading-[1.5]`. A px or rem value stays put when the font size changes.",
+  "tracking-px":
+    "Write letter-spacing in em: `letter-spacing: -0.01em` or `tracking-[0.02em]`. It then scales with the font size.",
+  "raw-font-tags":
+    "Use the named property: font-weight for wght, font-optical-sizing for opsz, `font-variant-numeric: tabular-nums` (Tailwind `tabular-nums`) for tnum, `slashed-zero` for zero. Raw tags override one another and the named ones.",
+  "balance-paragraph":
+    "Balance is for headings. Use `text-pretty` on a paragraph: it stops a lone last word without reshaping every line.",
+  "text-justify":
+    "Left-align the text. Justified text without hyphenation opens gaps between words that read as rivers.",
+};
+
+const LAYOUT_PROPERTY =
+  /^(?:width|height|(?:min|max)-(?:width|height)|top|right|bottom|left|inset(?:-[\w-]+)?|margin(?:-[\w-]+)?|padding(?:-[\w-]+)?|gap|(?:row|column)-gap|flex(?:-[\w-]+)?|grid(?:-[\w-]+)?|font-size|line-height|letter-spacing|border(?:-[\w-]*width)?|display|position)$/;
+
+const NUMBER = String.raw`(?:0*\.\d+|[1-9]\d*(?:\.\d+)?)`;
+const SMALL_TEXT_CLASS = /^(?:[\w[\]=&>*:-]+:)*text-(?:xs|sm|base)(?:\/\S+)?$/;
+const LIGHT_CLASS = /^(?:[\w[\]=&>*:-]+:)*font-(?:thin|extralight|light)$/;
+
+function lineOf(source, index) {
+  let line = 1;
+  for (let i = 0; i < index; i++) if (source.charCodeAt(i) === 10) line++;
+  return line;
+}
+
+/** True when a press scale (a factor like 0.9, or a percent like 90) sits under 0.95 and above 0. */
+function underFloor(raw) {
+  const value = raw.trim();
+  if (value.endsWith("%")) {
+    const percent = Number.parseFloat(value);
+    return percent > 0 && percent < 95;
+  }
+  const factor = Number.parseFloat(value);
+  return factor > 0 && factor < 0.95;
+}
+
+/** Blank `<code>` and `<pre>` bodies, so a doc page that shows a bad class isn't flagged. */
+export function blankCode(source) {
+  return source.replace(/<(code|pre)\b[\s\S]*?<\/\1>/g, (m) => m.replace(/[^\n]/g, " "));
+}
+
+function willChange(source, hits) {
+  const add = (match, rule) =>
+    hits.push({ rule, line: lineOf(source, match.index), snippet: match[0].trim().slice(0, 80) });
+  const values = [
+    ...source.matchAll(/(?<![\w-])will-change\s*:\s*([^;}"'`\n]+)/g),
+    ...source.matchAll(/(?<![\w-])will-change-\[([^\]\n]+)\]/g),
+  ];
+  for (const match of values) {
+    const names = match[1]
+      .replaceAll("_", " ")
+      .split(/[,\s]+/)
+      .map((n) => n.trim().toLowerCase())
+      .filter(Boolean);
+    if (names.includes("all")) add(match, "will-change-all");
+    else if (names.some((n) => LAYOUT_PROPERTY.test(n))) add(match, "will-change-layout");
+  }
+}
+
+function pressScale(source, hits) {
+  const pattern =
+    /(?<![\w-])(?:(?:group|peer)-)?active:(?:[\w[\]=&>*-]+:)*scale-(\d+|\[[^\]\s]+\])/g;
+  for (const match of source.matchAll(pattern)) {
+    const raw = match[1].replace(/^\[|\]$/g, "");
+    const factor = /^\d+$/.test(match[1]) ? `${raw}%` : raw;
+    if (underFloor(factor))
+      hits.push({
+        rule: "press-scale-floor",
+        line: lineOf(source, match.index),
+        snippet: match[0].slice(0, 80),
+      });
+  }
+}
+
+function keyframeToggle(source, hits) {
+  const state = String.raw`(?:(?:group|peer)-)?(?:hover|open|expanded|checked)|data-\[state=(?:open|checked|on|active|selected)\]|aria-(?:expanded|pressed|checked)`;
+  const pattern = new RegExp(
+    String.raw`(?<![\w-])(?:${state}):(?:[\w[\]=&>*-]+:)*animate-(?!in\b|out\b|none\b)[\w[\]-]+`,
+    "g",
+  );
+  for (const match of source.matchAll(pattern))
+    hits.push({
+      rule: "keyframe-toggle",
+      line: lineOf(source, match.index),
+      snippet: match[0].slice(0, 80),
+    });
+}
+
+function typography(source, hits, declarations) {
+  const line = (rule, declared, utility) => {
+    const pattern = new RegExp(declarations ? `${declared}|${utility}` : utility, "g");
+    for (const match of source.matchAll(pattern))
+      hits.push({ rule, line: lineOf(source, match.index), snippet: match[0].trim().slice(0, 80) });
+  };
+  line(
+    "line-height-unit",
+    String.raw`(?<![\w-])line-height\s*:\s*-?${NUMBER}(?:px|rem)\b`,
+    String.raw`(?<![\w-])leading-\[-?${NUMBER}(?:px|rem)\]|(?<![\w-])text-(?:xs|sm|base|lg|xl|[2-9]xl|\[[^\]\s]+\])/\[${NUMBER}(?:px|rem)\]`,
+  );
+  line(
+    "tracking-px",
+    String.raw`(?<![\w-])letter-spacing\s*:\s*-?${NUMBER}(?:px|rem)\b`,
+    String.raw`(?<![\w-])tracking-\[-?${NUMBER}(?:px|rem)\]`,
+  );
+  line(
+    "raw-font-tags",
+    String.raw`(?<![\w-])font-variation-settings\s*:[^;}\]\n]*["']\s*(?:wght|opsz)\b|(?<![\w-])font-feature-settings\s*:[^;}\]\n]*["']\s*(?:tnum|zero)\b`,
+    String.raw`\[font-(?:variation|feature)-settings:[^\]]*(?:wght|opsz|tnum|zero)\b[^\]]*\]`,
+  );
+  line(
+    "text-justify",
+    String.raw`(?<![\w-])text-align(?:-last)?\s*:\s*justify\b`,
+    String.raw`(?<![\w-])text-justify(?![\w-])`,
+  );
+}
+
+function lightSmallText(source, hits) {
+  const seen = new Set();
+  for (const pattern of [/"([^"]{1,400})"/g, /'([^'\n]{1,400})'/g, /`([^`]{1,400})`/g]) {
+    for (const match of source.matchAll(pattern)) {
+      const tokens = match[1].split(/\s+/);
+      if (!tokens.some((t) => LIGHT_CLASS.test(t)) || !tokens.some((t) => SMALL_TEXT_CLASS.test(t)))
+        continue;
+      const line = lineOf(source, match.index);
+      if (seen.has(line)) continue;
+      seen.add(line);
+      hits.push({ rule: "light-small-text", line, snippet: match[1].trim().slice(0, 80) });
+    }
+  }
+}
+
+/** Every text-level CSS and Tailwind rule on one comment-stripped source. */
+export function cssTextRules(source, { declarations = true } = {}) {
+  const hits = [];
+  willChange(source, hits);
+  pressScale(source, hits);
+  keyframeToggle(source, hits);
+  typography(source, hits, declarations);
+  lightSmallText(source, hits);
+  return hits;
+}
+
+const SMALL_FONT =
+  /(?<![\w-])font-size\s*:\s*(?:(\d*\.?\d+)(px|rem)|var\(\s*--text-(?:xs|sm|base)\b)/;
+const LIGHT_WEIGHT = /(?<![\w-])font-weight\s*:\s*(?:[123]00|thin|extra-?light|light|lighter)\b/;
+const STATE_SELECTOR =
+  /:hover\b|\[open\]|\[data-state=["']?(?:open|checked|on|active|selected)|\[aria-(?:expanded|pressed|checked)=["']?true|\.(?:is-)?open\b|:checked\b|:popover-open\b/;
+
+/** The rules that read one CSS rule's selector against its body. `rules` is `parseRules` output. */
+export function cssBlockRules(rules, offset) {
+  const hits = [];
+  for (const rule of rules) {
+    if (rule.selector.startsWith("@")) continue;
+    const line = rule.line + offset;
+    const selectors = rule.selector.split(",").map((s) => s.trim());
+    if (
+      selectors.some((s) => /:active\b/.test(s)) &&
+      /(?<![\w-])(?:transform\s*:[^;}]*\bscale\(\s*([\d.]+)|scale\s*:\s*([\d.]+))/.test(rule.body)
+    ) {
+      const match =
+        /(?<![\w-])(?:transform\s*:[^;}]*\bscale\(\s*([\d.]+)|scale\s*:\s*([\d.]+))/.exec(
+          rule.body,
+        );
+      if (underFloor(match[1] ?? match[2]))
+        hits.push({
+          rule: "press-scale-floor",
+          line,
+          snippet: `${rule.selector} { scale ${match[1] ?? match[2]} }`.slice(0, 80),
+        });
+    }
+    if (
+      STATE_SELECTOR.test(rule.selector) &&
+      !/\\:animate-/.test(rule.selector) &&
+      /(?<![\w-])animation(?:-name)?\s*:(?!\s*none\b)(?![^;}]*(?:collapsible|accordion))[^;}]*[\w-]/.test(
+        rule.body,
+      )
+    )
+      hits.push({
+        rule: "keyframe-toggle",
+        line,
+        snippet: `${rule.selector} { animation }`.slice(0, 80),
+      });
+    if (
+      selectors.some((s) => /(?:^|[\s>+~])(?:p|li)$/.test(s)) &&
+      /(?<![\w-])text-wrap(?:-style)?\s*:\s*balance\b/.test(rule.body)
+    )
+      hits.push({
+        rule: "balance-paragraph",
+        line,
+        snippet: `${rule.selector} { text-wrap: balance }`,
+      });
+    const size = SMALL_FONT.exec(rule.body);
+    if (size && LIGHT_WEIGHT.test(rule.body)) {
+      const small =
+        size[1] === undefined || (size[2] === "px" ? Number(size[1]) <= 16 : Number(size[1]) <= 1);
+      if (small)
+        hits.push({
+          rule: "light-small-text",
+          line,
+          snippet: `${rule.selector} { font-weight light, small font-size }`.slice(0, 80),
+        });
+    }
+  }
+  return hits;
+}

package/ui-rules-markup.js

@@ -0,0 +1,130 @@
+/**
+ * The markup half of the UI-rules gate: the accessibility and form checks that need a tag's attributes.
+ * Pure. `ui-rules.js` calls it with a .svelte or .html source.
+ */
+import { scanTemplate } from "#lint/svelte-template.js";
+
+export const MARKUP_MESSAGES = {
+  "positive-tabindex":
+    'Use tabindex="0" or "-1", never above 0. A positive value jumps ahead of the whole page in tab order. Fix the order of the markup instead.',
+  "div-onclick":
+    'Use a <button> (or an <a href> for a link). A <div> with onclick can\'t be focused and ignores Enter and Space. A click-away backdrop that keyboard users close with Escape can take role="presentation".',
+  "role-no-keys":
+    'Use a real <button>: it takes Enter, Space and focus for free, and works with role="tab" too. A div with role="button" or "tab" needs tabindex and an onkeydown that handles Enter and Space.',
+  "img-no-alt": 'Add alt. Write what the image shows, or alt="" when it only decorates the page.',
+  "aria-hidden-focusable":
+    "Don't hide what the keyboard can reach. Remove aria-hidden, or add tabindex=\"-1\" (or inert) so focus can't land on it.",
+  "input-autocomplete":
+    'Add autocomplete: "email", "tel", "current-password" or "new-password". Use "off" when you type someone else\'s details. Password managers and phones fill from it.',
+  "locale-less-date":
+    "Pass the locale: `date.toLocaleDateString(locale, options)`, or use `Intl.DateTimeFormat(locale, options)`. With no locale the browser picks one, and the page and the server disagree.",
+  "block-paste":
+    "Let people paste. Remove the handler that cancels it: confirm-email and password-manager users paste on purpose.",
+};
+
+const KEY_ATTR = /^(?:on(?:key(?:down|up|press))|on:key(?:down|up|press)(?:\|.*)?)$/i;
+const CLICK_ATTR = /^(?:onclick|on:click(?:\|.*)?|\{onclick\})$/i;
+
+const attrOf = (tag, pattern) => tag.attrs.find((a) => pattern.test(a.name));
+const hasSpread = (tag) => tag.attrs.some((a) => a.name.startsWith("{..."));
+const hasAction = (tag) =>
+  tag.attrs.some((a) => a.name.startsWith("use:") || a.name.startsWith("{@attach"));
+const literal = (attr) =>
+  attr?.value === null || attr === undefined
+    ? undefined
+    : attr.value.replace(/^\{\s*["'`]?|["'`]?\s*\}$/g, "").trim();
+const isTrue = (attr) => attr !== undefined && /^(?:true)?$/.test(literal(attr) ?? "");
+
+const NATIVE_KEYBOARD = new Set(["button", "input", "select", "textarea", "summary", "option"]);
+const regular = (tag) => /^[a-z][a-z0-9]*$/.test(tag.name);
+
+function tabindexOf(tag) {
+  const value = literal(attrOf(tag, /^tabindex$/i));
+  return value === undefined ? undefined : Number(value);
+}
+
+/** The tag-level hits in one .svelte or .html source. */
+export function tagRules(source) {
+  const { tags } = scanTemplate(source);
+  const hits = [];
+  const add = (rule, tag, snippet) =>
+    hits.push({ rule, line: tag.line, snippet: snippet.slice(0, 80) });
+  const tablistKeys = tags.some(
+    (t) => literal(attrOf(t, /^role$/)) === "tablist" && attrOf(t, KEY_ATTR),
+  );
+
+  for (const tag of tags) {
+    if (tag.closing) continue;
+    const role = literal(attrOf(tag, /^role$/));
+
+    if (/^(?:div|span)$/.test(tag.name) && attrOf(tag, CLICK_ATTR) && role === undefined) {
+      if (!isTrue(attrOf(tag, /^aria-hidden$/))) add("div-onclick", tag, `<${tag.name} onclick>`);
+    }
+
+    if (
+      regular(tag) &&
+      !NATIVE_KEYBOARD.has(tag.name) &&
+      !(tag.name === "a" && attrOf(tag, /^href$/)) &&
+      (role === "button" || (role === "tab" && !tablistKeys)) &&
+      attrOf(tag, CLICK_ATTR) &&
+      !attrOf(tag, KEY_ATTR) &&
+      !hasSpread(tag) &&
+      !hasAction(tag)
+    )
+      add("role-no-keys", tag, `<${tag.name} role="${role}" onclick> with no key handler`);
+
+    if (tag.name === "img" && !attrOf(tag, /^(?:alt|\{alt\})$/) && !hasSpread(tag))
+      add("img-no-alt", tag, "an img tag with no alt");
+
+    if (isTrue(attrOf(tag, /^aria-hidden$/)) && regular(tag)) {
+      const index = tabindexOf(tag);
+      const type = literal(attrOf(tag, /^type$/));
+      const native =
+        /^(?:button|select|textarea|summary)$/.test(tag.name) ||
+        (tag.name === "a" && attrOf(tag, /^href$/)) ||
+        (tag.name === "input" && type !== "hidden");
+      if (!attrOf(tag, /^inert$/) && (index === undefined ? native : index >= 0))
+        add("aria-hidden-focusable", tag, `<${tag.name} aria-hidden="true"> that takes focus`);
+    }
+
+    if (/^[Ii]nput$/.test(tag.name) && !hasSpread(tag) && !attrOf(tag, /^autocomplete$/i)) {
+      const type = literal(attrOf(tag, /^type$/));
+      if (type === "email" || type === "password" || type === "tel")
+        add("input-autocomplete", tag, `<${tag.name} type="${type}"> with no autocomplete`);
+    }
+
+    const paste = attrOf(tag, /^(?:onpaste|on:paste\|.*preventDefault.*)$/);
+    if (
+      paste &&
+      (paste.name.startsWith("on:") ||
+        /^\{\s*(?:async\s*)?(?:\(\s*\w*\s*\)|\w+)\s*=>\s*(?:\{\s*)?(?:\w+\.)?preventDefault\(\)\s*;?\s*\}?\s*\}$/.test(
+          paste.value ?? "",
+        ))
+    )
+      add("block-paste", tag, `<${tag.name} onpaste> that cancels the paste`);
+
+    if (tag.name === "p") {
+      const classes = (attrOf(tag, /^class$/)?.value ?? "") + (attrOf(tag, /^style$/)?.value ?? "");
+      if (/(?<![\w-])text-balance(?![\w-])|text-wrap\s*:\s*balance/.test(classes))
+        add("balance-paragraph", tag, "<p> with text-balance");
+    }
+  }
+  return hits;
+}
+
+/** The text-level checks that hold in any file: a positive tabindex, a locale-less date and a paste cancelled in script. */
+export function markupTextRules(source) {
+  const hits = [];
+  const line = (index) => source.slice(0, index).split("\n").length;
+  for (const match of source.matchAll(
+    /(?<![\w-])tab[iI]ndex\s*=\s*(?:"\s*|'\s*|\{\s*["']?\s*)[1-9]\d*(?![\d.])/g,
+  ))
+    hits.push({ rule: "positive-tabindex", line: line(match.index), snippet: match[0].trim() });
+  for (const match of source.matchAll(/\.toLocale(?:Date|Time)String\(\s*(?:\)|undefined\b|\{)/g))
+    hits.push({ rule: "locale-less-date", line: line(match.index), snippet: match[0].trim() });
+  for (const match of source.matchAll(
+    /addEventListener\(\s*["']paste["']\s*,\s*(?:\(\s*\w*\s*\)|\w+)\s*=>\s*(?:\{\s*)?\w+\.preventDefault\(\)/g,
+  ))
+    hits.push({ rule: "block-paste", line: line(match.index), snippet: match[0].slice(0, 80) });
+  return hits;
+}

package/ui-rules.js

@@ -2,6 +2,8 @@
  * The UI-rules gate: CSS, markup and config checks the impeccable detector misses.
  * Pure here, git and process in `bin/heyramzi-ui-rules.js`.
  */
+import { blankCode, CSS_MESSAGES, cssBlockRules, cssTextRules } from "#lint/ui-rules-css.js";
+import { MARKUP_MESSAGES, markupTextRules, tagRules } from "#lint/ui-rules-markup.js";
 
 export const STYLE_EXTENSIONS = [".svelte", ".css", ".html", ".ts", ".tsx"];
 
@@ -55,7 +57,7 @@ const MESSAGES = {
   "viewport-zoom":
     "Never disable zoom, it's an accessibility failure. Remove `user-scalable=no` and `maximum-scale=1`; set input font size to 16px instead, since that caused the zoom.",
   "body-user-select":
-    "Never `user-select: none` on body or html: users copy addresses and order numbers. Put it on controls only (`button`, `[role=\"button\"]`, `.tab`, `.chip`).",
+    'Never `user-select: none` on body or html: users copy addresses and order numbers. Put it on controls only (`button`, `[role="button"]`, `.tab`, `.chip`).',
   "outline-neutral":
     "Image outlines are pure black or white at 10%: `outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10`. Never `outline-slate-*`, `-zinc-*` or `-neutral-*`.",
   "raw-hover":
@@ -63,19 +65,26 @@ const MESSAGES = {
   "local-shadcn":
     "Never vendor shadcn. Import from `@heyramzi/ui/shadcn/<name>`; a fix or new component lands in the `@heyramzi/ui` source and arrives as a version bump. Delete the local copy and `components.json`.",
   "ui-source":
-    "app.css needs `@source \"../node_modules/@heyramzi/ui/src\";` (path relative to app.css), or Tailwind generates none of the kit's classes.",
+    'app.css needs `@source "../node_modules/@heyramzi/ui/src";` (path relative to app.css), or Tailwind generates none of the kit\'s classes.',
   "cloudflare-relative":
     "Set `paths: { relative: false }` in svelte.config. adapter-cloudflare with relative paths took upsys-consulting.com down with intermittent 404s.",
   "static-shadow":
     "Delete the static file. On Cloudflare a file in `static/` beats a route of the same path, so a robots or sitemap route never has a static twin.",
+  ...CSS_MESSAGES,
+  ...MARKUP_MESSAGES,
 };
 
+/** Exports, thumbnails and client mock-ups are .html. The rules added after them judge components only. */
+const HTML_EXEMPT = new Set([...Object.keys(CSS_MESSAGES), ...Object.keys(MARKUP_MESSAGES)]);
+
 /** Blank out comments, keeping every newline so line numbers hold. */
 export function stripComments(source, file) {
   const blank = (match) => match.replace(/[^\n]/g, " ");
   let out = source.replace(/\/\*[\s\S]*?\*\//g, blank);
-  if (file.endsWith(".svelte") || file.endsWith(".html")) out = out.replace(/<!--[\s\S]*?-->/g, blank);
-  if (/\.(svelte|tsx?)$/.test(file)) out = out.replace(/(^|[\s;{(,])\/\/[^\n]*/g, (m, lead) => lead + blank(m.slice(lead.length)));
+  if (file.endsWith(".svelte") || file.endsWith(".html"))
+    out = out.replace(/<!--[\s\S]*?-->/g, blank);
+  if (/\.(svelte|tsx?)$/.test(file))
+    out = out.replace(/(^|[\s;{(,])\/\/[^\n]*/g, (m, lead) => lead + blank(m.slice(lead.length)));
   return out;
 }
 
@@ -100,8 +109,14 @@ const SWIFT_T_CLASS = new RegExp(
 );
 
 const LINE_RULES = [
-  ["transition-all", /(?<![\w-])transition(?:-property)?\s*:\s*[^;}"'`]*\ball\b|(?<![\w-])transition-(?:all|\[all\])(?![\w-])/g],
-  ["scale-zero", /(?<![\w-])scale\(\s*0(?:\.0+)?\s*(?:,\s*0(?:\.0+)?\s*)?\)|(?<![\w-])scale-0(?![\w.-])/g],
+  [
+    "transition-all",
+    /(?<![\w-])transition(?:-property)?\s*:\s*[^;}"'`]*\ball\b|(?<![\w-])transition-(?:all|\[all\])(?![\w-])/g,
+  ],
+  [
+    "scale-zero",
+    /(?<![\w-])scale\(\s*0(?:\.0+)?\s*(?:,\s*0(?:\.0+)?\s*)?\)|(?<![\w-])scale-0(?![\w.-])/g,
+  ],
   ["ease-in", /(?<![\w-])ease-in(?![\w-])/g],
   ["duration-literal", /(?<![\w-])(?:duration|delay)-\[\s*[\d.]+m?s\s*\]/g],
   ["duration-bare", new RegExp(`(?<![\\w-])(?:duration|delay)-(?:${TOKEN_NAMES})(?![\\w-])`, "g")],
@@ -129,13 +144,22 @@ export function parseRules(css) {
     const char = css[i];
     if (char === "{") {
       const prelude = css.slice(start, i).trim();
-      stack.push({ prelude, from: i + 1, line: lineOf(css, start + (css.slice(start).length - css.slice(start).trimStart().length)) });
+      stack.push({
+        prelude,
+        from: i + 1,
+        line: lineOf(css, start + (css.slice(start).length - css.slice(start).trimStart().length)),
+      });
       start = i + 1;
     } else if (char === "}") {
       const open = stack.pop();
       if (open) {
         const body = css.slice(open.from, i);
-        rules.push({ selector: open.prelude, body, ancestors: stack.map((s) => s.prelude), line: open.line });
+        rules.push({
+          selector: open.prelude,
+          body,
+          ancestors: stack.map((s) => s.prelude),
+          line: open.line,
+        });
       }
       start = i + 1;
     } else if (char === ";") {
@@ -146,25 +170,44 @@ export function parseRules(css) {
 }
 
 const hoverGated = (ancestors) =>
-  ancestors.some((p) => /^@media\b[^{]*hover\s*:\s*hover/i.test(p) || /^@(custom-variant|variant|utility|theme)\b/.test(p));
+  ancestors.some(
+    (p) =>
+      /^@media\b[^{]*hover\s*:\s*hover/i.test(p) ||
+      /^@(custom-variant|variant|utility|theme)\b/.test(p),
+  );
 
 function cssRules(source, file) {
   const hits = [];
   for (const { css, offset } of styleBlocks(source, file)) {
-    for (const rule of parseRules(css)) {
+    const rules = parseRules(css);
+    hits.push(...cssBlockRules(rules, offset));
+    for (const rule of rules) {
       if (rule.selector.startsWith("@")) continue;
       const line = rule.line + offset;
       if (/:hover\b/.test(rule.selector) && !hoverGated(rule.ancestors)) {
         hits.push({ rule: "raw-hover", line, snippet: rule.selector.slice(0, 80) });
       }
       const selectors = rule.selector.split(",").map((s) => s.trim());
-      const own = selectors.some((s) => /(^|[\s>+~])\.t-acc-panel$/.test(s) || /(^|[\s>+~])\.t-acc-panel(?=[:.[])/.test(s));
-      if (own && /(?<![\w-])padding(?:-[a-z]+)*\s*:/.test(rule.body) && !selectors.some((s) => /t-acc-panel-/.test(s))) {
+      const own = selectors.some(
+        (s) => /(^|[\s>+~])\.t-acc-panel$/.test(s) || /(^|[\s>+~])\.t-acc-panel(?=[:.[])/.test(s),
+      );
+      if (
+        own &&
+        /(?<![\w-])padding(?:-[a-z]+)*\s*:/.test(rule.body) &&
+        !selectors.some((s) => /t-acc-panel-/.test(s))
+      ) {
         hits.push({ rule: "acc-panel-padding", line, snippet: `${rule.selector} { padding }` });
       }
       const root = selectors.some((s) => /^(?:body|html)$/.test(s));
-      if (root && /(?<![\w-])(?:-webkit-)?user-select\s*:\s*none|@apply[^;]*\bselect-none\b/.test(rule.body)) {
-        hits.push({ rule: "body-user-select", line, snippet: `${rule.selector} { user-select: none }` });
+      if (
+        root &&
+        /(?<![\w-])(?:-webkit-)?user-select\s*:\s*none|@apply[^;]*\bselect-none\b/.test(rule.body)
+      ) {
+        hits.push({
+          rule: "body-user-select",
+          line,
+          snippet: `${rule.selector} { user-select: none }`,
+        });
       }
     }
   }
@@ -174,11 +217,23 @@ function cssRules(source, file) {
 function markupRules(source) {
   const hits = [];
   for (const match of source.matchAll(/<body\b[^>]*\bclass\s*=\s*["'{`][^"'`>]*\bselect-none\b/g)) {
-    hits.push({ rule: "body-user-select", line: lineOf(source, match.index), snippet: "<body class=\"select-none\">" });
+    hits.push({
+      rule: "body-user-select",
+      line: lineOf(source, match.index),
+      snippet: '<body class="select-none">',
+    });
   }
-  for (const match of source.matchAll(/class\s*=\s*["'`{][^"'`>]*(?<![\w-])t-acc-panel(?![\w-])[^"'`>]*/g)) {
-    if (/(?:^|[\s:"'`{])-?p[xytblrse]?-[\w[\]./]+/.test(match[0].replace(/^class\s*=\s*["'`{]/, " "))) {
-      hits.push({ rule: "acc-panel-padding", line: lineOf(source, match.index), snippet: match[0].slice(0, 80) });
+  for (const match of source.matchAll(
+    /class\s*=\s*["'`{][^"'`>]*(?<![\w-])t-acc-panel(?![\w-])[^"'`>]*/g,
+  )) {
+    if (
+      /(?:^|[\s:"'`{])-?p[xytblrse]?-[\w[\]./]+/.test(match[0].replace(/^class\s*=\s*["'`{]/, " "))
+    ) {
+      hits.push({
+        rule: "acc-panel-padding",
+        line: lineOf(source, match.index),
+        snippet: match[0].slice(0, 80),
+      });
     }
   }
   return hits;
@@ -192,10 +247,17 @@ export function checkFile(file, source) {
   if (!STYLE_EXTENSIONS.some((ext) => file.endsWith(ext))) return [];
   const clean = stripComments(source, file);
   const plainTs = file.endsWith(".ts") || file.endsWith(".tsx");
-  const hits = LINE_RULES.filter(([rule]) => !(plainTs && rule === "ease-in")).flatMap(([rule, pattern]) => scan(clean, pattern, rule));
+  const hits = LINE_RULES.filter(([rule]) => !(plainTs && rule === "ease-in")).flatMap(
+    ([rule, pattern]) => scan(clean, pattern, rule),
+  );
   if (!plainTs) hits.push(...cssRules(clean, file));
   if (!file.endsWith(".css")) hits.push(...markupRules(clean));
-  return hits.sort((a, b) => a.line - b.line);
+  const svelte = file.endsWith(".svelte");
+  hits.push(...cssTextRules(svelte ? blankCode(clean) : clean, { declarations: !plainTs }));
+  if (!file.endsWith(".css")) hits.push(...markupTextRules(clean));
+  if (svelte) hits.push(...tagRules(source));
+  const kept = file.endsWith(".html") ? hits.filter((hit) => !HTML_EXEMPT.has(hit.rule)) : hits;
+  return kept.sort((a, b) => a.line - b.line);
 }
 
 export function describe(rule) {
@@ -261,7 +323,10 @@ export function checkProject(files, tracked, read) {
   }
 
   const prefixes = new Set();
-  for (const file of [...files, ...tracked.filter((f) => /\/\+(server|page)\.(ts|js|svelte)$/.test(f) && files.includes(f))]) {
+  for (const file of [
+    ...files,
+    ...tracked.filter((f) => /\/\+(server|page)\.(ts|js|svelte)$/.test(f) && files.includes(f)),
+  ]) {
     const staticAt = file.match(/^(.*?)(?:^|\/)static\/(.+)$/) ?? file.match(/^()static\/(.+)$/);
     if (staticAt) prefixes.add(staticAt[1] === undefined ? "" : staticAt[1].replace(/\/$/, ""));
     const routeAt = file.match(/^(.*?)\/?src\/routes\//);
@@ -275,7 +340,10 @@ export function checkProject(files, tracked, read) {
       const route = file.slice(`${base}src/routes/`.length);
       const match = route.match(/^(.*?)\/?\+(?:server\.(?:ts|js)|page\.svelte)$/);
       if (!match) continue;
-      const url = match[1].split("/").filter((seg) => !/^\(.*\)$/.test(seg)).join("/");
+      const url = match[1]
+        .split("/")
+        .filter((seg) => !/^\(.*\)$/.test(seg))
+        .join("/");
       if (!url || /[[\]]/.test(url)) continue;
       const twin = `${base}static/${url}`;
       if (trackedSet.has(twin) && (judged.has(twin) || judged.has(file))) {
@@ -320,5 +388,8 @@ export function durationNames(tracked, read) {
 
 /** Drops `duration-bare` hits the repo resolves. */
 export function resolvedDurations(hits, names) {
-  return hits.filter((hit) => !(hit.rule === "duration-bare" && names.has(hit.snippet.replace(/^(?:duration|delay)-/, ""))));
+  return hits.filter(
+    (hit) =>
+      !(hit.rule === "duration-bare" && names.has(hit.snippet.replace(/^(?:duration|delay)-/, ""))),
+  );
 }

package/vendor/old-names-words.js

@@ -0,0 +1,9 @@
+/**
+ * The words the old-names gate bans, declared once. The gate skips vendor folders, so this file can spell them.
+ */
+
+/** Banned anywhere in a file, inside a longer word too. */
+export const SUBSTRING_WORD = "legacy";
+
+/** Banned as a whole word part of a name. */
+export const PART_WORDS = ["compat", "deprecated", "shim"];

package/rules/no-relative-type-imports.js

@@ -1,40 +0,0 @@
-export default {
-  meta: {
-    type: "suggestion",
-    deprecated: true,
-    replacedBy: ["no-relative-imports"],
-    docs: {
-      description: "Disallow relative imports for type-only imports. Use @/ path alias instead.",
-    },
-    messages: {
-      noRelativeTypeImport:
-        "Use @/ path alias for type imports instead of relative import '{{ source }}'.",
-    },
-    schema: [],
-  },
-  create(context) {
-    return {
-      ImportDeclaration(node) {
-        if (node.importKind === "type" || hasTypeImport(node)) {
-          const source = node.source.value;
-          if (source === "./$types") {
-            return;
-          }
-          if (source.startsWith(".")) {
-            context.report({
-              node: node.source,
-              messageId: "noRelativeTypeImport",
-              data: { source },
-            });
-          }
-        }
-      },
-    };
-  },
-};
-
-function hasTypeImport(node) {
-  return node.specifiers.some(
-    (specifier) => specifier.type === "ImportSpecifier" && specifier.importKind === "type",
-  );
-}