c30bf56 · 5e5b5cd · 6528c56 · 5e54050 · cbd19a0
@@ -13,7 +13,12 @@
- **Motion**: 100–200ms, `cubic-bezier(.2,0,0,1)`, enter only. Only `color`,
  `background-color`, `border-color`, `opacity` and `transform` are ever
  animated. Never `height`, never `box-shadow` on scroll. Everything is inside
  the `prefers-reduced-motion` kill switch.
  the `prefers-reduced-motion` kill switch. `bun scripts/design-lint.ts` refuses
      
        junipercrew
        1d ago
        
      
      The sentence reads as if motion is refused both when unanswered and when it is not inside no-preference. Say plainly: it is refused unless a reduce rule in the sheet turns it off, or it sits inside (prefers-reduced-motion: no-preference).
    
  an `animation` or `transition` over 100ms (naming its selector) unless a
  `@media (prefers-reduced-motion: reduce)` rule in the same sheet turns it off,
  or it sits inside `(prefers-reduced-motion: no-preference)`. It reads the
  `animation`/`transition` shorthands and their `-duration` longhands; the
  `animation-delay` and `transition-delay` longhands are not checked.
- **Focus** is the accent at 2px with 2px offset, identical on every control,
  and inset (−2px) on full-bleed rows so nothing reflows. Never `outline: none`.
- **Sticky, and only these**: the topbar, a diff file's header, the file path
@@ -67,9 +67,11 @@
import { readdirSync, readFileSync, writeFileSync } from "node:fs";
import { join, relative } from "node:path";
import { STRANGER_NEVER_SEES } from "../src/design/first_five_minutes.ts";
import { compareLayout, layoutCounts, scanLayout } from "../src/design/layout.ts";
import { motionFindings } from "../src/design/motion.ts";
import { cssBlocksAt, scanOverlay, sourceFiles } from "../src/design/overlay.ts";
// The covered-page rule lives in src/design/ so the release preflight runs it too (#11916).
export { motionFindings, type MotionFinding } from "../src/design/motion.ts";
export { compareLayout, layoutCounts, layoutIn, scanLayout } from "../src/design/layout.ts";
export { matchesClosedOverlay, overlay, overlayClassesIn, type OverlayFinding, scanOverlay, sourceFiles } from "../src/design/overlay.ts";
@@ -561,6 +563,18 @@
export function scanStranger(root: string): string[] {
  return STRANGER_FILES.flatMap((f) => strangerWords(readFileSync(join(root, f), "utf8")).map((w) => `${f}:${w.line}  "${w.word}" in "${w.text}"  →  a stranger is never shown this word (docs/DESIGN.md § The first five minutes): say it in plain words`));
}
/** Calm (#12418): a transition or animation over 100 ms with no reduced-motion answer in its sheet. Not a ratchet: none is allowed. */
export function scanMotion(root: string): string[] {
  const out: string[] = [];
  for (const f of sourceFiles(root)) {
    const text = readFileSync(f, "utf8");
    for (const css of cssBlocks(text)) {
      for (const m of motionFindings(css)) out.push(`${relative(root, f)}: ${m.selector} — ${m.property} of ${m.ms}ms with no @media (prefers-reduced-motion: reduce) rule in the sheet turning it off (docs/DESIGN.md §4)`);
    }
  }
  return out;
}
const BASELINE = "docs/design/baseline.json";
const DESIGN = "docs/DESIGN.md";
const SECTIONS = "docs/design/sections";
@@ -577,7 +591,7 @@
if (import.meta.main) {
  } else {
    const base: Baseline = JSON.parse(readFileSync(join(root, BASELINE), "utf8"));
    const debt: QuietDebt = JSON.parse(readFileSync(join(root, QUIET_DEBT), "utf8"));
    const problems = [...compare(base, now, designText(root), areaFiles(root)), ...compareQuiet(debt, scanQuiet(root)), ...scanBanner(root), ...compareLayout(base.layout ?? {}, scanLayout(root)), ...scanOverlay(root), ...scanCards(root), ...scanStranger(root)];
    const problems = [...compare(base, now, designText(root), areaFiles(root)), ...compareQuiet(debt, scanQuiet(root)), ...scanBanner(root), ...compareLayout(base.layout ?? {}, scanLayout(root)), ...scanOverlay(root), ...scanCards(root), ...scanStranger(root), ...scanMotion(root)];
    for (const p of problems) console.error(p);
    if (problems.length) process.exit(1);
    console.log("design: no colour, size or component added outside the system");
@@ -0,0 +1,85 @@
/**
 * Calm (#12418): the page does not move unless asked. A stylesheet rule whose
 * `animation` or `transition` runs longer than 100 ms is refused unless a
 * `@media (prefers-reduced-motion: reduce)` rule in the same sheet turns it
 * off — the selector itself, or a universal `*` that shortens every duration.
 * Plain data in (one sheet's text), plain findings out.
 */
export type MotionFinding = { selector: string; property: "animation" | "transition"; ms: number };
/** `reduce` rules may answer; `no-preference` rules are exempt; neither is both. */
type Mode = "" | "reduce" | "no-preference";
type Rule = { selector: string; body: string; mode: Mode };
const strip = (css: string): string => css.replace(/\/\*[\s\S]*?\*\//g, "");
/**
 * Every `selector { body }` of a sheet, @media/@supports nesting flattened;
 * @keyframes steps are skipped.
 */
function rules(css: string): Rule[] {
  const out: Rule[] = [];
  const walk = (text: string, mode: Mode): void => {
    let i = 0;
    while (i < text.length) {
      const open = text.indexOf("{", i);
      if (open < 0) return;
      let depth = 1, j = open + 1;
      while (j < text.length && depth) depth += text[j] === "{" ? 1 : text[j] === "}" ? -1 : 0, j++;
      const head = text.slice(i, open).replace(/^[\s;}]+/, "").trim();
      const inner = text.slice(open + 1, j - 1);
      if (/^@keyframes\b/i.test(head)) {
      
        junipercrew
        1d ago
        outdated
      
      reduced is true for both reduce and no-preference, so rules inside no-preference become reduce 'answers' in calm. Split the flag in two: one for exemption, one for answering. Add a test.
    
        /* the steps of an animation are not rules */
      } else if (head.startsWith("@")) {
        const q = /prefers-reduced-motion\s*:\s*(reduce|no-preference)/i.exec(head);
        walk(inner, mode || (q ? (q[1]!.toLowerCase() as Mode) : ""));
      } else if (head) {
        out.push({ selector: head.replace(/\s+/g, " "), body: inner, mode });
      }
      i = j;
    }
  };
  walk(strip(css), "");
  return out;
}
const TIME = /(?<![\w.-])(\d*\.?\d+)(ms|s)\b/g;
const ms = (m: RegExpMatchArray): number => Number(m[1]) * (m[2] === "s" ? 1000 : 1);
/** The longest time in a value; a transition's delay counts too, being movement that waits. */
function longest(value: string): number {
  let max = 0;
  for (const m of value.matchAll(TIME)) max = Math.max(max, ms(m));
  return max;
}
/** Does a reduced-motion rule's body stop `property` (none, or a duration of 100 ms or less)? */
function stops(body: string, property: "animation" | "transition"): boolean {
  for (const d of body.matchAll(new RegExp(`(?<![\\w-])${property}(-duration|-name)?\\s*:\\s*([^;}]*)`, "g"))) {
    const v = d[2]!.replace(/!important/i, "").trim();
    if (d[1] === "-name" || (!d[1] && /^none\b/.test(v))) return true;
    if (d[1] === "-duration" || (!d[1] && v)) return longest(v) <= 100;
  }
  return false;
}
export function motionFindings(css: string): MotionFinding[] {
  const all = rules(css);
  const calm = all.filter((r) => r.mode === "reduce");
  const out: MotionFinding[] = [];
  for (const r of all) {
    if (r.mode) continue;
    for (const property of ["animation", "transition"] as const) {
      let long = 0;
      for (const d of r.body.matchAll(new RegExp(`(?<![\\w-])${property}(-duration)?\\s*:\\s*([^;}]*)`, "g"))) {
        if (/^none\b/.test(d[2]!.trim())) continue;
        long = Math.max(long, longest(d[2]!));
      }
      if (long <= 100) continue;
      const answered = calm.some((c) => stops(c.body, property) && c.selector.split(",").some((s) => /(^|\s)\*(::\w+)?$/.test(s.trim()) || r.selector.split(",").some((own) => own.trim() === s.trim())));
      if (!answered) out.push({ selector: r.selector, property, ms: long });
    }
  }
  return out;
}
@@ -1188,6 +1188,7 @@
textarea.editor:focus-visible { outline: none; }
/* Reduced motion: the pulses hold still at a legible level, the scroll-tied
   fade stays at its resting width, and these transitions land at once. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      
        junipercrew
        1d ago
        outdated
      
      Add animation-iteration-count: 1 !important here. A .01ms infinite animation flickers rather than stopping.
    
  .run-log [data-line="pulse"] i { animation: none; }
  .run-log [data-line="pulse"] i { opacity: .6; }
  .ex-dir > summary > .ico, .code-layout > #code-main[aria-busy="true"], .code-layout > [data-split]::after { transition: none; }
@@ -0,0 +1,49 @@
import { describe, expect, test } from "bun:test";
import { mkdirSync, readFileSync, mkdtempSync, writeFileSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";
import { motionFindings, scanMotion } from "../scripts/design-lint.ts";
describe("design lint: motion needs a reduced-motion answer (#12418)", () => {
  test("a slow transition with no answer fails, naming the selector", () => {
    const f = motionFindings(`.card a { transition: color 150ms ease; }`);
    expect(f).toEqual([{ selector: ".card a", property: "transition", ms: 150 }]);
  });
  test("an animation in seconds fails too", () => {
    expect(motionFindings(`.dot { animation: pulse 2s infinite; } @keyframes pulse { 50% { opacity: .3; } }`).map((x) => x.selector)).toEqual([".dot"]);
  });
  test("a shared reduced-motion block passes", () => {
    const css = `.a { transition: opacity 200ms; } .b { animation: x 1s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }`;
    expect(motionFindings(css)).toEqual([]);
  });
  test("the same selector turned off passes; a different one does not", () => {
    const off = `.a { transition: opacity 200ms; } @media (prefers-reduced-motion: reduce) { .a { transition: none; } }`;
    expect(motionFindings(off)).toEqual([]);
    expect(motionFindings(off.replace("{ .a { transition: none", "{ .z { transition: none")).length).toBe(1);
  });
  test("a duration answer only for animations leaves a transition failing", () => {
    const css = `.a { transition: opacity 200ms; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms; } }`;
    expect(motionFindings(css).length).toBe(1);
  });
  test("100 ms or less, and motion only under no-preference, pass", () => {
    expect(motionFindings(`.a { transition: color 100ms; } .b { transition: none; }`)).toEqual([]);
    expect(motionFindings(`@media (prefers-reduced-motion: no-preference) { .a { animation: p 2s infinite; } @keyframes p { 50% { opacity: .3; } } }`)).toEqual([]);
  });
  test("a no-preference rule exempts itself but never answers for a reduce-less selector", () => {
    const css = `.a { transition: opacity 200ms; } @media (prefers-reduced-motion: no-preference) { .a { transition: none; } }`;
    expect(motionFindings(css).map((x) => x.selector)).toEqual([".a"]);
  });
  test("the sheets of a tree are scanned, naming the file", () => {
    const root = mkdtempSync(join(process.env.TMPDIR ?? tmpdir(), "motion-"));
    mkdirSync(join(root, "src/web"), { recursive: true });
    writeFileSync(join(root, "src/web/a.ts"), "export const css = /* css */ `.x { transition: color 150ms; }`;\n");
    writeFileSync(join(root, "src/web/b.ts"), "export const css = /* css */ `.y { transition: color 90ms; }`;\n");
    const out = scanMotion(root);
    expect(out.length).toBe(1);
    expect(out[0]).toContain("src/web/a.ts: .x");
  });
  test("the shared block holds infinite animations still", () => {
    expect(readFileSync("src/web/style/content.ts", "utf8")).toContain("animation-iteration-count: 1 !important");
  });
});
		@@ -13,7 +13,12 @@
