@css-hooks/core 1.6.0 → 1.8.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 +10 -5
  2. package/cjs/index.js +56 -30
  3. package/esm/index.js +56 -30
  4. package/package.json +1 -1
  5. package/types/index.d.ts +4 -2
package/README.md CHANGED
@@ -53,11 +53,16 @@ Please visit [css-hooks.com](https://css-hooks.com) to get started.
53
53
 
54
54
  - [@css-hooks/recommended](packages/recommended): Recommended hook configuration
55
55
  with sensible defaults
56
- - [@css-hooks/react](packages/react): React framework integration
57
- - [@css-hooks/preact](packages/preact): Preact framework integration
58
- - [@css-hooks/solid](packages/solid): Solid framework integration
59
- - [@css-hooks/awik](packages/qwik): Qwik framework integration
60
- - [@css-hooks/core](packages/core): Core package (internal / advanced use cases)
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)
61
66
 
62
67
  ## Contributing
63
68
 
package/cjs/index.js CHANGED
@@ -9,6 +9,7 @@ function isHookSpec(x) {
9
9
  return (x.startsWith(":") ||
10
10
  x.startsWith("@media ") ||
11
11
  x.startsWith("@container ") ||
12
+ x.startsWith("@supports ") ||
12
13
  x.includes("&"));
13
14
  }
14
15
  if (typeof x === "object") {
@@ -57,13 +58,6 @@ function buildHooksSystem(stringify = genericStringify) {
57
58
  ? `${hookName.replace(/[^A-Za-z0-9-]/g, "_")}-${specHash}`
58
59
  : specHash;
59
60
  });
60
- function forEachHook(properties, callback) {
61
- return Object.entries(properties)
62
- .filter(([key]) => key in config)
63
- .forEach(([hookName, value]) => {
64
- callback(hookName, value);
65
- });
66
- }
67
61
  const hooks = Object.entries(config)
