@css-hooks/core 1.8.2 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -37
- package/cjs/index.js +292 -257
- package/esm/index.js +291 -253
- package/package.json +17 -6
- package/types/index.d.ts +347 -65
package/README.md
CHANGED
|
@@ -15,55 +15,87 @@
|
|
|
15
15
|
|
|
16
16
|
## Overview
|
|
17
17
|
|
|
18
|
-
Hooks
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
Hooks add CSS features to native inline styles, enabling you to apply styles
|
|
19
|
+
conditionally based on pseudo-classes, custom selectors, media queries, and
|
|
20
|
+
more—all without leaving the `style` prop. By exploiting the hidden
|
|
21
|
+
programmability of CSS Variables, CSS Hooks delivers a flexible CSS-in-JS
|
|
22
|
+
experience without runtime style injection or build steps.
|
|
23
|
+
|
|
24
|
+
## Feature highlights
|
|
25
|
+
|
|
26
|
+
### Pseudo-classes
|
|
22
27
|
|
|
23
28
|
```jsx
|
|
24
|
-
<
|
|
25
|
-
href="https://css-hooks.com/"
|
|
29
|
+
<button
|
|
26
30
|
style={css({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
},
|
|
31
|
+
background: "#004982",
|
|
32
|
+
color: "#eeeff0",
|
|
33
|
+
on: $ => [
|
|
34
|
+
$("&:hover", {
|
|
35
|
+
background: "#1b659c",
|
|
36
|
+
}),
|
|
37
|
+
$("&:active", {
|
|
38
|
+
background: "#9f3131",
|
|
39
|
+
}),
|
|
40
|
+
],
|
|
38
41
|
})}
|
|
39
42
|
>
|
|
40
|
-
|
|
41
|
-
</
|
|
43
|
+
Save changes
|
|
44
|
+
</button>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Selectors
|
|
48
|
+
|
|
49
|
+
```jsx
|
|
50
|
+
<label>
|
|
51
|
+
<input type="checkbox" checked />
|
|
52
|
+
<span
|
|
53
|
+
style={css({
|
|
54
|
+
on: $ => [
|
|
55
|
+
$(":checked + &", {
|
|
56
|
+
textDecoration: "line-through",
|
|
57
|
+
}),
|
|
58
|
+
],
|
|
59
|
+
})}
|
|
60
|
+
>
|
|
61
|
+
Simplify CSS architecture
|
|
62
|
+
</span>
|
|
63
|
+
</label>
|
|
42
64
|
```
|
|
43
65
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
66
|
+
### Responsive design
|
|
67
|
+
|
|
68
|
+
```jsx
|
|
69
|
+
<>
|
|
70
|
+
<span
|
|
71
|
+
style={css({
|
|
72
|
+
on: ($, { not }) => [
|
|
73
|
+
$(not("@container sm"), {
|
|
74
|
+
display: "none",
|
|
75
|
+
}),
|
|
76
|
+
],
|
|
77
|
+
})}
|
|
78
|
+
>
|
|
79
|
+
sm
|
|
80
|
+
</span>
|
|
81
|
+
<span
|
|
82
|
+
style={css({
|
|
83
|
+
on: ($, { not }) => [
|
|
84
|
+
$(not("@container lg"), {
|
|
85
|
+
display: "none",
|
|
86
|
+
}),
|
|
87
|
+
],
|
|
88
|
+
})}
|
|
89
|
+
>
|
|
90
|
+
lg
|
|
91
|
+
</span>
|
|
92
|
+
</>
|
|
93
|
+
```
|
|
47
94
|
|
|
48
95
|
## Documentation
|
|
49
96
|
|
|
50
97
|
Please visit [css-hooks.com](https://css-hooks.com) to get started.
|
|
51
98
|
|
|
52
|
-
## Packages
|
|
53
|
-
|
|
54
|
-
- [@css-hooks/recommended](packages/recommended): Recommended hook configuration
|
|
55
|
-
with sensible defaults
|
|
56
|
-
- [@css-hooks/react](https://github.com/css-hooks/css-hooks/tree/master/packages/react):
|
|
57
|
-
React framework integration
|
|
58
|
-
- [@css-hooks/preact](https://github.com/css-hooks/css-hooks/tree/master/packages/preact):
|
|
59
|
-
Preact framework integration
|
|
60
|
-
- [@css-hooks/solid](https://github.com/css-hooks/css-hooks/tree/master/packages/solid):
|
|
61
|
-
Solid framework integration
|
|
62
|
-
- [@css-hooks/qwik](https://github.com/css-hooks/css-hooks/tree/master/packages/qwik):
|
|
63
|
-
Qwik framework integration
|
|
64
|
-
- [@css-hooks/core](https://github.com/css-hooks/css-hooks/tree/master/packages/core):
|
|
65
|
-
Core package (internal / advanced use cases)
|
|
66
|
-
|
|
67
99
|
## Contributing
|
|
68
100
|
|
|
69
101
|
Contributions are welcome. Please see the
|