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
65 posts
- 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!
- 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. 🙃 css-hooks.com
- 1/6 In response to community feedback, we'll soon be making some small changes in our recommended format for defining hooks. Don't worry: We aren't breaking compatibility in any way!
- This is now possible as of v1.3.0. All you need to do is name the hook accordingly.
- 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?
- Replying to @CSSHooks
- Did you know that the #HTML `style` attribute was supposed to permit #CSS rulesets (think `:hover`, `:focus`, and so on), but the #web browser vendors were unable to support this? CSS Hooks helps you recover this extremely useful feature. Get started at css-hooks.com.
- As of v1.2.0, it's now possible to create hooks with complex "and/or" logic. One interesting use case is creating an advanced dark mode that respects both application- and browser-level preferences.
- Replying to @CSSHooks2/6 First, we'll now suggest that you name the function `css` instead of `hooks`. That means you can simply use the `hooks` variable for your style sheet instead.Replying to @agilecoder and @peduarteI like “css” too. Maybe the variables that you destructure from “createHooks” should just be flipped? It makes sense to me that “hooks” is the string for setting up the hooks in a style tag, and “css” is how you define your styles. To me the “css” function *uses* the hooks.
- Replying to @CSSHooks6/6 Thanks Pedro, Mark, Sam, and everyone else for your input!Replying to @markdalgleish and @agilecoderTrue, easy rename. Typing `css` will prob be much easier, specially when doing it multiple times over and over. But also I'm super used to using Stitches' `css`
- Replying to @CSSHooks3/6 Next, we'll just skip the default export. Aside from requiring a little more code, it's simply not to everyone's taste.Replying to @agilecoder @markdalgleish and @peduarteI’m a fan of named only for sure. But I wouldn’t hold it against anyone that disagrees
- Oof, just noticed an outdated section of the API docs. If you were wondering whether you can use "and" hooks, or nest hook specs to implement complex boolean logic, the answer is YES. Will get the doc update pushed out soon.
- Seems like a useful hook...CSS :intent please. Tired of `&:hover, &:focus`













