Best of JS • CSS Hooks

GitHub

574

css-hooks/css-hooks

Created a year ago, last commit a day ago

6 contributors

690 commits

Stars added on GitHub, month by month

Click on the bars to view the numbers

+78

+10

+13

+24

+10

+3

+1

0

+5

+3

+5

Jan

1

Feb

2

Mar

3

Apr

4

May

5

Jun

6

Jul

7

Aug

8

Sep

9

Oct

10

Nov

11

Dec

12

2024

Stars added on GitHub, per day, on average

Yesterday

+1

Last week

+0.1

/day

Last month

+0.2

/day

Last 12 months

+0.3

/day

Package on NPM

@css-hooks/core

3.0.4

Monthly downloads on NPM

Click on the bars to view the numbers

1.14k

1.2k

1.24k

1.23k

1k

1.93k

1.67k

1.64k

1.94k

2.7k

2.12k

3.07k

Jan

1

Feb

2

Mar

3

Apr

4

May

5

Jun

6

Jul

7

Aug

8

Sep

9

Oct

10

Nov

11

Dec

12

2024

No dependencies

README

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>
</>