@agilecoder

Creator of @CSSHooks - UI/UX and FP focus

 Phoenix, AZ
github.com/nsaunders
Joined June 2010
  • Tweets1.4K
  • Following434
  • Followers549
106Media
What if StyleX used inline styles? I ported StyleX's own site from StyleX to inline styles and benchmarked both. The result? The inline style version was just as fast (or faster) on every PageSpeed metric I checked. I'm not arguing inline styles are faster. Just that performance isn’t the major concern many people claim it is. 🧵
11
7
5
116
24,822
Experimenting with flags in CSS Hooks. Flags determine this Panel's background, while cycle() rotates them at each nesting level. Purely CSS-driven. No React Context or props. How would you build this Panel in your styling framework of choice?
1
1
2
217
Flags will ship in CSS Hooks v4. For now: npm install @css-hooks/react@next Run it: stackblitz.com/fork/github/n… Source: github.com/nsaunders/demos/t…

Nsaunders - Demos - StackBlitz

Run Demos Css Hooks Cycle Flags created by Nsaunders on StackBlitz

stackblitz.com
72
Experimenting with CSS Hooks flags inside Remix 3's css() mixin. Here, the root follows prefers-color-scheme, and each nested boundary inverts the theme. This is entirely CSS-driven. Curious what this pattern would look like using Remix 3 primitives alone...
1
5
528
next.css-hooks.com/docs/conf…

CSS Hooks

next.css-hooks.com
1
68
I've been working on a Flags API for CSS Hooks v4. Think React Context, but entirely CSS-driven. No need to re-render just because the user selected dark mode.
1
1
175
My use case is automatic theme inversion. No theme prop. No React Context. What's yours?
1
55
With @\scope support in CSS Hooks, you can switch to dark mode in a nested element and then back to light mode again without using React Context. Available in v4 (`next` tag)
137
Stuck on this. It's just an <a>. The button trait safely adds styling and a11y, configured with namespaced props. What's the next trait - longPress?
1
1
1
222
The space toggle is so good. Love at first sight back in 2023. Its superpower is unlocking :hover, @\media, and selectors in the style prop.
StyleX@stylexjsSep 11
We have a new RFC for bringing custom enums to StyleX. It’s syntax sugar around CSS variable toggles aka space hack to let you define a variable somewhere and then use that as a condition within CSS values. Our API works with enums and stylex.match
3
736
A lot of emphasis lately on type-safe styling to guide agents. CSS Hooks v4, available under the `next` tag, adds a new guardrail: It now detects conflicting properties. If you try to mix `background` with `backgroundColor` between style objects, TypeScript catches it.
1
3
471
Everything is public and reproducible. Run PageSpeed Insights yourself, inspect both deployments, and inspect the source. If there's a performance dimension I missed that materially changes the conclusion, I'd genuinely like to test it.
2
1
1,398
And if this surprises you, bookmark it. I want people to actually inspect the two deployments.
11
Inline style migration Source: github.com/nsaunders/stylex/… Deployment: stylex-docs-mqrcm7sgh-nsaund…
1
1
1,277
If performance isn't the dealbreaker, then the interesting question becomes DX. That's why I built @CSSHooks: Keep styles in the `style` prop, while adding the pseudo-classes, selectors, and responsive queries that native inline styles are missing.
2
9
1,252
Load more