13	13	- Motion: 100–200ms, `cubic-bezier(.2,0,0,1)`, enter only. Only `color`,
14	14	`background-color`, `border-color`, `opacity` and `transform` are ever
15	15	animated. Never `height`, never `box-shadow` on scroll. Everything is inside
16		the `prefers-reduced-motion` kill switch.
	16	the `prefers-reduced-motion` kill switch. `bun scripts/design-lint.ts` refuses
		junipercrew 1d ago The sentence reads as if motion is refused both when unanswered and when it is not inside no-preference. Say plainly: it is refused unless a reduce rule in the sheet turns it off, or it sits inside `(prefers-reduced-motion: no-preference)`.
	17	an `animation` or `transition` over 100ms (naming its selector) unless a
	18	`@media (prefers-reduced-motion: reduce)` rule in the same sheet turns it off,
	19	or it sits inside `(prefers-reduced-motion: no-preference)`. It reads the
	20	`animation`/`transition` shorthands and their `-duration` longhands; the
	21	`animation-delay` and `transition-delay` longhands are not checked.
17	22	- Focus is the accent at 2px with 2px offset, identical on every control,
18	23	and inset (−2px) on full-bleed rows so nothing reflows. Never `outline: none`.
19	24	- Sticky, and only these: the topbar, a diff file's header, the file path
		@@ -67,9 +67,11 @@ import { readdirSync, readFileSync, writeFileSync } from "node:fs";
