@css-hooks/preact 1.2.1 → 1.4.0
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 +9 -5
- package/cjs/index.js +1 -1
- package/esm/index.js +1 -1
- package/package.json +2 -2
- package/types/index.d.ts +8 -2
package/README.md
CHANGED
|
@@ -23,22 +23,26 @@ styles to a link:
|
|
|
23
23
|
```jsx
|
|
24
24
|
<a
|
|
25
25
|
href="https://css-hooks.com/"
|
|
26
|
-
style={
|
|
26
|
+
style={css({
|
|
27
27
|
color: "#03f",
|
|
28
|
-
|
|
28
|
+
fontSize: "1rem",
|
|
29
|
+
"&:hover": {
|
|
29
30
|
color: "#09f",
|
|
30
31
|
},
|
|
31
|
-
active: {
|
|
32
|
+
"&:active": {
|
|
32
33
|
color: "#e33",
|
|
33
34
|
},
|
|
35
|
+
"@media (1000px <= width)": {
|
|
36
|
+
fontSize: "1.25rem",
|
|
37
|
+
},
|
|
34
38
|
})}
|
|
35
39
|
>
|
|
36
40
|
Hooks
|
|
37
41
|
</a>
|
|
38
42
|
```
|
|
39
43
|
|
|
40
|
-
Notably, the `
|
|
41
|
-
|
|
44
|
+
Notably, the `css` function is pure. It simply returns a flat style object that
|
|
45
|
+
is compatible with the `style` prop, creating dynamic property values that
|
|
42
46
|
change under various conditions through CSS variables.
|
|
43
47
|
|
|
44
48
|
## Documentation
|
package/cjs/index.js
CHANGED
|
@@ -33,6 +33,6 @@ exports.stringifyValue = stringifyValue;
|
|
|
33
33
|
*
|
|
34
34
|
* @param config - The hooks to build
|
|
35
35
|
*
|
|
36
|
-
* @returns The CSS required to enable the configured hooks, along with the corresponding `
|
|
36
|
+
* @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
|
|
37
37
|
*/
|
|
38
38
|
exports.createHooks = (0, core_1.buildHooksSystem)(stringifyValue);
|
package/esm/index.js
CHANGED
|
@@ -28,7 +28,7 @@ export function stringifyValue(propertyName, value) {
|
|
|
28
28
|
*
|
|
29
29
|
* @param config - The hooks to build
|
|
30
30
|
*
|
|
31
|
-
* @returns The CSS required to enable the configured hooks, along with the corresponding `
|
|
31
|
+
* @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
|
|
32
32
|
*/
|
|
33
33
|
export const createHooks = buildHooksSystem(stringifyValue);
|
|
34
34
|
export { recommended };
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@css-hooks/preact",
|
|
3
3
|
"description": "CSS Hooks for Preact",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.4.0",
|
|
5
5
|
"author": "Nick Saunders",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@css-hooks/core": "^1.
|
|
7
|
+
"@css-hooks/core": "^1.4.0"
|
|
8
8
|
},
|
|
9
9
|
"devDependencies": {
|
|
10
10
|
"@tsconfig/strictest": "^2.0.1",
|
package/types/index.d.ts
CHANGED
|
@@ -23,7 +23,7 @@ export declare function stringifyValue(propertyName: string | number | symbol, v
|
|
|
23
23
|
*
|
|
24
24
|
* @param config - The hooks to build
|
|
25
25
|
*
|
|
26
|
-
* @returns The CSS required to enable the configured hooks, along with the corresponding `
|
|
26
|
+
* @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
|
|
27
27
|
*/
|
|
28
28
|
export declare const createHooks: <HookProperties extends string>(config: Record<HookProperties, `@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | {
|
|
29
29
|
or: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | any | {
|
|
@@ -33,5 +33,11 @@ export declare const createHooks: <HookProperties extends string>(config: Record
|
|
|
33
33
|
and: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | {
|
|
34
34
|
or: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
|
|
35
35
|
} | any)[];
|
|
36
|
-
}
|
|
36
|
+
}>, options?: {
|
|
37
|
+
debug?: boolean;
|
|
38
|
+
hookNameToId?: undefined;
|
|
39
|
+
} | {
|
|
40
|
+
debug?: undefined;
|
|
41
|
+
hookNameToId?: (hookName: string) => string;
|
|
42
|
+
} | undefined) => readonly [`*{${string}}undefined` | `*{${string}}${string}`, (properties: import("@css-hooks/core").WithHooks<HookProperties, CSSProperties>) => CSSProperties];
|
|
37
43
|
export { recommended };
|