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. ๐
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!
Material Design-inspired text field
๐ No state
๐ No side effects
๐ Full style encapsulation
๐ 2 reusable hooks (188 bytes of CSS)
https://t.co/h1wN5wizSq
@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)
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
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?
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
@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)"
});
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!
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.
@_poteboy_@sebastienlorber@agilecoder@Poteboy Hi @_poteboy_, we've removed this phrase from the homepage and updated our "predictable performance" highlight to explain that hooks don't use style injection. Thanks again for your feedback and please keep it coming!