67	67	import { join, relative } from "node:path";
68	68	import { STRANGER_NEVER_SEES } from "../src/design/first_five_minutes.ts";
69	69	import { compareLayout, layoutCounts, scanLayout } from "../src/design/layout.ts";
	70	import { motionFindings } from "../src/design/motion.ts";
70	71	import { cssBlocksAt, scanOverlay, sourceFiles } from "../src/design/overlay.ts";
71	72
72	73	// The covered-page rule lives in src/design/ so the release preflight runs it too (#11916).
	74	export { motionFindings, type MotionFinding } from "../src/design/motion.ts";
73	75	export { compareLayout, layoutCounts, layoutIn, scanLayout } from "../src/design/layout.ts";
74	76	export { matchesClosedOverlay, overlay, overlayClassesIn, type OverlayFinding, scanOverlay, sourceFiles } from "../src/design/overlay.ts";
75	77
		@@ -561,6 +563,18 @@ export function scanStranger(root: string): string[] {
561	563	return STRANGER_FILES.flatMap((f) => strangerWords(readFileSync(join(root, f), "utf8")).map((w) => `${f}:${w.line} "${w.word}" in "${w.text}" → a stranger is never shown this word (docs/DESIGN.md § The first five minutes): say it in plain words`));
562	564	}
563	565
	566	/** Calm (#12418): a transition or animation over 100 ms with no reduced-motion answer in its sheet. Not a ratchet: none is allowed. */
	567	export function scanMotion(root: string): string[] {
	568	const out: string[] = [];
	569	for (const f of sourceFiles(root)) {
	570	const text = readFileSync(f, "utf8");
	571	for (const css of cssBlocks(text)) {
	572	for (const m of motionFindings(css)) out.push(`${relative(root, f)}: ${m.selector} — ${m.property} of ${m.ms}ms with no @media (prefers-reduced-motion: reduce) rule in the sheet turning it off (docs/DESIGN.md §4)`);
	573	}
	574	}
	575	return out;
	576	}
	577
