@multiplatform.one/config 7.11.0 → 7.15.0

package/src/lint.spec.ts

@@ -2,7 +2,7 @@ import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { resolveRoots, runConventionChecks } from "../lint.mjs";
+import { findSizeRecipeEscapes, resolveRoots, runConventionChecks } from "../lint.mjs";
 
 const fixtures: string[] = [];
 
@@ -551,3 +551,495 @@ export type Where = PathLike;
     expect(run(root).code).toBe(0);
   });
 });
+
+describe("a scaffolded project, where apps/one is renamed and public/ is pruned (MPO-318)", () => {
+  function run(root: string) {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const log = vi.spyOn(console, "log").mockImplementation(() => {});
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const code = runConventionChecks({ roots: { root } });
+    const errors = error.mock.calls.map((c) => String(c[0])).join("\n");
+    const warnings = warn.mock.calls.map((c) => String(c[0])).join("\n");
+    error.mockRestore();
+    log.mockRestore();
+    warn.mockRestore();
+    return { code, errors, warnings };
+  }
+
+  function animationRegistry(root: string) {
+    mkdirSync(join(root, "public", "theme", "src", "theme", "animations"), { recursive: true });
+    writeFileSync(
+      join(root, "public", "theme", "src", "theme", "animations", "css.ts"),
+      'export const animationConfig = {\n  medium: "ease-in 300ms",\n} as const;\n',
+    );
+  }
+
+  it("passes the vscode webview fonts.css in a product app that is not called one", () => {
+    const root = makeTree();
+    mkdirSync(join(root, "apps", "demo", "vscode", "webview"), { recursive: true });
+    writeFileSync(join(root, "apps", "demo", "vscode", "webview", "fonts.css"), "@font-face {}\n");
+    expect(run(root).code).toBe(0);
+  });
+
+  it("still fails any other .css in that vscode webview", () => {
+    const root = makeTree();
+    mkdirSync(join(root, "apps", "demo", "vscode", "webview"), { recursive: true });
+    writeFileSync(join(root, "apps", "demo", "vscode", "webview", "app.css"), "body {}\n");
+    const { code, errors } = run(root);
+    expect(code).toBe(1);
+    expect(errors).toMatch(/apps\/demo\/vscode\/webview\/app\.css/);
+  });
+
+  it("skips the transition check, and says so, when the animation registry is not in the tree", () => {
+    const root = makeTree();
+    writeFileSync(
+      join(root, "apps", "demo", "App.tsx"),
+      'export const App = () => <View transition="medium" />;\n',
+    );
+    const { code, warnings } = run(root);
+    expect(code).toBe(0);
+    expect(warnings).toMatch(/skipped the animation token check/);
+  });
+
+  it("still fails an unregistered transition when the registry is readable", () => {
+    const root = makeTree();
+    animationRegistry(root);
+    writeFileSync(
+      join(root, "apps", "demo", "App.tsx"),
+      'export const App = () => <View transition="mediun" />;\n',
+    );
+    const { code, errors } = run(root);
+    expect(code).toBe(1);
+    expect(errors).toMatch(/apps\/demo\/App\.tsx:1 — transition="mediun"/);
+  });
+
+  it("passes a registered transition when the registry is readable", () => {
+    const root = makeTree();
+    animationRegistry(root);
+    writeFileSync(
+      join(root, "apps", "demo", "App.tsx"),
+      'export const App = () => <View transition="medium" />;\n',
+    );
+    const { code, warnings } = run(root);
+    expect(code).toBe(0);
+    expect(warnings).not.toMatch(/animation token/);
+  });
+});
+
+describe("size-recipe escape registry (MPO-23, 00 L8 E8)", () => {
+  function run(root: string) {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const log = vi.spyOn(console, "log").mockImplementation(() => {});
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const code = runConventionChecks({ roots: { root } });
+    const messages = error.mock.calls.map((call) => String(call[0])).join("\n");
+    error.mockRestore();
+    log.mockRestore();
+    warn.mockRestore();
+    return { code, messages };
+  }
+
+  function escapeTree(rows: [string, string][]) {
+    const root = makeTree();
+    mkdirSync(join(root, "docs"), { recursive: true });
+    writeFileSync(
+      join(root, "docs", "theme-propagation-spec.md"),
+      [
+        "# Theme",
+        "",
+        "## Size-recipe escapes",
+        "",
+        "| File | Reason |",
+        "| ---- | ------ |",
+        ...(rows.length ? rows : [["_(none)_", ""] as [string, string]]).map(
+          ([file, reason]) => `| \`${file}\` | \`${reason}\` |`,
+        ),
+        "",
+      ].join("\n"),
+    );
+    mkdirSync(join(root, "public", "forms", "src", "Toolbar"), { recursive: true });
+    return root;
+  }
+
+  const toolbar = "public/forms/src/Toolbar/index.tsx";
+
+  it("finds every escape form with its written reason, and ignores docs about the marker", () => {
+    const sites = findSizeRecipeEscapes(`/**
+ * Opt in with \`sizeRecipeEscape="reason"\` or \`// size-recipe-escape:\` above.
+ */
+export const a = <Button height={40} sizeRecipeEscape="toolbar chrome match" />;
+export const b = <Button height={40} sizeRecipeEscape={"toolbar chrome match"} />;
+export const c = { paddingHorizontal: 0, sizeRecipeEscape: "LC-81 edges" };
+export const d = sizeRecipeEscape(20, "hairline glyph");
+export const e = sizeRecipeEscape(20);
+export const f = <XStack
+  paddingHorizontal={0} // size-recipe-escape: square end-cap
+/>;
+`);
+    expect(sites.map(({ line, form, reason }) => [line, form, reason])).toEqual([
+      [4, "prop", "toolbar chrome match"],
+      [5, "prop", "toolbar chrome match"],
+      [6, "prop", "LC-81 edges"],
+      [7, "call", "hairline glyph"],
+      [8, "call", undefined],
+      [10, "comment", "square end-cap"],
+    ]);
+  });
+
+  it("reads a JSX block-comment reason without its closer, and cannot read a reason held in a variable", () => {
+    const sites = findSizeRecipeEscapes(`export const a = (
+  <XStack>
+    {/* size-recipe-escape: square end-cap */}
+    <Button height={40} sizeRecipeEscape={reason} />
+    <Button height={40} sizeRecipeEscape={\`chrome \${n}\`} />
+  </XStack>
+);
+`);
+    expect(sites.map(({ line, form, reason }) => [line, form, reason])).toEqual([
+      [3, "comment", "square end-cap"],
+      [4, "prop", undefined],
+      [5, "prop", undefined],
+    ]);
+  });
+
+  it("fails an escape prop whose reason is not a literal, even when the file has a row", () => {
+    const root = escapeTree([[toolbar, "toolbar chrome match"]]);
+    writeFileSync(
+      join(root, toolbar),
+      [
+        'const reason = "toolbar chrome match";',
+        "export const T = () => <Button height={40} sizeRecipeEscape={reason} />;",
+        'export const U = () => <Button height={40} sizeRecipeEscape="toolbar chrome match" />;',
+        "",
+      ].join("\n"),
+    );
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain(`${toolbar}:2 — sizeRecipeEscape with no written reason`);
+    expect(messages).not.toContain(`${toolbar}:3`);
+  });
+
+  it("fails an escape whose file and reason are not a row, naming the file, line and reason", () => {
+    const root = escapeTree([]);
+    writeFileSync(
+      join(root, toolbar),
+      'export const T = () => (\n  <Button height={40} sizeRecipeEscape="toolbar chrome match" />\n);\n',
+    );
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain("SIZE-RECIPE ESCAPE REGISTRY");
+    expect(messages).toContain(`${toolbar}:2 — undeclared escape "toolbar chrome match"`);
+  });
+
+  it("fails a comment escape the same way, and one with no reason at all", () => {
+    const root = escapeTree([]);
+    writeFileSync(
+      join(root, toolbar),
+      "// size-recipe-escape: square end-cap\nexport const pad = 0;\nexport const h = sizeRecipeEscape(20);\n",
+    );
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain(`${toolbar}:1 — undeclared escape "square end-cap"`);
+    expect(messages).toContain(`${toolbar}:3 — sizeRecipeEscape with no written reason`);
+  });
+
+  it("fails a declared row whose escape is gone, so the table cannot rot into a blanket pass", () => {
+    const root = escapeTree([[toolbar, "toolbar chrome match"]]);
+    writeFileSync(join(root, toolbar), "export const T = () => null;\n");
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain(`${toolbar} — declared escape "toolbar chrome match" has no site`);
+  });
+
+  it("does not let a row for one file license the same reason in another", () => {
+    const root = escapeTree([[toolbar, "toolbar chrome match"]]);
+    writeFileSync(
+      join(root, toolbar),
+      'export const T = () => <Button height={40} sizeRecipeEscape="toolbar chrome match" />;\n',
+    );
+    writeFileSync(
+      join(root, "features", "demo", "Bar.tsx"),
+      'export const B = () => <Button height={40} sizeRecipeEscape="toolbar chrome match" />;\n',
+    );
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain(
+      'features/demo/Bar.tsx:1 — undeclared escape "toolbar chrome match"',
+    );
+    expect(messages).not.toContain(`${toolbar}:1`);
+  });
+
+  it("passes every escape that is declared by file and exact reason, and ignores specs", () => {
+    const root = escapeTree([
+      [toolbar, "toolbar chrome match"],
+      [toolbar, "square end-cap"],
+    ]);
+    writeFileSync(
+      join(root, toolbar),
+      [
+        'export const T = () => <Button height={40} sizeRecipeEscape="toolbar chrome match" />;',
+        "export const U = () => (",
+        "  <XStack",
+        "    paddingHorizontal={0} // size-recipe-escape: square end-cap",
+        "  />",
+        ");",
+        "",
+      ].join("\n"),
+    );
+    writeFileSync(
+      join(root, "public", "forms", "src", "Toolbar", "index.spec.tsx"),
+      'export const S = <Button height={40} sizeRecipeEscape="only in a spec" />;\n',
+    );
+    expect(run(root).code).toBe(0);
+  });
+
+  it("skips the check when the tree has no escape table, the same as the drawing registry", () => {
+    const root = makeTree();
+    writeFileSync(
+      join(root, "features", "demo", "Bar.tsx"),
+      'export const B = () => <Button height={40} sizeRecipeEscape="anything" />;\n',
+    );
+    expect(run(root).code).toBe(0);
+  });
+});
+
+describe("colour-literal escape registry (MPO-326)", () => {
+  function run(root: string) {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const log = vi.spyOn(console, "log").mockImplementation(() => {});
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const code = runConventionChecks({ roots: { root } });
+    const messages = error.mock.calls.map((call) => String(call[0])).join("\n");
+    error.mockRestore();
+    log.mockRestore();
+    warn.mockRestore();
+    return { code, messages };
+  }
+
+  function escapeTree(rows: [string, string][]) {
+    const root = makeTree();
+    mkdirSync(join(root, "docs"), { recursive: true });
+    writeFileSync(
+      join(root, "docs", "theme-propagation-spec.md"),
+      [
+        "# Theme",
+        "",
+        "## Colour-literal escapes",
+        "",
+        "| File | Reason |",
+        "| ---- | ------ |",
+        ...(rows.length ? rows : [["_(none)_", ""] as [string, string]]).map(
+          ([file, reason]) => `| \`${file}\` | \`${reason}\` |`,
+        ),
+        "",
+      ].join("\n"),
+    );
+    mkdirSync(join(root, "apps", "demo", "gnome"), { recursive: true });
+    return root;
+  }
+
+  const paint = "apps/demo/gnome/gtk-paint.ts";
+  const reason = "GTK widget paint outside TamaguiProvider";
+
+  it("fails a hex-escape whose file and reason are not a row, naming the file, line and reason", () => {
+    const root = escapeTree([]);
+    writeFileSync(join(root, paint), `// hex-escape: ${reason}\nexport const bg = "#ffffff";\n`);
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain("COLOUR-LITERAL ESCAPE REGISTRY");
+    expect(messages).toContain(`${paint}:1 — undeclared escape "${reason}"`);
+  });
+
+  it("fails a hex-escape with no reason", () => {
+    const root = escapeTree([]);
+    writeFileSync(join(root, paint), '// hex-escape:\nexport const bg = "#ffffff";\n');
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain(`${paint}:1 — hex-escape with no written reason`);
+  });
+
+  it("fails a declared row whose comment is gone", () => {
+    const root = escapeTree([[paint, reason]]);
+    writeFileSync(join(root, paint), "export const bg = 1;\n");
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain(`${paint} — declared escape "${reason}" has no comment in the code`);
+  });
+
+  it("does not let a row for one file license the same reason in another", () => {
+    const root = escapeTree([[paint, reason]]);
+    writeFileSync(join(root, paint), `// hex-escape: ${reason}\n`);
+    writeFileSync(join(root, "apps", "demo", "Other.tsx"), `// hex-escape: ${reason}\n`);
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain(`apps/demo/Other.tsx:1 — undeclared escape "${reason}"`);
+    expect(messages).not.toContain(`${paint}:1`);
+  });
+
+  it("passes a declared escape, and skips the check when the tree has no escape table", () => {
+    const root = escapeTree([[paint, reason]]);
+    writeFileSync(join(root, paint), `// hex-escape: ${reason}\nexport const bg = "#ffffff";\n`);
+    expect(run(root).code).toBe(0);
+
+    const bare = makeTree();
+    writeFileSync(join(bare, "apps", "demo", "Any.tsx"), "// hex-escape: anything\n");
+    expect(run(bare).code).toBe(0);
+  });
+});
+
+describe("LC-24 enter/exit driver (MPO-327)", () => {
+  function run(root: string) {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const log = vi.spyOn(console, "log").mockImplementation(() => {});
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const code = runConventionChecks({ roots: { root } });
+    const errors = error.mock.calls.map((c) => String(c[0])).join("\n");
+    error.mockRestore();
+    log.mockRestore();
+    warn.mockRestore();
+    return { code, errors };
+  }
+
+  it("fails an enterStyle with no transition on the same element", () => {
+    const root = makeTree();
+    writeFileSync(
+      join(root, "apps", "demo", "App.tsx"),
+      "export const App = () => <View enterStyle={{ opacity: 0 }} />;\n",
+    );
+    const { code, errors } = run(root);
+    expect(code).toBe(1);
+    expect(errors).toMatch(/apps\/demo\/App\.tsx:1 — enter\/exitStyle with no `transition` driver/);
+  });
+
+  it("accepts the transitionProps spread as the driver", () => {
+    const root = makeTree();
+    writeFileSync(
+      join(root, "apps", "demo", "App.tsx"),
+      "export const App = () => <View enterStyle={{ opacity: 0 }} {...transitionProps(knobProps.transition)} />;\n",
+    );
+    const { code, errors } = run(root);
+    expect(errors).not.toMatch(/LC-24/);
+    expect(code).toBe(0);
+  });
+});
+
+describe("foreign control specimen in stories (LC-56 STORY-HONESTY / MPO-316)", () => {
+  function run(root: string) {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const log = vi.spyOn(console, "log").mockImplementation(() => {});
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const code = runConventionChecks({ roots: { root } });
+    const messages = error.mock.calls.map((call) => String(call[0])).join("\n");
+    error.mockRestore();
+    log.mockRestore();
+    warn.mockRestore();
+    return { code, messages };
+  }
+
+  function story(root: string, rel: string, body: string) {
+    const full = join(root, rel);
+    mkdirSync(join(full, ".."), { recursive: true });
+    writeFileSync(full, body);
+    return rel;
+  }
+
+  const csfTail = `
+const meta = { title: "Forms/Demo" };
+export default meta;
+export const Basic = { render: () => null };
+`;
+
+  it("fails a story mounting `Input as TamaguiInput` from tamagui, naming file and line", () => {
+    const root = makeTree();
+    const file = story(
+      root,
+      "public/forms/src/ErrorSummary.stories.tsx",
+      `import type { Meta } from "@storybook/react";
+import { Input as TamaguiInput, Paragraph, YStack } from "tamagui";
+${csfTail}`,
+    );
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain("STORY-HONESTY");
+    expect(messages).toContain(`${file}:2 — \`Input as TamaguiInput\` from "tamagui"`);
+  });
+
+  it("passes once the story carries parameters.foreignContrastSpecimen: true", () => {
+    const root = makeTree();
+    story(
+      root,
+      "public/forms/src/fields/Input/Input.stories.tsx",
+      `import { Input as TamaguiInput, XStack } from "tamagui";
+const meta = { title: "Forms/Input" };
+export default meta;
+export const Comparison = {
+  parameters: { foreignContrastSpecimen: true },
+  render: () => null,
+};
+`,
+    );
+    expect(run(root).code).toBe(0);
+  });
+
+  it("ignores layout and text primitives, type-only imports and default imports", () => {
+    const root = makeTree();
+    story(
+      root,
+      "public/forms/src/FormGrid.stories.tsx",
+      `import { Paragraph, XStack, YStack, Text, View, SizableText, Label } from "tamagui";
+import type { Input, Button } from "tamagui";
+import tamagui from "tamagui";
+import { Input } from "./fields/Input";
+${csfTail}`,
+    );
+    expect(run(root).code).toBe(0);
+  });
+
+  it("flags every control in a multi-line import, in any catalog package", () => {
+    const root = makeTree();
+    const forms = story(
+      root,
+      "public/forms/src/Demo.stories.tsx",
+      `import {
+  Button,
+  Checkbox as TamaguiCheckbox,
+  YStack,
+} from "tamagui";
+${csfTail}`,
+    );
+    const graph = story(
+      root,
+      "public/node-graph/src/nodes/Port.stories.tsx",
+      `import { Label, Switch, XStack } from "tamagui";
+${csfTail}`,
+    );
+    const { code, messages } = run(root);
+    expect(code).toBe(1);
+    expect(messages).toContain(`${forms}:1 — \`Button\` from "tamagui"`);
+    expect(messages).toContain(`${forms}:1 — \`Checkbox as TamaguiCheckbox\` from "tamagui"`);
+    expect(messages).toContain(`${graph}:1 — \`Switch\` from "tamagui"`);
+  });
+
+  it("leaves the frappe data client's hook demos alone, since it is not a catalog package", () => {
+    const root = makeTree();
+    story(
+      root,
+      "public/frappe/src/useFrappeCollection.stories.tsx",
+      `import { Button, Text, YStack } from "tamagui";
+${csfTail}`,
+    );
+    expect(run(root).code).toBe(0);
+  });
+
+  it("does not let an earlier import's names leak into the tamagui clause", () => {
+    const root = makeTree();
+    story(
+      root,
+      "public/forms/src/Leak.stories.tsx",
+      `import { Button } from "./Button";
+import { YStack } from "tamagui";
+${csfTail}`,
+    );
+    expect(run(root).code).toBe(0);
+  });
+});

