@css-hooks/core 1.6.0 → 1.7.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 +55 -30
  3. package/esm/index.js +55 -30
  4. package/package.json +1 -1
  5. package/types/index.d.ts +3 -1
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
@@ -57,13 +57,6 @@ function buildHooksSystem(stringify = genericStringify) {
57
57
  ? `${hookName.replace(/[^A-Za-z0-9-]/g, "_")}-${specHash}`
58
58
  : specHash;
59
59
  });
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
60
  const hooks = Object.entries(config)
68
61
  .map(([name, definition]) => {
69
62
  function nest(input) {
@@ -175,34 +168,66 @@ function buildHooksSystem(stringify = genericStringify) {
175
168
  rule: "",
176
169
  });
177
170
  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;
171
+ const sort = options === null || options === void 0 ? void 0 : options.sort;
172
+ const keys = sort ? Object.keys(properties) : [];
173
+ for (const k in properties) {
174
+ const key = k;
175
+ const value = properties[key];
176
+ if (key in config) {
177
+ const hookName = key;
178
+ const innerProperties = value;
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
+ if (keys.indexOf(propertyNameStr) > keys.indexOf(hookName)) {
191
+ continue;
192
+ }
193
+ const propertyName = propertyNameStr;
194
+ const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
195
+ if (v1 !== null) {
196
+ let v0 = fallback(propertyName);
197
+ if (v0 === null) {
198
+ v0 = fallbackKeyword;
199
+ }
200
+ if (sort) {
201
+ delete properties[propertyName];
202
+ }
203
+ properties[propertyName] = `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
196
204
  }
197
- properties[propertyName] = `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
198
205
  }
206
+ delete properties[hookName];
199
207
  }
200
- delete properties[hookName];
201
- });
208
+ else if (sort) {
209
+ delete properties[key];
210
+ Object.assign(properties, { [key]: value });
211
+ }
212
+ }
202
213
  return properties;
203
214
  }
204
- function css(properties) {
205
- return cssImpl(JSON.parse(JSON.stringify(properties)));
215
+ function css(...properties) {
216
+ const styles = [{}].concat(JSON.parse(JSON.stringify(properties)));
217
+ do {
218
+ const current = styles[0];
219
+ const next = styles[1] || {};
220
+ if (options === null || options === void 0 ? void 0 : options.sort) {
221
+ for (const k in next) {
222
+ if (k in current) {
223
+ delete current[k];
224
+ }
225
+ }
226
+ }
227
+ styles[0] = cssImpl(Object.assign(current, next));
228
+ styles.splice(1, 1);
229
+ } while (styles[1]);
230
+ return styles[0];
206
231
  }
207
232
  return [`*{${hooks.init}}${hooks.rule}`, css];
208
233
  };
package/esm/index.js CHANGED
@@ -53,13 +53,6 @@ export function buildHooksSystem(stringify = genericStringify) {
53
53
  ? `${hookName.replace(/[^A-Za-z0-9-]/g, "_")}-${specHash}`
54
54
  : specHash;
55
55
  });
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
56
  const hooks = Object.entries(config)
64
57
  .map(([name, definition]) => {
65
58
  function nest(input) {
@@ -171,34 +164,66 @@ export function buildHooksSystem(stringify = genericStringify) {
171
164
  rule: "",
172
165
  });
173
166
  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;
167
+ const sort = options === null || options === void 0 ? void 0 : options.sort;
168
+ const keys = sort ? Object.keys(properties) : [];
169
+ for (const k in properties) {
170
+ const key = k;
171
+ const value = properties[key];
172
+ if (key in config) {
173
+ const hookName = key;
174
+ const innerProperties = value;
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
+ if (keys.indexOf(propertyNameStr) > keys.indexOf(hookName)) {
187
+ continue;
188
+ }
189
+ const propertyName = propertyNameStr;
190
+ const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
191
+ if (v1 !== null) {
192
+ let v0 = fallback(propertyName);
193
+ if (v0 === null) {
194
+ v0 = fallbackKeyword;
195
+ }
196
+ if (sort) {
197
+ delete properties[propertyName];
198
+ }
199
+ properties[propertyName] = `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
192
200
  }
193
- properties[propertyName] = `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
194
201
  }
202
+ delete properties[hookName];
195
203
  }
196
- delete properties[hookName];
197
- });
204
+ else if (sort) {
205
+ delete properties[key];
206
+ Object.assign(properties, { [key]: value });
207
+ }
208
+ }
198
209
  return properties;
199
210
  }
200
- function css(properties) {
201
- return cssImpl(JSON.parse(JSON.stringify(properties)));
211
+ function css(...properties) {
212
+ const styles = [{}].concat(JSON.parse(JSON.stringify(properties)));
213
+ do {
214
+ const current = styles[0];
215
+ const next = styles[1] || {};
216
+ if (options === null || options === void 0 ? void 0 : options.sort) {
217
+ for (const k in next) {
218
+ if (k in current) {
219
+ delete current[k];
220
+ }
221
+ }
222
+ }
223
+ styles[0] = cssImpl(Object.assign(current, next));
224
+ styles.splice(1, 1);
225
+ } while (styles[1]);
226
+ return styles[0];
202
227
  }
203
228
  return [`*{${hooks.init}}${hooks.rule}`, css];
204
229
  };
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.7.0",
5
5
  "author": "Nick Saunders",
6
6
  "devDependencies": {
7
7
  "@tsconfig/strictest": "^2.0.1",
package/types/index.d.ts CHANGED
@@ -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
  *