3.0.1 • Published 8 months ago

@css-hooks/core v3.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

Overview

Hooks add CSS features to native inline styles, enabling you to apply styles conditionally based on pseudo-classes, custom selectors, media queries, and more—all without leaving the style prop. By exploiting the hidden programmability of CSS Variables, CSS Hooks delivers a flexible CSS-in-JS experience without runtime style injection or build steps.

Feature highlights

Pseudo-classes

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

Selectors

<label>
  <input type="checkbox" checked />
  <span
    style={pipe(
      {},
      on(":checked + &", {
        textDecoration: "line-through",
      }),
    )}
  >
    Simplify CSS architecture
  </span>
</label>

Responsive design

<>
  <span
    style={pipe(
      {},
      on(not("@container (width < 400px)"), {
        display: "none",
      }),
    )}
  >
    sm
  </span>
  <span
    style={pipe(
      {},
      on("@container (width < 400px)", {
        display: "none",
      }),
    )}
  >
    lg
  </span>
</>

Compatibility

Framework integrations

ReactPreactSolidQwik

Browser support

ChromeEdgeSafariFirefoxOpera
49+16+10+31+36+

Documentation

Please visit css-hooks.com to get started.

Contributing

Contributions are welcome. Please see the contributing guidelines for more information.

License

CSS Hooks is offered under the MIT license.

3.0.1

8 months ago

3.0.0

9 months ago

2.0.4

1 year ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

1.8.2

1 year ago

1.8.1

1 year ago

1.8.0

1 year ago

1.7.0

1 year ago

1.5.4

2 years ago

1.5.3

2 years ago

1.6.0

2 years ago

1.5.2

2 years ago

1.5.1

2 years ago

1.5.0

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.0

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.8.0

2 years ago

0.7.0

2 years ago

0.6.0

2 years ago

0.3.1

2 years ago

0.3.0

2 years ago

0.2.0

2 years ago

0.1.0

2 years ago