68
62
  .map(([name, definition]) => {
69
63
  function nest(input) {
@@ -175,34 +169,66 @@ function buildHooksSystem(stringify = genericStringify) {
175
169
  rule: "",
176
170
  });
177
171
  function cssImpl(properties, fallback = propertyName => stringifyImpl(propertyName, properties[propertyName])) {
178
- forEachHook(properties, (hookName, innerProperties) => {
179
- cssImpl(innerProperties, propertyName => {
180
- let v = stringifyImpl(propertyName, innerProperties[propertyName]);
181
- if (v === null) {
182
- v = fallback(propertyName);
183
- }
184
- if (v === null) {
185
- v = fallbackKeyword;
186
- }
187
- return v;
188
- });
189
- for (const propertyNameStr in innerProperties) {
190
- const propertyName = propertyNameStr;
191
- const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
192
- if (v1 !== null) {
193
- let v0 = fallback(propertyName);
194
- if (v0 === null) {
195
- v0 = fallbackKeyword;
172
+ const sort = options === null || options === void 0 ? void 0 : options.sort;
173
+ const keys = sort ? Object.keys(properties) : [];
174
+ for (const k in properties) {
175
+ const key = k;
176
+ const value = properties[key];
177
+ if (key in config) {
178
+ const hookName = key;
179
+ const innerProperties = value;
180
+ cssImpl(innerProperties, propertyName => {
181
+ let v = stringifyImpl(propertyName, innerProperties[propertyName]);
182
+ if (v === null) {
183
+ v = fallback(propertyName);
184
+ }
185
+ if (v === null) {
186
+ v = fallbackKeyword;
187
+ }
188
+ return v;
189
+ });
190
+ for (const propertyNameStr in innerProperties) {
191
+ if (keys.indexOf(propertyNameStr) > keys.indexOf(hookName)) {
192
+ continue;
193
+ }
194
+ const propertyName = propertyNameStr;
195
+ const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
196
+ if (v1 !== null) {
197
+ let v0 = fallback(propertyName);
198
+ if (v0 === null) {
199
+ v0 = fallbackKeyword;
200
+ }
201
+ if (sort) {
202
+ delete properties[propertyName];
203
+ }
204
+ properties[propertyName] = `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
196
205
  }
197
- properties[propertyName] = `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
198
206
  }
207
+ delete properties[hookName];
199
208
  }
200
- delete properties[hookName];
201
- });
209
+ else if (sort) {
210
+ delete properties[key];
211
+ Object.assign(properties, { [key]: value });
212
+ }
213
+ }
202
214
  return properties;
203
215
  }
204
- function css(properties) {
205
- return cssImpl(JSON.parse(JSON.stringify(properties)));
216
+ function css(...properties) {
217
+ const styles = [{}].concat(JSON.parse(JSON.stringify(properties)));
218
+ do {
219
+ const current = styles[0];
220
+ const next = styles[1] || {};
221
+ if (options === null || options === void 0 ? void 0 : options.sort) {
222
+ for (const k in next) {
223
+ if (k in current) {
224
+ delete current[k];
225
+ }
226
+ }
227
+ }
228
+ styles[0] = cssImpl(Object.assign(current, next));
229
+ styles.splice(1, 1);
230
+ } while (styles[1]);
231
+ return styles[0];
206
232
  }
207
233
  return [`*{${hooks.init}}${hooks.rule}`, css];
208
234
  };
package/esm/index.js CHANGED
@@ -6,6 +6,7 @@ function isHookSpec(x) {
6
6
  return (x.startsWith(":") ||
7
7
  x.startsWith("@media ") ||
8
8
  x.startsWith("@container ") ||
9
+ x.startsWith("@supports ") ||
9
10
  x.includes("&"));
10
11
  }
11
12
  if (typeof x === "object") {
@@ -53,13 +54,6 @@ export function buildHooksSystem(stringify = genericStringify) {
53
54
  ? `${hookName.replace(/[^A-Za-z0-9-]/g, "_")}-${specHash}`
54
55
  : specHash;
55
56
  });
56
- function forEachHook(properties, callback) {
57
- return Object.entries(properties)
58
- .filter(([key]) => key in config)
59
- .forEach(([hookName, value]) => {
60
- callback(hookName, value);
61
- });
62
- }
63
57
  const hooks = Object.entries(config)
64
58
  .map(([name, definition]) => {
65
59
  function nest(input) {
@@ -171,34 +165,66 @@ export function buildHooksSystem(stringify = genericStringify) {
171
165
  rule: "",
172
166
  });
173
167
  function cssImpl(properties, fallback = propertyName => stringifyImpl(propertyName, properties[propertyName])) {
174
- forEachHook(properties, (hookName, innerProperties) => {
175
- cssImpl(innerProperties, propertyName => {
176
- let v = stringifyImpl(propertyName, innerProperties[propertyName]);
177
- if (v === null) {
178
- v = fallback(propertyName);
179
- }
180
- if (v === null) {
181
- v = fallbackKeyword;
182
- }
183
- return v;
184
- });
185
- for (const propertyNameStr in innerProperties) {
186
- const propertyName = propertyNameStr;
187
- const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
188
- if (v1 !== null) {
189
- let v0 = fallback(propertyName);
190
- if (v0 === null) {
191
- v0 = fallbackKeyword;
168
+ const sort = options === null || options === void 0 ? void 0 : options.sort;
169
+ const keys = sort ? Object.keys(properties) : [];
170
+ for (const k in properties) {
171
+ const key = k;
172
+ const value = properties[key];
173
+ if (key in config) {
174
+ const hookName = key;
175
+ const innerProperties = value;
176
+ cssImpl(innerProperties, propertyName => {
177
+ let v = stringifyImpl(propertyName, innerProperties[propertyName]);
178
+ if (v === null) {
179
+ v = fallback(propertyName);
180
+ }
181
+ if (v === null) {
182
+ v = fallbackKeyword;
183
+ }
184
+ return v;
185
+ });
186
+ for (const propertyNameStr in innerProperties) {
187
+ if (keys.indexOf(propertyNameStr) > keys.indexOf(hookName)) {
188
+ continue;
189
+ }
190
+ const propertyName = propertyNameStr;
191
+ const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
192
+ if (v1 !== null) {
193
+ let v0 = fallback(propertyName);
194
+ if (v0 === null) {
195
+ v0 = fallbackKeyword;
196
+ }
197
+ if (sort) {
198
+ delete properties[propertyName];
199
+ }
200
+ properties[propertyName] = `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
192
201
  }
193
- properties[propertyName] = `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
194
202
  }
203
+ delete properties[hookName];
195
204
  }
196
- delete properties[hookName];
197
- });
205
+ else if (sort) {
206
+ delete properties[key];
207
+ Object.assign(properties, { [key]: value });
208
+ }
209
+ }
198
210
  return properties;
199
211
  }
200
- function css(properties) {
201
- return cssImpl(JSON.parse(JSON.stringify(properties)));
212
+ function css(...properties) {
213
+ const styles = [{}].concat(JSON.parse(JSON.stringify(properties)));
214
+ do {
215
+ const current = styles[0];
216
+ const next = styles[1] || {};
217
+ if (options === null || options === void 0 ? void 0 : options.sort) {
218
+ for (const k in next) {
219
+ if (k in current) {
220
+ delete current[k];
221
+ }
222
+ }
223
+ }
224
+ styles[0] = cssImpl(Object.assign(current, next));
225
+ styles.splice(1, 1);
226
+ } while (styles[1]);
227
+ return styles[0];
202
228
  }
203
229
  return [`*{${hooks.init}}${hooks.rule}`, css];
204
230
  };
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.6.0",
4
+ "version": "1.8.0",
5
5
  "author": "Nick Saunders",
6
6
  "devDependencies": {
7
7
  "@tsconfig/strictest": "^2.0.1",
package/types/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  type UnionToIntersection<T> = (T extends any ? (t: T) => any : never) extends (t: infer U) => any ? U : never;
2
- type HookSpec = `@${"media" | "container"} ${string}` | `:${string}` | `${string}&${string}` | {
2
+ type HookSpec = `@${"media" | "container" | "supports"} ${string}` | `:${string}` | `${string}&${string}` | {
3
3
  or: Readonly<HookSpec[]>;
4
4
  } | {
5
5
  and: Readonly<HookSpec[]>;
@@ -18,7 +18,9 @@ export declare function buildHooksSystem<Properties = Record<string, unknown>>(s
18
18
  /** @internal */ hookNameToId?: (hookName: string) => string;
19
19
  }) & {
20
20
  fallback?: "unset" | "revert-layer";
21
- }) | undefined) => [string, (properties: WithHooks<HookProperties, Properties>) => Properties];
21
+ /** @experimental */
22
+ sort?: boolean;
23
+ }) | undefined) => [string, (properties_0: WithHooks<HookProperties, Properties>, ...properties_1: (WithHooks<HookProperties, Properties> | undefined)[]) => Properties];
22
24
  /**
23
25
  * A list of hooks offered as a "sensible default" to solve the most common use cases.
24
26
  *