milestone 23 s1: stylex build integration, tokens and shared styles

web/src/ui/styles.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import * as stylex from "@stylexjs/stylex";
+import { styles } from "./styles";
+
+/**
+ * The StyleX compile-time transform must run in the vitest pipeline, not just
+ * in `vite build`. `runtimeInjection` is off, so an untransformed
+ * `stylex.props` call yields no class name at all — this probe fails loudly if
+ * the plugin ever drops out of the test config (milestone 23, ruling 1).
+ */
+describe("the StyleX build integration", () => {
+	it("compiles stylex.props into a class name", () => {
+		render(
+			<button type="button" {...stylex.props(styles.button, styles.focusRing)}>
+				probe
+			</button>,
+		);
+		const probe = screen.getByRole("button", { name: "probe" });
+		expect(probe.className).not.toBe("");
+	});
+
+	it("keeps composed styles distinct from a single style", () => {
+		const one = stylex.props(styles.button).className;
+		const two = stylex.props(styles.button, styles.focusRing).className;
+		expect(one).toBeTruthy();
+		expect(two).not.toBe(one);
+	});
+});