564	578	const BASELINE = "docs/design/baseline.json";
565	579	const DESIGN = "docs/DESIGN.md";
566	580	const SECTIONS = "docs/design/sections";
		@@ -577,7 +591,7 @@ if (import.meta.main) {
577	591	} else {
578	592	const base: Baseline = JSON.parse(readFileSync(join(root, BASELINE), "utf8"));
579	593	const debt: QuietDebt = JSON.parse(readFileSync(join(root, QUIET_DEBT), "utf8"));
580		const problems = [...compare(base, now, designText(root), areaFiles(root)), ...compareQuiet(debt, scanQuiet(root)), ...scanBanner(root), ...compareLayout(base.layout ?? {}, scanLayout(root)), ...scanOverlay(root), ...scanCards(root), ...scanStranger(root)];
	594	const problems = [...compare(base, now, designText(root), areaFiles(root)), ...compareQuiet(debt, scanQuiet(root)), ...scanBanner(root), ...compareLayout(base.layout ?? {}, scanLayout(root)), ...scanOverlay(root), ...scanCards(root), ...scanStranger(root), ...scanMotion(root)];
581	595	for (const p of problems) console.error(p);
582	596	if (problems.length) process.exit(1);
583	597	console.log("design: no colour, size or component added outside the system");
		@@ -0,0 +1,85 @@
	1	/**
	2	* Calm (#12418): the page does not move unless asked. A stylesheet rule whose
	3	* `animation` or `transition` runs longer than 100 ms is refused unless a
	4	* `@media (prefers-reduced-motion: reduce)` rule in the same sheet turns it
	5	* off — the selector itself, or a universal `*` that shortens every duration.
	6	* Plain data in (one sheet's text), plain findings out.
	7	*/
	8
	9	export type MotionFinding = { selector: string; property: "animation" \| "transition"; ms: number };
	10
	11	/** `reduce` rules may answer; `no-preference` rules are exempt; neither is both. */
	12	type Mode = "" \| "reduce" \| "no-preference";
	13	type Rule = { selector: string; body: string; mode: Mode };
	14
	15	const strip = (css: string): string => css.replace(/\/\[\s\S]?\*\//g, "");
	16
	17	/**
	18	* Every `selector { body }` of a sheet, @media/@supports nesting flattened;
	19	* @keyframes steps are skipped.
	20	*/
	21	function rules(css: string): Rule[] {
	22	const out: Rule[] = [];
	23	const walk = (text: string, mode: Mode): void => {
	24	let i = 0;
	25	while (i < text.length) {
	26	const open = text.indexOf("{", i);
	27	if (open < 0) return;
	28	let depth = 1, j = open + 1;
	29	while (j < text.length && depth) depth += text[j] === "{" ? 1 : text[j] === "}" ? -1 : 0, j++;
	30	const head = text.slice(i, open).replace(/^[\s;}]+/, "").trim();
	31	const inner = text.slice(open + 1, j - 1);
	32	if (/^@keyframes\b/i.test(head)) {
		junipercrew 1d ago outdated `reduced` is true for both `reduce` and `no-preference`, so rules inside no-preference become reduce 'answers' in `calm`. Split the flag in two: one for exemption, one for answering. Add a test.
	33	/* the steps of an animation are not rules */
	34	} else if (head.startsWith("@")) {
	35	const q = /prefers-reduced-motion\s:\s(reduce\|no-preference)/i.exec(head);
	36	walk(inner, mode \|\| (q ? (q[1]!.toLowerCase() as Mode) : ""));
	37	} else if (head) {
	38	out.push({ selector: head.replace(/\s+/g, " "), body: inner, mode });
	39	}
	40	i = j;
	41	}
	42	};
	43	walk(strip(css), "");
	44	return out;
	45	}
	46
	47	const TIME = /(?<![\w.-])(\d*\.?\d+)(ms\|s)\b/g;
	48	const ms = (m: RegExpMatchArray): number => Number(m[1]) * (m[2] === "s" ? 1000 : 1);
	49
	50	/** The longest time in a value; a transition's delay counts too, being movement that waits. */
	51	function longest(value: string): number {
	52	let max = 0;
	53	for (const m of value.matchAll(TIME)) max = Math.max(max, ms(m));
	54	return max;
	55	}
	56
	57	/** Does a reduced-motion rule's body stop `property` (none, or a duration of 100 ms or less)? */
	58	function stops(body: string, property: "animation" \| "transition"): boolean {
	59	for (const d of body.matchAll(new RegExp(`(?<![\\w-])${property}(-duration\|-name)?\\s:\\s([^;}]*)`, "g"))) {
	60	const v = d[2]!.replace(/!important/i, "").trim();
	61	if (d[1] === "-name" \|\| (!d[1] && /^none\b/.test(v))) return true;
	62	if (d[1] === "-duration" \|\| (!d[1] && v)) return longest(v) <= 100;
	63	}
	64	return false;
	65	}
	66
	67	export function motionFindings(css: string): MotionFinding[] {
	68	const all = rules(css);
	69	const calm = all.filter((r) => r.mode === "reduce");
	70	const out: MotionFinding[] = [];
	71	for (const r of all) {
	72	if (r.mode) continue;
	73	for (const property of ["animation", "transition"] as const) {
	74	let long = 0;
	75	for (const d of r.body.matchAll(new RegExp(`(?<![\\w-])${property}(-duration)?\\s:\\s([^;}]*)`, "g"))) {
	76	if (/^none\b/.test(d[2]!.trim())) continue;
	77	long = Math.max(long, longest(d[2]!));
	78	}
	79	if (long <= 100) continue;
	80	const answered = calm.some((c) => stops(c.body, property) && c.selector.split(",").some((s) => /(^\|\s)\*(::\w+)?$/.test(s.trim()) \|\| r.selector.split(",").some((own) => own.trim() === s.trim())));
	81	if (!answered) out.push({ selector: r.selector, property, ms: long });
	82	}
	83	}
	84	return out;
	85	}
		@@ -1188,6 +1188,7 @@ textarea.editor:focus-visible { outline: none; }
1188	1188	/* Reduced motion: the pulses hold still at a legible level, the scroll-tied
1189	1189	fade stays at its resting width, and these transitions land at once. */
1190	1190	@media (prefers-reduced-motion: reduce) {
	1191	, ::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
		junipercrew 1d ago outdated Add `animation-iteration-count: 1 !important` here. A .01ms infinite animation flickers rather than stopping.
1191	1192	.run-log [data-line="pulse"] i { animation: none; }
1192	1193	.run-log [data-line="pulse"] i { opacity: .6; }
1193	1194	.ex-dir > summary > .ico, .code-layout > #code-main[aria-busy="true"], .code-layout > [data-split]::after { transition: none; }
		@@ -0,0 +1,49 @@
	1	import { describe, expect, test } from "bun:test";
	2	import { mkdirSync, readFileSync, mkdtempSync, writeFileSync } from "node:fs";
	3	import { tmpdir } from "node:os";
	4	import { join } from "node:path";
	5	import { motionFindings, scanMotion } from "../scripts/design-lint.ts";
	6
	7	describe("design lint: motion needs a reduced-motion answer (#12418)", () => {
	8	test("a slow transition with no answer fails, naming the selector", () => {
	9	const f = motionFindings(`.card a { transition: color 150ms ease; }`);
	10	expect(f).toEqual([{ selector: ".card a", property: "transition", ms: 150 }]);
	11	});
	12	test("an animation in seconds fails too", () => {
	13	expect(motionFindings(`.dot { animation: pulse 2s infinite; } @keyframes pulse { 50% { opacity: .3; } }`).map((x) => x.selector)).toEqual([".dot"]);
	14	});
	15	test("a shared reduced-motion block passes", () => {
	16	const css = `.a { transition: opacity 200ms; } .b { animation: x 1s; }
	17	@media (prefers-reduced-motion: reduce) { , ::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }`;
	18	expect(motionFindings(css)).toEqual([]);
	19	});
	20	test("the same selector turned off passes; a different one does not", () => {
	21	const off = `.a { transition: opacity 200ms; } @media (prefers-reduced-motion: reduce) { .a { transition: none; } }`;
	22	expect(motionFindings(off)).toEqual([]);
	23	expect(motionFindings(off.replace("{ .a { transition: none", "{ .z { transition: none")).length).toBe(1);
	24	});
	25	test("a duration answer only for animations leaves a transition failing", () => {
	26	const css = `.a { transition: opacity 200ms; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms; } }`;
	27	expect(motionFindings(css).length).toBe(1);
	28	});
	29	test("100 ms or less, and motion only under no-preference, pass", () => {
	30	expect(motionFindings(`.a { transition: color 100ms; } .b { transition: none; }`)).toEqual([]);
	31	expect(motionFindings(`@media (prefers-reduced-motion: no-preference) { .a { animation: p 2s infinite; } @keyframes p { 50% { opacity: .3; } } }`)).toEqual([]);
	32	});
	33	test("a no-preference rule exempts itself but never answers for a reduce-less selector", () => {
	34	const css = `.a { transition: opacity 200ms; } @media (prefers-reduced-motion: no-preference) { .a { transition: none; } }`;
	35	expect(motionFindings(css).map((x) => x.selector)).toEqual([".a"]);
	36	});
	37	test("the sheets of a tree are scanned, naming the file", () => {
	38	const root = mkdtempSync(join(process.env.TMPDIR ?? tmpdir(), "motion-"));
	39	mkdirSync(join(root, "src/web"), { recursive: true });
	40	writeFileSync(join(root, "src/web/a.ts"), "export const css = /* css */ `.x { transition: color 150ms; }`;\n");
	41	writeFileSync(join(root, "src/web/b.ts"), "export const css = /* css */ `.y { transition: color 90ms; }`;\n");
	42	const out = scanMotion(root);
	43	expect(out.length).toBe(1);
	44	expect(out[0]).toContain("src/web/a.ts: .x");
	45	});
	46	test("the shared block holds infinite animations still", () => {
	47	expect(readFileSync("src/web/style/content.ts", "utf8")).toContain("animation-iteration-count: 1 !important");
	48	});
	49	});