GeezerVison

Name

Last commit message

Last commit date

.github

api-extractor.base.json

Warning

This is the next branch, tracking the upcoming release. For the latest stable code, switch to the latest branch.

Overview

CSS power. Inline style simplicity.

Respond to user interaction, layout context, and inherited state. All CSS-driven. All without leaving the style prop. By exploiting the hidden programmability of CSS Variables, CSS Hooks delivers flexible component-owned styling without runtime style injection or build steps.

Feature highlights

User interaction

<button
  style={mergeStyles(
    {
      background: "#004982",
      color: "#eeeff0",
    },
    on("&:hover", {
      background: "#1b659c",
    }),
    on("&:active", {
      background: "#9f3131",
    }),
  )}
>
  Save changes
</button>

Layout context

<span
  style={mergeStyles(
    { display: "none" },
    on("@container (width >= 50px)", {
      display: "revert-layer",
    }),
    on("@container (width >= 100px)", {
      display: "none",
    }),
  )}
>
  sm
</span>
<span
  style={mergeStyles(
    { display: "none" },
    on("@container (width >= 100px)", {
      display: "revert-layer",
    }),
  )}
>
  lg
</span>

Inherited state

<div style={mergeStyles({ padding: 24 }, on("&:hover", enable("%active")))}>
  Hover parent
  <span
    style={mergeStyles(
      { color: "gray" },
      on("%active", {
        color: "purple",
      }),
    )}
  >
    Child responds
  </span>
</div>