Conditions

Conditions are the foundation of this package. They allow us to use pseudo classes and at-rules like media queries with plain inline styles.
It works by leveraging a CSS Variable Trick (new tab).

Nick, the creator of CSS Hooks (new tab), wrote a great article (new tab) where he explains the thought process behind creating css-hooks and how it works internally. Here's a quick summary of the gist:

* {
  --hover-off: initial;
  --hover-on: ;
}
:hover {
  --hover-off: ;
  --hover-on: initial;
}

<div style="color: var(--hover-on, red) var(--hover-off, blue)">Hover me</div>

All of today this package allows a wide range of CSS selectors, pseudo classes and at-rules like media queries.

One can add a & as a placeholder for the actual element. With that, we can even create parent selectors that aren't possible with pure CSS. For example: div > & would only resolve a style if the parent was a div.