Framework Integration

Facet's style compiler is framework-agnostic. It scans source text for utility classes and static fx({ ... }) calls, then emits static CSS. Framework adapters are only for the headless primitive cores.

Scanned authoring in JSX-like files

The source includes a React-ish example. The scanner extracts both className utilities and fx({ ... }) calls from the text.

// A React-ish source file. Facet's scanner extracts BOTH className utilities and fx({...})
// calls straight from this text -- no module import, no framework runtime. Proves the
// "scan any source" build claim.
export function Card() {
  const cardStyle = fx({ bg: "surface", fg: "ink", radius: "panel", p: "inset.lg" });
  return (
    <article className={cardStyle}>
      <h2 className="fg-ink">Scanned straight from source</h2>
      <button className="bg-action fg-on-action radius-control px-inset-md py-inset-sm hover:bg-action-hover focus-visible:ring">
        Action
      </button>
      <span style={fx({ fg: "accent", p: "inset.sm" })}>accent</span>
    </article>
  );
}

The source notes that scanner coverage currently includes class, className, and fx({}). Full JSX, Vue, and Svelte attribute coverage with a proper parser is called out as production work.

Vite integration

The guide documents a zero-config Vite plugin:

// vite.config.js
import facet from "facet/vite";
export default { plugins: [facet({ resolver: "tokens/app.resolver.json" })] };

Then import the virtual stylesheet from the app entry:

import "virtual:facet.css";

The plugin serves the token layer plus scanned atomic utilities as one stylesheet, and hot-reloads when token, resolver, or scanned source files change.

Primitive adapters

Headless primitives share framework-agnostic behavior cores. Adapters expose each core in a framework idiom and subscribe to the core's state.

React:

import { useTabs } from "facet/adapters/react";
const tabs = useTabs({ ids: ["a", "b", "c"] });

Vue:

import { useTabs } from "facet/adapters/vue";
const tabs = useTabs({ ids: ["a", "b", "c"] });

Svelte:

import { createTabsStore } from "facet/adapters/svelte";
const tabs = createTabsStore({ ids: ["a", "b", "c"] });

Web Components and vanilla DOM:

import "facet/adapters/web-component";

<facet-tabs></facet-tabs>

The source also mentions primitives.mountTabs(rootEl) for vanilla DOM.

Adapter status

The source docs describe adapters for React, Vue, Svelte, and Web Components, but Facet remains pre-release. Treat adapter APIs as integration targets from the reference implementation, not stable package contracts.