CSS Hooks

[CSS Hooks @CSSHooks]

Love this. Preact v11 also features a simplified inline style implementation - part of the reason for the compatibility break. Works great with CSS Hooks v4-next. Congrats to the Preact team on the upcoming v11!

[jovi 🐨 @JoviDeC]

Preact 11 has been long in the making and I'm really proud of what came out the other end.

It has quite some history as we first started working on a backing-node (fiber-like) structure for Preact but reversed.

[CSS Hooks @CSSHooks]

So many CSS gaps have been closed. Still waiting for &:hover + @\media in the style prop. Until then...CSS Hooks.

[Ajay Yadav @ATechAjay]

R.I.P. CSS-in-JS.
R.I.P. 400 lines of media queries.
R.I.P. to useState just to track a hover.

The browser now does it all natively.

7 modern CSS features that deleted my old code 👇

[CSS Hooks @CSSHooks]

Wait…no @\stylexjs/babel-plugin?

That's right. You can see the whole styling system right there in App.tsx. No extra build step needed.

[Nick Saunders @agilecoder]

@\starting-style is a game-changer indeed. I recently added support to CSS Hooks, so you can use it without even leaving the style prop!

[CSS Hooks @CSSHooks]

https://t.co/KfDYqs80j5

[CSS Hooks @CSSHooks]

We believe styling should be expressive, colocated, and predictable.

Today, we take that mission a step further with a new look designed to be as modern as the code CSS Hooks enables you to write.

Experience the evolution in the first reply. 👇

[JLarky @JLarky]

@sebastienlorber Inline styles are the best option for most of your apps

[Nick Saunders @agilecoder]

First @CSSHooks debunked some deeply-held assumptions about the functional limitations of inline styles. And now @danimal_channel challenges the widespread FUD around inline style performance. Maybe it’s time to re-evaluate your styling framework and consider a simpler approach!

[Daniel Nagy @danielnagydotme]

Switching to Inline Styles Could Save You 15% or More on Page Speed https://t.co/belVnubVWw

[CSS Hooks @CSSHooks]

What inline styles can do in 2024

[Nick Saunders @agilecoder]

Material Design-inspired text field

👉 No state
👉 No side effects
👉 Full style encapsulation
👉 2 reusable hooks (188 bytes of CSS)

https://t.co/h1wN5wizSq

[CSS Hooks @CSSHooks]

You either die writing CSS or you live long enough to see yourself writing inline styles. — @danimal_channel

[CSS Hooks @CSSHooks]

When everything else has bugs, you accept the performance hit (assuming it even matters).

[Ryan Florence @ryanflorence]

@agilecoder @thdxr Because everything else has bugs and the performance hit is rarely observed (I’ve never seen it matter and I flush sync with state at the root all the time)

[CSS Hooks @CSSHooks]

CSS Hooks v2 in a nutshell

[Tailwind CSS @tailwindcss]

@gregwilker How do you change an element's background color on hover with inline styles?

[CSS Hooks @CSSHooks]

P. S. Not a fan of the new API? You can still upgrade with a little help from https://t.co/nBLzixL1oX.

[CSS Hooks @CSSHooks]

v2 has landed with a more composable model for hooks, adding flexibility and promoting reuse. With locally-defined combinational logic, you can invert a hook or combine it with other hooks using and/or operators. Check out the details on the new website! https://t.co/d2TsQV1LlJ

[CSS Hooks @CSSHooks]

As of today's v1.8 release, CSS Hooks supports @supports!

[CSS Hooks @CSSHooks]

v1.7 is out!

The `css` function now accepts a variable number of style object arguments, merging them in a more predictable manner than spreading.

Enabling the new `sort` option ensures that the last declaration in input order always has the highest priority. Default in v2?

[CSS Hooks @CSSHooks]

Are you a @QwikDev in need of a simple styling solution? We've got you covered with our latest framework integration. Visit our website to get started...quick. 🙃

https://t.co/d2TsQV1LlJ

[CSS Hooks @CSSHooks]

@b_e_n_t_e_n_ Great question! `recommended` is a shortcut for an opinionated set of hooks, but the existing API remains unchanged.

That means you can still configure hooks directly, e.g.

const [hooks, css] = createHooks({
md: "@media (600px <= width < 1000px)"
});

[CSS Hooks @CSSHooks]

We recently published v1.4 featuring a new "recommended" hooks API that offers a convenient way to configure pseudo-class and media query hooks - with more options to come! All hooks are now opt-in, further reducing the size of your style sheet. Ours went from ~3.5kB to ~0.6kB!

[CSS Hooks @CSSHooks]

We'd like to extend a special thanks to @markdalgleish for the general design of this API!

[CSS Hooks @CSSHooks]

This comes with one caveat, which is that you'll need to upgrade to TypeScript v5.3 to use the new `recommended` function. If you can't upgrade yet, don't worry: The existing `createHooks` API remains unaffected.