callstack

linaria

TypeScript2020–2023

callstack / linaria

linaria

Zero-runtime CSS in JS library

Explore on GitHub Read Hacker News discussions

5Distinct people

5Mentions

0Explicit recommenders

12.4KGitHub stars

REPOSITORY AT A GLANCE

What to know before exploring

What it is

Zero-runtime CSS in JS library

GitHub

Where it is used

No documented product use has been verified yet.

What people are saying

No recommendation phrase was found in the indexed comments.

No classified warning is attached to this page. Read the discussions before treating silence as approval.

Also in these discussions

No other repository is repeatedly linked in the same discussions.

This week on Hacker News

Nov 7–Nov 14 UTC · Direct repository links and separately labeled related project stories. Indexed through 11/14/2026, 12:54:37 PM UTC.

No direct repository links were found in the indexed HN discussions over the past seven days. Older discussions are available below.

Mentions over time

HN mentions by year5 dated mentions

Observed mentions: 2020-12-07 17:35:10 UTC to 2023-08-16 12:08:35 UTC.

Counts come from the repository’s dated source evidence. Index cutoff: 2026-11-02 08:16:59 UTC.

View mention counts and date ranges

UTC ranges include their start and exclude their end. Select a period to filter the source evidence.
Period	Start (UTC)	End (exclusive, UTC)	Mentions	Submissions	Comments
2020	2020-01-01 00:00:00 UTC	2021-01-01 00:00:00 UTC	1	0	1
2021	2021-01-01 00:00:00 UTC	2022-01-01 00:00:00 UTC	2	0	2
2022	2022-01-01 00:00:00 UTC	2023-01-01 00:00:00 UTC	1	1	0
2023	2023-01-01 00:00:00 UTC	2024-01-01 00:00:00 UTC	1	0	1

What Hacker News says

5 sources

welder·Aug 16, 2023

I like Linaria [0] because your IDE typechecks your styles and gives you autocomplete/intellisense when typing styles. With Tailwind you have to look everything up in docs because it's all strings, not importable constants. Leads to a lot of bugs from typos that aren't a thing with type checked styles. [0] https://github.com/callstack/linaria

In Why Tailwind CSS Won

etienne-martin·Jul 26, 2022Submission

Zero-runtime CSS in JavaScript library

2 points · Open discussion

eyelidlessness·Jan 15, 2021

None are ready for the public yet, but all in the hopper or under serious consideration: - Personal site/blog with a bunch of algorithmically generated art and other fun stuff, built on Node/Preact but progressively enhanced/almost completely JS-free at runtime. Motivation for the build approach is that I’m on the low/no client JS static site bandwagon but I quite like the DX of JSX components and CSS-in-JS. - I’m using a few excellent existing tools[1][2] for said site which unfortunately aren’t designed to work well together, so I have a variety of wrapper tooling that makes them live peacefully together. I’m also developing a bunch of other build-stage tools for my use cases. I plan to open source (or hopefully contribute back) all of that as soon as I’m satisfied with their quality. - A set libraries for building declarative, type saf

Read the rest

e, automatically validated/documented service API boundaries (HTTP/REST to start, but I also plan to support other transport protocols) — think io-ts[3] type interfaces but you get swagger docs for free in a transport-agnostic interface. I’ve built this kind of thing before, it was wildly successful in real world use, but it’s proprietary to a previous employer and I’m starting over with all the stuff I learned in hindsight. - A “nag me” app that’s basically “reading list” plus “reminders” with minimal config, eg “nag me soon” or “nag me after a while”. My personal use case is I frequently screenshot/text myself/etc stuff I want to look at later (usually on phone but need a computer to dive in), then it just goes down the memory hole. I’ve tried setting reminders but it’s often too much fuss, and I’m far too ADHD to use a passive list. - Exploring building yet another FE build tool/bundler that’s explicitly multi-stage/sequential with static input/output validation, per-step/time travel debugging. Motivation is that existing tools are just a big ball of config magic and totally inscrutable. I’d likely wrap existing build tools because their set of responsibilities isn’t my motivation and I don’t want to introduce that much more new API surface area to weary FE devs. [1]: https://github.com/natemoo-re/microsite [2]: https://github.com/callstack/linaria [3]: https://github.com/gcanti/io-ts

In Ask HN: What are you working on?

jitl·Jan 2, 2021

The differentiating feature of Atlassian’s @compiled package is not the “build time atomic css” - it’s that you can distribute components that use @compiled on NPM without requiring your consumer to futz with Webpack include paths for e.g. CSS files. Do I have that right? @madou is the extraction shipping yet? The docs have a few places that say “coming in 2021” - what’s the status? For those interested in build-time CSS in JS, also called Zero-runtime CSS in JS, you might also want to check out: - Linaria (https://github.com/callstack/linaria) I use on my personal site. I ran into trouble/bugs trying to integrate it with Notion’s build process; the Webpack/babel bits are very brittle. - Treat requires that you write the JS that computes your styles in esperare xxx.treat.js files which is annoying from my point of view - I want single fil

Read the rest

e components. (https://seek-oss.github.io/treat/) - No idea about this one, but it’s more recent. Has some other interesting things in the inspiration section of the README https://github.com/CraigCav/css-zero

In Show HN: Compiled, buildtime atomic CSS in JavaScript and all your favorite APIs

deepanchor·Dec 7, 2020

Tailwind is not for me, simply because I don't want to have to learn yet another DSL that may or may not be abandoned in the future. I understand this is a personal decision though, but I've been burned too many times by fads. My ideal CSS solution which doesn't seem to exist yet: - Be able to write plain old CSS in JS/TS directly within a React component's tags, with a JS object literal - Automatically generate atomic classes for each CSS rule (or block of rules) and have the system reuse those rules when the same styles are used elsewhere (no rule duplication means smaller bundle sizes for SSR, plus you get the semantic clarity of using plain CSS rules) - Compiled, with zero or near-zero runtime overhead and critical path extraction, all cacheable by the browser. I don't want a huge runtime just so that I can dynamically apply a backgro

Read the rest

und colour. The thing that comes closest to this is probably something like Linaria [1], but it relies on tagged template literals instead of object literals which means I can't use autocompletion. Their API for dynamic styling also relies on HTML data attributes, which is a little clunky. Stiches [2] is another interesting project, however adoption doesn't seem very high and it seems to create superfluous wrapper nodes which can cause performance degradation in large VDOM trees. There's also no mechanism to colocate styles within a component's tags. CSS Blocks [3] looks very promising also, but it doesn't allow co-location of styles with React components (you need to make a separate CSS file for each component). [1] https://github.com/callstack/linaria [2] https://github.com/modulz/stitches [3] https://github.com/linkedin/css-blocks

In Why I Love Tailwind