Skip to content

Add useSx Fluent styling utilities and useStableCallback - #6

Merged
fabiofranzini merged 3 commits into
devfrom
apvee/fluent-style-utilities
Oct 7, 2026
Merged

fabiofranzini merged 3 commits into
devfrom
apvee/fluent-style-utilities

Conversation

@fabiofranzini

Copy link
Copy Markdown
Member

Adds useSx, a typed Fluent styling composer for inline className use, and useStableCallback, an alias of Fluent's useEventCallback. Consumers can compose direct descriptors such as sx(width.full, padding.medium, foreground.subtle, typography.body1) with existing Griffel classes.

Changes

  • Complete descriptive ESM utility catalog, theme-token color presets, 17 official typography selections, container queries with explicit viewport alternatives, and hover/active/focus-visible scopes.
  • Existing renderer/direction adapter, renderer-isolated caches, CSS-variable bindings and Griffel insertion/hash/merge. Native property bindings preserve ordering with foreign scoped Griffel classes and preserve base styles outside inactive scopes. No style attribute or new required provider.
  • One standard scrollbar.fluent recipe, with automatic system colors in forced-colors mode.
  • Source/emitted JSDoc, public references, lazy interactive Styles/React Hooks panels, recursive documentation/example checks, strict additive API approvals and isolated tarball consumer probes.
  • Static data-only PURE annotations; no global sideEffects:false or insertion annotations. Historical API fixtures and transitive lock entries remain unchanged. React 17, TypeScript 5.3.3 and SPFx 1.21.1 are preserved.
  • Updated repository guidance and the complete captured local verification evidence. The 803-file diff includes 677 evidence files; start review with the implementation, tests and measured results.

Validation

  • Fresh npm run verify: 587/587 tests; workspace typechecks/lint and example/runtime/docs/API gates pass.
  • Fresh npm run verify:package: all eight isolated consumer commands pass, including actual SPFx ship, strict root/deep compile probes and solution generation; shared Griffel paths/registry and 237 emitted JSDoc declarations verified.
  • Library/app builds and guarded npm run bundle:ship pass. The verification-only preload keeps the two exact locked browser-data age advisories visible on stdout; other warnings/errors/raw stderr and explicit failure markers remain fatal. Failed unprepared attempts are retained as evidence.
  • Local Chrome 155.0.8059.39: 793/793 core/catalog/composition checks and 473/473 actual-panel checks, with no console/page errors. Independent checkpoint and final reviews are closed with no open findings.
  • Source whitespace checks pass; the archived historical patch intentionally retains its original whitespace.

Measured impact and limits

Equivalent minimum UI versus direct Griffel: +16,705 gzip bytes via package-root imports, +2,153 via deep imports, and +925 in an app already using FluentProvider and the toolkit. The unchanged/no-useSx consumer still adds 4,486 gzip bytes; 436 upstream token references and 17 typography entries remain. The complete sample adds 31,785 gzip bytes across its reachable asset union; this includes the demo UI and is not the isolated hook cost.

Repeated values reuse classes. The width/body1 probe starts at 150 rules; 1,000 new widths add exactly 1,000 persistent rules/factories, and unmount does not remove them. No live-renderer memory/CSS bound is claimed.

The tested high-contrast inverted preset has 1:1 contrast and is restricted; disabled colors are disabled-only presentation. Browser/platform scrollbar appearance varies. Authenticated SharePoint validation is NOT EXECUTED; local fixtures and package generation do not establish tenant behavior or permissions.

@fabiofranzini
fabiofranzini merged commit 5398c04 into dev Oct 7, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant