@usefragments/core 1.6.0 → 1.7.0

package/src/rules/rules.test.ts

@@ -11,6 +11,7 @@ import {
   makeClassNameDynamicFact,
   makeStyleDeclarationFact,
   makeTokenDefinitionFact,
+  makeUsageChildContentFact,
   makeUsageComponentFact,
   makeUsageImportFact,
   makeUsageInlineStyleFact,
@@ -18,6 +19,7 @@ import {
   makeUsagePropResolvedFact,
   makeUsageTextChildFact,
   projectSupersededImportPathPreferences,
+  RULES,
   ruleA11yRequiredAccessibleName,
   ruleComponentsForbiddenPropValue,
   ruleComponentsPreferLibrary,
@@ -34,6 +36,7 @@ import {
   runRules,
 } from "../index.js";
 import type { CanonicalBridgeV1, Fact, FactId } from "../index.js";
+import { RULE_VERSION as A11Y_REQUIRED_ACCESSIBLE_NAME_VERSION } from "./a11y-required-accessible-name.js";
 
 type ButtonProps = {
   variant?: "primary" | "secondary" | "ghost" | "link";
@@ -138,6 +141,7 @@ interface ButtonUsageInput {
     value: string;
   }>;
   text?: string;
+  childContent?: "static-text" | "runtime" | "structural" | "empty";
 }
 
 function addButtonUsage(ix: FactIndex, input: ButtonUsageInput): { nodeId: FactId } {
@@ -176,6 +180,14 @@ function addButtonUsage(ix: FactIndex, input: ButtonUsageInput): { nodeId: FactI
   if (input.text !== undefined) {
     ix.add(makeUsageTextChildFact({ nodeId: node.id, text: input.text, index: 0 }));
   }
+  if (input.childContent !== undefined) {
+    ix.add(
+      makeUsageChildContentFact({
+        nodeId: node.id,
+        content: input.childContent,
+      })
+    );
+  }
   return { nodeId: node.id };
 }
 
@@ -1272,6 +1284,47 @@ describe("a11y/required-accessible-name", () => {
     }
   });
 
+  it("does not fire for conservatively classified runtime child content", () => {
+    const ix = emptyIndexWithGovernance();
+    addButtonUsage(ix, {
+      file: "apps/x.tsx",
+      nodePath: "0",
+      line: 1,
+      column: 0,
+      props: [{ prop: "children", resolution: "jsx" }],
+      childContent: "runtime",
+    });
+
+    expect(ruleA11yRequiredAccessibleName(ix)).toHaveLength(0);
+  });
+
+  it.each(["structural", "empty"] as const)("still fires for %s child content", (childContent) => {
+    const ix = emptyIndexWithGovernance();
+    addButtonUsage(ix, {
+      file: "apps/x.tsx",
+      nodePath: "0",
+      line: 1,
+      column: 0,
+      props: [{ prop: "children", resolution: "jsx" }],
+      childContent,
+    });
+
+    expect(ruleA11yRequiredAccessibleName(ix)).toHaveLength(1);
+  });
+
+  it("does not infer a name from the public children prop-resolution fact", () => {
+    const ix = emptyIndexWithGovernance();
+    addButtonUsage(ix, {
+      file: "apps/x.tsx",
+      nodePath: "0",
+      line: 1,
+      column: 0,
+      props: [{ prop: "children", resolution: "dynamic" }],
+    });
+
+    expect(ruleA11yRequiredAccessibleName(ix)).toHaveLength(1);
+  });
+
   it("fires for an empty Button with no name source", () => {
     const ix = emptyIndexWithGovernance();
     addButtonUsage(ix, {
@@ -1298,6 +1351,11 @@ describe("a11y/required-accessible-name", () => {
 
     expect(ruleA11yRequiredAccessibleName(ix)).toHaveLength(0);
   });
+
+  it("keeps the registry version in lockstep with the emitted finding version", () => {
+    const registered = RULES.find((rule) => rule.id === "a11y/required-accessible-name");
+    expect(registered?.version).toBe(A11Y_REQUIRED_ACCESSIBLE_NAME_VERSION);
+  });
 });
 
 // ---------------------------------------------------------------------------
@@ -3115,7 +3173,7 @@ describe("components/prefer-library", () => {
       expect(ruleComponentsPreferLibrary(ix)).toHaveLength(0);
     });
 
-    it("flags raw <button> → Button without advertising it as deterministic when Button is not imported", () => {
+    it("keeps raw <button> → Button advisory without treating the directory as import-ready", () => {
       const ix = new FactIndex();
       ix.addMany(
         compileGlobalGovernanceFacts({
@@ -3151,14 +3209,12 @@ describe("components/prefer-library", () => {
           rawValue: "button",
           suggestedComponent: "Button",
           suggestedImportSourceKind: "directory",
+          canonicalDirectory: "src/fragments/ui/components",
+          importReady: false,
+          advisory: true,
         },
       });
-      expect(findings[0].fix).toMatchObject({
-        kind: "replaceComponent",
-        from: "button",
-        to: "Button",
-        deterministic: false,
-      });
+      expect(findings[0].fix).toBeUndefined();
     });
 
     it("flags a raw element by canonical vocab id when display name diverges (Modal → Dialog)", () => {

package/src/rules/tiers.ts

@@ -51,6 +51,7 @@ export const RULE_TIER: Readonly<Record<string, RuleTier>> = {
   "tokens/require-dual-fallback": "hygiene",
   "theme/no-theme-coupled-literal": "hygiene",
   "a11y/required-accessible-name": "hygiene",
+  "a11y/standard": "hygiene",
   // Composition constraints are authored contracts, but not part of the
   // two-choice headline contract; they self-activate when patterns are declared
   // (the compiler injects their configs), so off-by-default here is harmless.

package/src/tokens/design-token-parser.test.ts

@@ -175,4 +175,135 @@ describe("parseDesignTokenContent — CSS terminator robustness (#34/#35)", () =
     expect(res.tokens.find((token) => token.name === "--sp-1")?.category).toBe("spacing");
     expect(res.tokens.find((token) => token.name === "--fui-sp-2")?.category).toBe("spacing");
   });
+
+  it("preserves the same custom property across configured theme selectors", () => {
+    const content = [
+      ":root { --surface: #ffffff; --text: #111111; }",
+      '[data-theme="dark"] { --surface: #111111; --text: var(--surface); }',
+      ".high-contrast { --surface: #000000; }",
+    ].join("\n");
+    const res = parseDesignTokenContent(content, {
+      filePath: "tokens.css",
+      themeSelectors: {
+        ":root": "default",
+        '[data-theme="dark"]': "dark",
+        ".high-contrast": "high-contrast",
+      },
+    });
+
+    expect(
+      res.tokens
+        .filter((token) => token.name === "--surface")
+        .map((token) => [token.theme, token.resolvedValue, token.selector])
+    ).toEqual([
+      ["default", "#ffffff", ":root"],
+      ["dark", "#111111", '[data-theme="dark"]'],
+      ["high-contrast", "#000000", ".high-contrast"],
+    ]);
+    expect(
+      res.tokens.find((token) => token.name === "--text" && token.theme === "dark")?.resolvedValue
+    ).toBe("#111111");
+  });
+
+  it("preserves selector-specific values in compact single-line theme CSS", () => {
+    const content =
+      ':root{--surface:#ffffff;--text:#111111}[data-theme="dark"]{--surface:#111111;--text:var(--surface)}.high-contrast{--surface:#000000}';
+    const res = parseDesignTokenContent(content, {
+      filePath: "tokens.min.css",
+      themeSelectors: {
+        ":root": "default",
+        '[data-theme="dark"]': "dark",
+        ".high-contrast": "high-contrast",
+      },
+    });
+
+    expect(
+      res.tokens
+        .filter((token) => token.name === "--surface")
+        .map((token) => [token.theme, token.resolvedValue, token.selector])
+    ).toEqual([
+      ["default", "#ffffff", ":root"],
+      ["dark", "#111111", '[data-theme="dark"]'],
+      ["high-contrast", "#000000", ".high-contrast"],
+    ]);
+    expect(
+      res.tokens.find((token) => token.name === "--text" && token.theme === "dark")?.resolvedValue
+    ).toBe("#111111");
+  });
+
+  it("uses the nearest selector through compact at-rules and ignores structural text in comments", () => {
+    const content =
+      ':root{/* fake } [data-theme="dark"] { */--surface:#fff}@media(prefers-color-scheme:dark){[data-theme="dark"]{--surface:#111}}';
+    const res = parseDesignTokenContent(content, {
+      filePath: "tokens.min.css",
+      themeSelectors: {
+        ":root": "default",
+        '[data-theme="dark"]': "dark",
+      },
+    });
+
+    expect(
+      res.tokens
+        .filter((token) => token.name === "--surface")
+        .map((token) => [token.theme, token.resolvedValue, token.selector])
+    ).toEqual([
+      ["default", "#fff", ":root"],
+      ["dark", "#111", '[data-theme="dark"]'],
+    ]);
+  });
+
+  it("ignores declaration-shaped text in comments and strings while preserving quoted delimiters", () => {
+    const content =
+      ':root{/* --comment-token:red; } */--label:"literal; {  value }";--image:url("data:image/svg+xml;utf8,<svg>{}</svg>");--raw-image:url(data:image/svg+xml;utf8,<svg>{}</svg>);--real:#fff;content:"--string-token:blue;"}';
+    const res = parseDesignTokenContent(content, { filePath: "tokens.min.css" });
+
+    expect(res.tokens.map((token) => [token.name, token.rawValue])).toEqual([
+      ["--label", '"literal; {  value }"'],
+      ["--image", 'url("data:image/svg+xml;utf8,<svg>{}</svg>")'],
+      ["--raw-image", "url(data:image/svg+xml;utf8,<svg>{}</svg>)"],
+      ["--real", "#fff"],
+    ]);
+  });
+
+  it("keeps the nearest theme selector through multiple nested compact at-rules", () => {
+    const content =
+      '@layer theme{@supports(--feature-probe:#fff){:root{--surface:#fff}@media(prefers-color-scheme:dark){[data-theme="dark"]{--surface:#111;--text:var(--surface)}}}}';
+    const res = parseDesignTokenContent(content, {
+      filePath: "tokens.min.css",
+      themeSelectors: {
+        ":root": "default",
+        '[data-theme="dark"]': "dark",
+      },
+    });
+
+    expect(
+      res.tokens.map((token) => [token.name, token.theme, token.selector, token.resolvedValue])
+    ).toEqual([
+      ["--surface", "default", ":root", "#fff"],
+      ["--surface", "dark", '[data-theme="dark"]', "#111"],
+      ["--text", "dark", '[data-theme="dark"]', "#111"],
+    ]);
+  });
+
+  it("handles thousands of compact declarations without losing selector context", () => {
+    const declarationCount = 4_000;
+    const declarations = Array.from(
+      { length: declarationCount },
+      (_, index) => `--token-${index}:${index}px`
+    ).join(";");
+    const res = parseDesignTokenContent(
+      `@layer theme{@media(min-width:0){[data-theme="dense"]{${declarations}}}}`,
+      {
+        filePath: "tokens.min.css",
+        themeSelectors: { '[data-theme="dense"]': "dense" },
+      }
+    );
+
+    expect(res.tokens).toHaveLength(declarationCount);
+    expect(res.tokens.at(-1)).toMatchObject({
+      name: `--token-${declarationCount - 1}`,
+      theme: "dense",
+      selector: '[data-theme="dense"]',
+    });
+  });
 });