package/src/oxlint.spec.ts

@@ -6,6 +6,8 @@ import {
   CHROME_PROPS,
   GEOMETRY_PROPS,
   LAYOUT_PROPS,
+  MARGIN_PROPS,
+  findHexEscapes,
   isPaletteModule,
   matchColorLiteral,
   plugin,
@@ -314,3 +316,173 @@ describe("no-hex-literals comments and palette (MPO-17 AC-4)", () => {
     expect(reports.map((r) => r.data?.value ?? r.messageId)).toEqual(["rgba(0,0,0,0.35)"]);
   });
 });
+
+describe("no-hex-literals hex-escape comment (MPO-326)", () => {
+  function reportsFor(filename: string, text: string) {
+    const reports: Report[] = [];
+    const rule = plugin.rules?.["no-hex-literals"] as {
+      create: (c: unknown) => { Literal?: (n: unknown) => void };
+    };
+    const visitors = rule.create({
+      filename,
+      sourceCode: { text },
+      report: (report: Report) => reports.push(report),
+    });
+    visitors.Literal?.({ type: "Literal", value: "#ffffff" });
+    return reports.map((r) => r.data?.value);
+  }
+
+  it("errors on a hex in apps/ when the file carries no hex-escape comment", () => {
+    expect(reportsFor("apps/one/gnome/main.tsx", 'export const bg = "#ffffff";\n')).toEqual([
+      "#ffffff",
+    ]);
+  });
+
+  it("skips the file whose line comment writes a reason", () => {
+    const text =
+      '// hex-escape: GTK widget paint outside TamaguiProvider\nexport const bg = "#ffffff";\n';
+    expect(reportsFor("apps/one/gnome/gtk-paint.ts", text)).toEqual([]);
+  });
+
+  it("does not take a comment with no reason, a JSDoc line or a backticked mention as the marker", () => {
+    for (const text of [
+      '// hex-escape:\nexport const bg = "#ffffff";\n',
+      '/**\n * hex-escape: in prose\n */\nexport const bg = "#ffffff";\n',
+      '// opt out with `// hex-escape: <reason>`\nexport const bg = "#ffffff";\n',
+    ]) {
+      expect(reportsFor("apps/one/spa/main.tsx", text)).toEqual(["#ffffff"]);
+    }
+  });
+
+  it("finds line and block comment markers with their reasons", () => {
+    expect(
+      findHexEscapes(
+        [
+          "// hex-escape: content script on third-party pages",
+          "const a = 1;",
+          "{/* hex-escape: Storybook manager panel */}",
+          " * hex-escape: JSDoc prose",
+          "// hex-escape:",
+        ].join("\n"),
+      ),
+    ).toEqual([
+      { line: 1, reason: "content script on third-party pages" },
+      { line: 3, reason: "Storybook manager panel" },
+      { line: 5, reason: "" },
+    ]);
+  });
+});
+
+/**
+ * `00` L9a behavioural teeth (MPO-23). The rule counts JSX depth on enter and
+ * exit, so the driver walks a small tree the way the linter does: enter a
+ * node, visit its children, then fire `<type>:exit`.
+ */
+describe("mpo-conventions/no-child-margin (00 L9a)", () => {
+  type Node = { type: string; [key: string]: unknown };
+  type Visitors = Record<string, ((node: Node) => void) | undefined>;
+
+  function element(name: string, attrs: { prop: string; value: unknown }[], children: Node[] = []) {
+    return {
+      type: "JSXElement",
+      openingElement: jsxOpen(name, attrs),
+      children,
+    };
+  }
+
+  function fragment(children: Node[]) {
+    return { type: "JSXFragment", children };
+  }
+
+  function walk(visitors: Visitors, node: Node) {
+    visitors[node.type]?.(node);
+    if (node.type === "JSXElement") {
+      walk(visitors, node.openingElement as Node);
+      for (const child of node.children as Node[]) walk(visitors, child);
+    }
+    if (node.type === "JSXFragment") {
+      for (const child of node.children as Node[]) walk(visitors, child);
+    }
+    visitors[`${node.type}:exit`]?.(node);
+  }
+
+  function lint(tree: Node, options?: { slotMargins?: string[] }) {
+    const reports: Report[] = [];
+    const rule = plugin.rules?.["no-child-margin"] as unknown as {
+      create: (context: unknown) => Visitors;
+    };
+    walk(
+      rule.create({
+        filename: "features/demo/screen.tsx",
+        options: [options ?? { slotMargins: [] }],
+        report: (report: Report) => reports.push(report),
+      }),
+      tree,
+    );
+    return reports.map((r) => `${r.data?.name}.${r.data?.prop}`);
+  }
+
+  it("covers every long margin prop and every Tamagui shorthand for one", () => {
+    expect(MARGIN_PROPS).toEqual(
+      expect.arrayContaining(["margin", "marginTop", "marginHorizontal", "m", "mt", "mx", "my"]),
+    );
+    expect(plugin.rules?.["no-child-margin"]).toBeDefined();
+  });
+
+  it("errors on a margin a child sets inside its parent, token or number, long or short", () => {
+    const tree = element(
+      "YStack",
+      [{ prop: "gap", value: token("$3") }],
+      [
+        element("Button", [{ prop: "marginTop", value: token("$2") }]),
+        element("Paragraph", [{ prop: "mb", value: numeric(8) }]),
+        element("Separator", [{ prop: "marginHorizontal", value: token("$-4") }]),
+        element("XStack", [{ prop: "marginLeft", value: token("auto") }]),
+      ],
+    );
+    expect(lint(tree)).toEqual([
+      "Button.marginTop",
+      "Paragraph.mb",
+      "Separator.marginHorizontal",
+      "XStack.marginLeft",
+    ]);
+  });
+
+  it("errors on a margin under a fragment too: a fragment's children are still siblings", () => {
+    const tree = fragment([element("Card", [{ prop: "margin", value: token("$4") }])]);
+    expect(lint(tree)).toEqual(["Card.margin"]);
+  });
+
+  it("leaves the outermost element alone and never flags a zero-reset (00 L8 E1)", () => {
+    const tree = element(
+      "Screen",
+      [{ prop: "marginTop", value: token("$4") }],
+      [
+        element("H2", [{ prop: "margin", value: numeric(0) }]),
+        element("Paragraph", [{ prop: "marginVertical", value: token("$0") }]),
+        element("Paragraph", [{ prop: "marginBottom", value: token("0") }]),
+        element("XStack", [
+          { prop: "gap", value: token("$2") },
+          { prop: "flex", value: numeric(1) },
+        ]),
+      ],
+    );
+    expect(lint(tree)).toEqual([]);
+  });
+
+  it("stays silent on an element the spec declares a slot, by full or bare name", () => {
+    const tree = element(
+      "Card",
+      [],
+      [
+        element("Card.Footer", [{ prop: "marginTop", value: token("auto") }]),
+        element("Header", [{ prop: "marginBottom", value: token("auto") }]),
+      ],
+    );
+    expect(lint(tree, { slotMargins: ["Card.Footer", "Header"] })).toEqual([]);
+    expect(lint(tree, { slotMargins: [] })).toEqual([
+      "Card.Footer.marginTop",
+      "Header.marginBottom",
+    ]);
+  });
+});