@css-hooks/core 1.3.0 → 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.
Files changed (5) hide show
  1. package/README.md +9 -5
  2. package/cjs/index.js +44 -42
  3. package/esm/index.js +44 -42
  4. package/package.json +1 -1
  5. package/types/index.d.ts +2 -0
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={hooks({
26
+ style={css({
27
27
  color: "#03f",
28
- hover: {
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 `hooks` function is pure. It simply returns a flat style object
41
- that is compatible with the `style` prop, creating dynamic property values that
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
@@ -63,36 +63,7 @@ function buildHooksSystem(stringify = genericStringify) {
63
63
  callback(hookName, value);
64
64
  });
65
65
  }
66
- function hooksImpl(properties, fallback = propertyName => stringifyImpl(propertyName, properties[propertyName])) {
67
- forEachHook(properties, (hookName, innerProperties) => {
68
- hooksImpl(innerProperties, propertyName => {
69
- let v = stringifyImpl(propertyName, innerProperties[propertyName]);
70
- if (v === null) {
71
- v = fallback(propertyName);
72
- }
73
- if (v === null) {
74
- v = "unset";
75
- }
76
- return v;
77
- });
78
- for (const propertyName in innerProperties) {
79
- const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
80
- if (v1 !== null) {
81
- let v0 = fallback(propertyName);
82
- if (v0 === null) {
83
- v0 = "unset";
84
- }
85
- /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
86
- properties[propertyName] =
87
- `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
88
- /* eslint-enable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
89
- }
90
- }
91
- delete properties[hookName];
92
- });
93
- return properties;
94
- }
95
- const css = Object.entries(config)
66
+ const hooks = Object.entries(config)
96
67
  .map(([name, definition]) => {
97
68
  function nest(input) {
98
69
  if (typeof input === "object") {
@@ -122,12 +93,12 @@ function buildHooksSystem(stringify = genericStringify) {
122
93
  }
123
94
  return [name, nest(definition)];
124
95
  })
125
- .flatMap(([name, definition]) => (function css(name, definition) {
96
+ .flatMap(([name, definition]) => (function hooksCSS(name, definition) {
126
97
  if (!isHookSpec(definition)) {
127
98
  return [];
128
99
  }
129
100
  if (typeof definition === "object") {
130
- let a, operator, b, extraCSS = [];
101
+ let a, operator, b, extraHooksCSS = [];
131
102
  if ("or" in definition) {
132
103
  operator = "or";
133
104
  [a, b] = definition.or;
@@ -135,9 +106,9 @@ function buildHooksSystem(stringify = genericStringify) {
135
106
  return [];
136
107
  }
137
108
  if (!b) {
138
- return css(name, a);
109
+ return hooksCSS(name, a);
139
110
  }
140
- extraCSS = [
111
+ extraHooksCSS = [
141
112
  {
142
113
  init: (function aorb(x) {
143
114
  const a = `${x}A`;
@@ -157,9 +128,9 @@ function buildHooksSystem(stringify = genericStringify) {
157
128
  return [];
158
129
  }
159
130
  if (!b) {
160
- return css(name, a);
131
+ return hooksCSS(name, a);
161
132
  }
162
- extraCSS = [
133
+ extraHooksCSS = [
163
134
  {
164
135
  init: (function aandb(x) {
165
136
  const a = `${x}A`;
@@ -174,9 +145,9 @@ function buildHooksSystem(stringify = genericStringify) {
174
145
  }
175
146
  if (operator) {
176
147
  return [
177
- ...css(`${name}A`, a),
178
- ...css(`${name}B`, b),
179
- ...extraCSS,
148
+ ...hooksCSS(`${name}A`, a),
149
+ ...hooksCSS(`${name}B`, b),
150
+ ...extraHooksCSS,
180
151
  ];
181
152
  }
182
153
  }
@@ -202,10 +173,39 @@ function buildHooksSystem(stringify = genericStringify) {
202
173
  init: "",
203
174
  rule: "",
204
175
  });
176
+ function cssImpl(properties, fallback = propertyName => stringifyImpl(propertyName, properties[propertyName])) {
177
+ forEachHook(properties, (hookName, innerProperties) => {
178
+ cssImpl(innerProperties, propertyName => {
179
+ let v = stringifyImpl(propertyName, innerProperties[propertyName]);
180
+ if (v === null) {
181
+ v = fallback(propertyName);
182
+ }
183
+ if (v === null) {
184
+ v = "unset";
185
+ }
186
+ return v;
187
+ });
188
+ for (const propertyName in innerProperties) {
189
+ const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
190
+ if (v1 !== null) {
191
+ let v0 = fallback(propertyName);
192
+ if (v0 === null) {
193
+ v0 = "unset";
194
+ }
195
+ /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
196
+ properties[propertyName] =
197
+ `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
198
+ /* eslint-enable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
199
+ }
200
+ }
201
+ delete properties[hookName];
202
+ });
203
+ return properties;
204
+ }
205
205
  return [
206
- `*{${css.init}}${css.rule}`,
207
- function hooks(properties) {
208
- return hooksImpl(JSON.parse(JSON.stringify(properties)));
206
+ `*{${hooks.init}}${hooks.rule}`,
207
+ function css(properties) {
208
+ return cssImpl(JSON.parse(JSON.stringify(properties)));
209
209
  },
210
210
  ];
211
211
  };
@@ -213,6 +213,8 @@ function buildHooksSystem(stringify = genericStringify) {
213
213
  exports.buildHooksSystem = buildHooksSystem;
214
214
  /**
215
215
  * A list of hooks offered as a "sensible default" to solve the most common use cases.
216
+ *
217
+ * @deprecated Use the `@css-hooks/recommended` package instead.
216
218
  */
217
219
  exports.recommended = {
218
220
  active: ":active",
package/esm/index.js CHANGED
@@ -59,36 +59,7 @@ export function buildHooksSystem(stringify = genericStringify) {
59
59
  callback(hookName, value);
60
60
  });
61
61
  }
62
- function hooksImpl(properties, fallback = propertyName => stringifyImpl(propertyName, properties[propertyName])) {
63
- forEachHook(properties, (hookName, innerProperties) => {
64
- hooksImpl(innerProperties, propertyName => {
65
- let v = stringifyImpl(propertyName, innerProperties[propertyName]);
66
- if (v === null) {
67
- v = fallback(propertyName);
68
- }
69
- if (v === null) {
70
- v = "unset";
71
- }
72
- return v;
73
- });
74
- for (const propertyName in innerProperties) {
75
- const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
76
- if (v1 !== null) {
77
- let v0 = fallback(propertyName);
78
- if (v0 === null) {
79
- v0 = "unset";
80
- }
81
- /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
82
- properties[propertyName] =
83
- `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
84
- /* eslint-enable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
85
- }
86
- }
87
- delete properties[hookName];
88
- });
89
- return properties;
90
- }
91
- const css = Object.entries(config)
62
+ const hooks = Object.entries(config)
92
63
  .map(([name, definition]) => {
93
64
  function nest(input) {
94
65
  if (typeof input === "object") {
@@ -118,12 +89,12 @@ export function buildHooksSystem(stringify = genericStringify) {
118
89
  }
119
90
  return [name, nest(definition)];
120
91
  })
121
- .flatMap(([name, definition]) => (function css(name, definition) {
92
+ .flatMap(([name, definition]) => (function hooksCSS(name, definition) {
122
93
  if (!isHookSpec(definition)) {
123
94
  return [];
124
95
  }
125
96
  if (typeof definition === "object") {
126
- let a, operator, b, extraCSS = [];
97
+ let a, operator, b, extraHooksCSS = [];
127
98
  if ("or" in definition) {
128
99
  operator = "or";
129
100
  [a, b] = definition.or;
@@ -131,9 +102,9 @@ export function buildHooksSystem(stringify = genericStringify) {
131
102
  return [];
132
103
  }
133
104
  if (!b) {
134
- return css(name, a);
105
+ return hooksCSS(name, a);
135
106
  }
136
- extraCSS = [
107
+ extraHooksCSS = [
137
108
  {
138
109
  init: (function aorb(x) {
139
110
  const a = `${x}A`;
@@ -153,9 +124,9 @@ export function buildHooksSystem(stringify = genericStringify) {
153
124
  return [];
154
125
  }
155
126
  if (!b) {
156
- return css(name, a);
127
+ return hooksCSS(name, a);
157
128
  }
158
- extraCSS = [
129
+ extraHooksCSS = [
159
130
  {
160
131
  init: (function aandb(x) {
161
132
  const a = `${x}A`;
@@ -170,9 +141,9 @@ export function buildHooksSystem(stringify = genericStringify) {
170
141
  }
171
142
  if (operator) {
172
143
  return [
173
- ...css(`${name}A`, a),
174
- ...css(`${name}B`, b),
175
- ...extraCSS,
144
+ ...hooksCSS(`${name}A`, a),
145
+ ...hooksCSS(`${name}B`, b),
146
+ ...extraHooksCSS,
176
147
  ];
177
148
  }
178
149
  }
@@ -198,16 +169,47 @@ export function buildHooksSystem(stringify = genericStringify) {
198
169
  init: "",
199
170
  rule: "",
200
171
  });
172
+ function cssImpl(properties, fallback = propertyName => stringifyImpl(propertyName, properties[propertyName])) {
173
+ forEachHook(properties, (hookName, innerProperties) => {
174
+ cssImpl(innerProperties, propertyName => {
175
+ let v = stringifyImpl(propertyName, innerProperties[propertyName]);
176
+ if (v === null) {
177
+ v = fallback(propertyName);
178
+ }
179
+ if (v === null) {
180
+ v = "unset";
181
+ }
182
+ return v;
183
+ });
184
+ for (const propertyName in innerProperties) {
185
+ const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
186
+ if (v1 !== null) {
187
+ let v0 = fallback(propertyName);
188
+ if (v0 === null) {
189
+ v0 = "unset";
190
+ }
191
+ /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
192
+ properties[propertyName] =
193
+ `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
194
+ /* eslint-enable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
195
+ }
196
+ }
197
+ delete properties[hookName];
198
+ });
199
+ return properties;
200
+ }
201
201
  return [
202
- `*{${css.init}}${css.rule}`,
203
- function hooks(properties) {
204
- return hooksImpl(JSON.parse(JSON.stringify(properties)));
202
+ `*{${hooks.init}}${hooks.rule}`,
203
+ function css(properties) {
204
+ return cssImpl(JSON.parse(JSON.stringify(properties)));
205
205
  },
206
206
  ];
207
207
  };
208
208
  }
209
209
  /**
210
210
  * A list of hooks offered as a "sensible default" to solve the most common use cases.
211
+ *
212
+ * @deprecated Use the `@css-hooks/recommended` package instead.
211
213
  */
212
214
  export const recommended = {
213
215
  active: ":active",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@css-hooks/core",
3
3
  "description": "CSS Hooks core library",
4
- "version": "1.3.0",
4
+ "version": "1.4.0",
5
5
  "author": "Nick Saunders",
6
6
  "devDependencies": {
7
7
  "@tsconfig/strictest": "^2.0.1",
package/types/index.d.ts CHANGED
@@ -19,6 +19,8 @@ export declare function buildHooksSystem<Properties = Record<string, unknown>>(s
19
19
  } | undefined) => readonly [`*{${string}}undefined` | `*{${string}}${string}`, (properties: WithHooks<HookProperties, Properties>) => Properties];
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 declare const recommended: {
24
26
  readonly active: ":active";