@css-hooks/solid 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 +3 -1
- package/esm/index.js +3 -1
- package/package.json +2 -2
- package/types/index.d.ts +10 -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
|
@@ -9,7 +9,7 @@ exports.stringifyValue = core_1.genericStringify;
|
|
|
9
9
|
*
|
|
10
10
|
* @param config - The hooks to build
|
|
11
11
|
*
|
|
12
|
-
* @returns The CSS required to enable the configured hooks, along with the corresponding `
|
|
12
|
+
* @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
|
|
13
13
|
*/
|
|
14
14
|
exports.createHooks = (0, core_1.buildHooksSystem)(exports.stringifyValue);
|
|
15
15
|
function keybab(r) {
|
|
@@ -22,5 +22,7 @@ function keybab(r) {
|
|
|
22
22
|
}
|
|
23
23
|
/**
|
|
24
24
|
* A list of hooks offered as a "sensible default" to solve the most common use cases.
|
|
25
|
+
*
|
|
26
|
+
* @deprecated Use the `@css-hooks/recommended` package instead.
|
|
25
27
|
*/
|
|
26
28
|
exports.recommended = keybab(core_1.recommended);
|
package/esm/index.js
CHANGED
|
@@ -6,7 +6,7 @@ export const stringifyValue = genericStringify;
|
|
|
6
6
|
*
|
|
7
7
|
* @param config - The hooks to build
|
|
8
8
|
*
|
|
9
|
-
* @returns The CSS required to enable the configured hooks, along with the corresponding `
|
|
9
|
+
* @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
|
|
10
10
|
*/
|
|
11
11
|
export const createHooks = buildHooksSystem(stringifyValue);
|
|
12
12
|
function keybab(r) {
|
|
@@ -19,5 +19,7 @@ function keybab(r) {
|
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
21
|
* A list of hooks offered as a "sensible default" to solve the most common use cases.
|
|
22
|
+
*
|
|
23
|
+
* @deprecated Use the `@css-hooks/recommended` package instead.
|
|
22
24
|
*/
|
|
23
25
|
export const recommended = keybab(coreRecommended);
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@css-hooks/solid",
|
|
3
3
|
"description": "CSS Hooks for Solid",
|
|
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
|
"ts-toolbelt": "^9.6.0"
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
package/types/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export declare const stringifyValue: typeof genericStringify;
|
|
|
7
7
|
*
|
|
8
8
|
* @param config - The hooks to build
|
|
9
9
|
*
|
|
10
|
-
* @returns The CSS required to enable the configured hooks, along with the corresponding `
|
|
10
|
+
* @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
|
|
11
11
|
*/
|
|
12
12
|
export declare const createHooks: <HookProperties extends string>(config: Record<HookProperties, `@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | {
|
|
13
13
|
or: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | any | {
|
|
@@ -17,9 +17,17 @@ export declare const createHooks: <HookProperties extends string>(config: Record
|
|
|
17
17
|
and: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | {
|
|
18
18
|
or: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
|
|
19
19
|
} | any)[];
|
|
20
|
-
}
|
|
20
|
+
}>, options?: {
|
|
21
|
+
debug?: boolean;
|
|
22
|
+
hookNameToId?: undefined;
|
|
23
|
+
} | {
|
|
24
|
+
debug?: undefined;
|
|
25
|
+
hookNameToId?: (hookName: string) => string;
|
|
26
|
+
} | undefined) => readonly [`*{${string}}undefined` | `*{${string}}${string}`, (properties: import("@css-hooks/core").WithHooks<HookProperties, JSX.CSSProperties>) => JSX.CSSProperties];
|
|
21
27
|
/**
|
|
22
28
|
* A list of hooks offered as a "sensible default" to solve the most common use cases.
|
|
29
|
+
*
|
|
30
|
+
* @deprecated Use the `@css-hooks/recommended` package instead.
|
|
23
31
|
*/
|
|
24
32
|
export declare const recommended: {
|
|
25
33
|
active: ":active";
|