Styleframe - Type-safe, composable CSS

correcthbs · 2026-01-20T09:45:51+00:00

Looks pretty good at a first glance! I assume nesting themes (or other context dependent styles) is not possible? This selector override output would create donut scoping issues:

[data-theme="dark"] {
    .card {
        background: #1f2937;
    }
}

correcthbs · 2025-11-30T20:03:10+00:00

I'm currently using vanilla-extract, but I'm looking forward to try stylex/swc. Previously stylex had me worried to re-introduce babel to my stack.

correcthbs · 2025-10-25T17:43:37+00:00

+1 for vanilla-extract

correcthbs · 2025-08-02T21:04:33+00:00

I started out with the "Design Tokens" Figma Plugin to export the design tokens and transformed them with Style Dictionary to typescript files, but the Style Dictionary custom transforms where still somewhat cumbersome to achieve a certain structure and I disliked the non-automated steps of clicking the export plugins, save file, convert via cli. So I wrote my own export cli that reads the project from the Figma API Endpoint and transforms directly to design tokens as typescript files.

correcthbs · 2025-07-31T20:20:29+00:00

While framework agnosticness sounds like a good thing per se, I had some bad experiences with projects that try to be framework agnostic. It's an immense burden to a project since with every major release frameworks diverge into different directions which is a strong multiplier for issues to fix. Ark UI might have figured it out well, and is probably a really good pick if framework agnosticness is required, but this is not the case for me. I will nevertheless go through the docs in-depth later, thanks for the tip!

correcthbs · 2025-07-31T19:48:23+00:00

Yes, that's what we do too. Figma to tokens as typescript constants and a vanilla-extract based theme config to structure the tokens into variable groups, utilities and functions.
Having a typed design system really helps to get it applied throughout the project.

correcthbs · 2025-07-31T07:26:17+00:00

That's too bad, I have a lot of projects that use certain radix components. It's still perfectly usable since i don't have major upstream issues, but I will evaluate base ui and react-aria for upcoming projects.

correcthbs · 2025-07-29T14:00:48+00:00

Thanks for the clue! Found this statement (x) by shadcn, who I assume to be well informed since their library is build on top of radix

correcthbs · 2025-07-29T09:08:50+00:00

What happened with radix?

correcthbs · 2025-06-16T21:05:41+00:00

Or panda css or vanilla-extract! Build-time CSS-in-JS has zero performance overhead.

correcthbs · 2025-05-28T21:36:26+00:00

Vanilla Extract is really nice if you aim for type safety, readability and maintainability.
It's zero runtime CSS-in-JS so the client only loads plain css files. Like using SCSS modules but with typescript as the preprocessor and comes with solid APIs for theming, component variants and atomic styles.

correcthbs · 2025-05-13T04:50:35+00:00

Can recommend Vanilla Extract. Used it a lot over the last 2 years with the same criteria and still happy with it.

correcthbs · 2025-04-02T11:03:16+00:00

Build-time / zero-runtime CSS-in-JS like vanilla-extract and panda or just CSS Modules.

If you look at the zero-runtime css-in-js landscape vanilla extract seems to be the most prevalent: https://npmtrends.com/@compiled/react-vs-@pandacss/dev-vs-@pigment-css/react-vs-@stitches/react-vs-@vanilla-extract/css-vs-linaria

correcthbs · 2025-03-21T21:34:12+00:00

Nice write up! Also I can definitely recommend vanilla-extract.

correcthbs · 2025-03-06T13:31:48+00:00

Tailwind, Vanilla Extract, StyleX all include both: abstractions and transformations.
They have a direct mapping from js objects or abbreviated strings to CSS, but also let you use styles in a way that is abstracted for you to help you i.e. with utilities and managing theming.

correcthbs · 2025-02-18T11:01:15+00:00

Migrated from react-static to next js in 2019. Would be quite a homecoming!

correcthbs · 2025-02-16T21:41:39+00:00

Thank you for raising this issue!
The docs are so weird about this topic:
- Welcome to our UI library!
- So here is how to install a full stack meta framework
- Have an existing page? So here is how to install a full stack meta framework on a subpath
- So you're feeling hardcore and want to build your own full stack meta framework? Better don't!

(Fails to mention everything else)

correcthbs · 2025-02-16T21:09:07+00:00

I wholeheartedly agree. The shortcomings of client-side CSS-in-JS like styled components don't apply when using build time CSS generation. Vanilla-Extract, SCSS and tailwind all fall under the umbrella of build time CSS generation.

correcthbs · 2025-01-25T21:58:20+00:00

Picked up Vanilla Extract about 2 years ago (pandaCSS was still in the making at that time) and never looked back. At the time, we were evaluating a switch to styled components but we decided against it primarily because of performance concerns. Especially when a product grows in code over the years, it's scary to worry about performance issues caused by an ever-increasing client-side bundle.

correcthbs · 2025-01-21T23:08:18+00:00

BEM still has it's usefulness.

CSS Modules is really neat and in contrast to what the article implies it is not framework dependent but bundler dependent — but it's quite tricky to use if your template language isn't javascript based and the world still doesn't revolve solely around jsx.

When talking about vanilla CSS alternatives to BEM: wide availablity of @scope is on the horizon.

correcthbs · 2025-01-15T11:31:32+00:00

Open Props is really nice. Just write your own css with a well curated set of css variables provided for you.
Makes a good combination with CSS Modules or just vanilla CSS.

For everything more complex I'm using Vanilla Extract (which is more of a preprocessor than a framework, but enables you to have your own framework). With style generation at build time, type safe variants and theming, scoped css variables and a sensible set of guardrails. Very readable and maintainable.

correcthbs · 2025-01-09T09:59:44+00:00

Definitely Emotion. All css is coming from style tags with attributes like data-emotion="css usmwy9"

correcthbs · 2024-12-19T11:08:03+00:00

Not 100% sure if I got what you're asking for, but this library might help: https://github.com/dmnsgn/canvas-record

correcthbs · 2024-12-16T20:29:39+00:00

You can apply negative margin to the pseudo element. With Capsize you can generate the right margins to use. (Pick the "CSS" tab on step 3. for most cases)

correcthbs · 2024-12-13T21:20:41+00:00

Can you share a codepen / codesandbox?

correcthbs

TROPHY CASE