@css-hooks/core 1.2.0 → 1.3.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 (4) hide show
  1. package/cjs/index.js +38 -23
  2. package/esm/index.js +38 -23
  3. package/package.json +2 -2
  4. package/types/index.d.ts +7 -1
package/cjs/index.js CHANGED
@@ -32,26 +32,41 @@ function genericStringify(_, value) {
32
32
  return null;
33
33
  }
34
34
  exports.genericStringify = genericStringify;
35
+ function hash(obj) {
36
+ const jsonString = JSON.stringify(obj);
37
+ let hashValue = 0;
38
+ for (let i = 0; i < jsonString.length; i++) {
39
+ const charCode = jsonString.charCodeAt(i);
40
+ hashValue = (hashValue << 5) - hashValue + charCode;
41
+ hashValue &= 0x7fffffff;
42
+ }
43
+ return hashValue.toString(36);
44
+ }
35
45
  function buildHooksSystem(stringify = genericStringify) {
36
- return function createHooks(config) {
46
+ return function createHooks(config, options) {
37
47
  const stringifyImpl = (propertyName, value) => {
38
48
  return typeof value === "string" && value.startsWith("var(")
39
49
  ? value
40
50
  : stringify(propertyName, value);
41
51
  };
42
- function forEachHook(obj, callback) {
43
- return Object.entries(obj)
52
+ const hookId = (options === null || options === void 0 ? void 0 : options.hookNameToId) ||
53
+ ((hookName) => {
54
+ const specHash = hash(config[hookName]);
55
+ return (options === null || options === void 0 ? void 0 : options.debug)
56
+ ? `${hookName.replace(/[^A-Za-z0-9-]/g, "_")}-${specHash}`
57
+ : specHash;
58
+ });
59
+ function forEachHook(properties, callback) {
60
+ return Object.entries(properties)
44
61
  .filter(([key]) => key in config)
45
- .forEach(([key, value]) => {
46
- callback(key,
47
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-argument */
48
- value);
62
+ .forEach(([hookName, value]) => {
63
+ callback(hookName, value);
49
64
  });
50
65
  }
51
66
  function hooksImpl(properties, fallback = propertyName => stringifyImpl(propertyName, properties[propertyName])) {
52
- forEachHook(properties, (key, hook) => {
53
- hooksImpl(hook, propertyName => {
54
- let v = stringifyImpl(propertyName, hook[propertyName]);
67
+ forEachHook(properties, (hookName, innerProperties) => {
68
+ hooksImpl(innerProperties, propertyName => {
69
+ let v = stringifyImpl(propertyName, innerProperties[propertyName]);
55
70
  if (v === null) {
56
71
  v = fallback(propertyName);
57
72
  }
@@ -60,8 +75,8 @@ function buildHooksSystem(stringify = genericStringify) {
60
75
  }
61
76
  return v;
62
77
  });
63
- for (const propertyName in hook) {
64
- const v1 = stringifyImpl(propertyName, hook[propertyName]);
78
+ for (const propertyName in innerProperties) {
79
+ const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
65
80
  if (v1 !== null) {
66
81
  let v0 = fallback(propertyName);
67
82
  if (v0 === null) {
@@ -69,11 +84,11 @@ function buildHooksSystem(stringify = genericStringify) {
69
84
  }
70
85
  /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
71
86
  properties[propertyName] =
72
- `var(--${String(key)}-1, ${v1}) var(--${String(key)}-0, ${v0})`;
87
+ `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
73
88
  /* eslint-enable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
74
89
  }
75
90
  }
76
- delete properties[key];
91
+ delete properties[hookName];
77
92
  });
78
93
  return properties;
79
94
  }
@@ -107,7 +122,7 @@ function buildHooksSystem(stringify = genericStringify) {
107
122
  }
108
123
  return [name, nest(definition)];
109
124
  })
110
- .flatMap(function css([name, definition]) {
125
+ .flatMap(([name, definition]) => (function css(name, definition) {
111
126
  if (!isHookSpec(definition)) {
112
127
  return [];
113
128
  }
@@ -120,7 +135,7 @@ function buildHooksSystem(stringify = genericStringify) {
120
135
  return [];
121
136
  }
122
137
  if (!b) {
123
- return css.bind(this)([name, a]);
138
+ return css(name, a);
124
139
  }
125
140
  extraCSS = [
126
141
  {
@@ -129,7 +144,7 @@ function buildHooksSystem(stringify = genericStringify) {
129
144
  const b = `${x}B`;
130
145
  return [
131
146
  `--${x}-0:var(--${a}-0,var(--${b}-0));`,
132
- `--${x}-1:var(--${a}-0,var(--${b}-1)) var(--${b}-0,var(--${a}-1)) var(--${a}-1,var(--${b}-1));`,
147
+ `--${x}-1:var(--${a}-1) var(--${b}-1);`,
133
148
  ].join("");
134
149
  })(name),
135
150
  },
@@ -142,7 +157,7 @@ function buildHooksSystem(stringify = genericStringify) {
142
157
  return [];
143
158
  }
144
159
  if (!b) {
145
- return css.bind(this)([name, a]);
160
+ return css(name, a);
146
161
  }
147
162
  extraCSS = [
148
163
  {
@@ -150,8 +165,8 @@ function buildHooksSystem(stringify = genericStringify) {
150
165
  const a = `${x}A`;
151
166
  const b = `${x}B`;
152
167
  return [
153
- `--${x}-0:var(--${a}-0,var(--${b}-0)) var(--${a}-1,var(--${b}-0)) var(--${b}-1,var(--${a}-0));`,
154
- `--${x}-1:var(--${a}-1,var(${b}-1));`,
168
+ `--${x}-0:var(--${a}-0) var(--${b}-0);`,
169
+ `--${x}-1:var(--${a}-1,var(--${b}-1));`,
155
170
  ].join("");
156
171
  })(name),
157
172
  },
@@ -159,8 +174,8 @@ function buildHooksSystem(stringify = genericStringify) {
159
174
  }
160
175
  if (operator) {
161
176
  return [
162
- ...css.bind(this)([`${name}A`, a]),
163
- ...css.bind(this)([`${name}B`, b]),
177
+ ...css(`${name}A`, a),
178
+ ...css(`${name}B`, b),
164
179
  ...extraCSS,
165
180
  ];
166
181
  }
@@ -179,7 +194,7 @@ function buildHooksSystem(stringify = genericStringify) {
179
194
  }
180
195
  }
181
196
  return rule === undefined ? [] : [{ init, rule }];
182
- })
197
+ })(hookId(name), definition))
183
198
  .reduce((acc, { init = "", rule = "" }) => ({
184
199
  init: acc.init + init,
185
200
  rule: acc.rule + rule,
package/esm/index.js CHANGED
@@ -28,26 +28,41 @@ export function genericStringify(_, value) {
28
28
  }
29
29
  return null;
30
30
  }
31
+ function hash(obj) {
32
+ const jsonString = JSON.stringify(obj);
33
+ let hashValue = 0;
34
+ for (let i = 0; i < jsonString.length; i++) {
35
+ const charCode = jsonString.charCodeAt(i);
36
+ hashValue = (hashValue << 5) - hashValue + charCode;
37
+ hashValue &= 0x7fffffff;
38
+ }
39
+ return hashValue.toString(36);
40
+ }
31
41
  export function buildHooksSystem(stringify = genericStringify) {
32
- return function createHooks(config) {
42
+ return function createHooks(config, options) {
33
43
  const stringifyImpl = (propertyName, value) => {
34
44
  return typeof value === "string" && value.startsWith("var(")
35
45
  ? value
36
46
  : stringify(propertyName, value);
37
47
  };
38
- function forEachHook(obj, callback) {
39
- return Object.entries(obj)
48
+ const hookId = (options === null || options === void 0 ? void 0 : options.hookNameToId) ||
49
+ ((hookName) => {
50
+ const specHash = hash(config[hookName]);
51
+ return (options === null || options === void 0 ? void 0 : options.debug)
52
+ ? `${hookName.replace(/[^A-Za-z0-9-]/g, "_")}-${specHash}`
53
+ : specHash;
54
+ });
55
+ function forEachHook(properties, callback) {
56
+ return Object.entries(properties)
40
57
  .filter(([key]) => key in config)
41
- .forEach(([key, value]) => {
42
- callback(key,
43
- /* eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-argument */
44
- value);
58
+ .forEach(([hookName, value]) => {
59
+ callback(hookName, value);
45
60
  });
46
61
  }
47
62
  function hooksImpl(properties, fallback = propertyName => stringifyImpl(propertyName, properties[propertyName])) {
48
- forEachHook(properties, (key, hook) => {
49
- hooksImpl(hook, propertyName => {
50
- let v = stringifyImpl(propertyName, hook[propertyName]);
63
+ forEachHook(properties, (hookName, innerProperties) => {
64
+ hooksImpl(innerProperties, propertyName => {
65
+ let v = stringifyImpl(propertyName, innerProperties[propertyName]);
51
66
  if (v === null) {
52
67
  v = fallback(propertyName);
53
68
  }
@@ -56,8 +71,8 @@ export function buildHooksSystem(stringify = genericStringify) {
56
71
  }
57
72
  return v;
58
73
  });
59
- for (const propertyName in hook) {
60
- const v1 = stringifyImpl(propertyName, hook[propertyName]);
74
+ for (const propertyName in innerProperties) {
75
+ const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
61
76
  if (v1 !== null) {
62
77
  let v0 = fallback(propertyName);
63
78
  if (v0 === null) {
@@ -65,11 +80,11 @@ export function buildHooksSystem(stringify = genericStringify) {
65
80
  }
66
81
  /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
67
82
  properties[propertyName] =
68
- `var(--${String(key)}-1, ${v1}) var(--${String(key)}-0, ${v0})`;
83
+ `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
69
84
  /* eslint-enable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any */
70
85
  }
71
86
  }
72
- delete properties[key];
87
+ delete properties[hookName];
73
88
  });
74
89
  return properties;
75
90
  }
@@ -103,7 +118,7 @@ export function buildHooksSystem(stringify = genericStringify) {
103
118
  }
104
119
  return [name, nest(definition)];
105
120
  })
106
- .flatMap(function css([name, definition]) {
121
+ .flatMap(([name, definition]) => (function css(name, definition) {
107
122
  if (!isHookSpec(definition)) {
108
123
  return [];
109
124
  }
@@ -116,7 +131,7 @@ export function buildHooksSystem(stringify = genericStringify) {
116
131
  return [];
117
132
  }
118
133
  if (!b) {
119
- return css.bind(this)([name, a]);
134
+ return css(name, a);
120
135
  }
121
136
  extraCSS = [
122
137
  {
@@ -125,7 +140,7 @@ export function buildHooksSystem(stringify = genericStringify) {
125
140
  const b = `${x}B`;
126
141
  return [
127
142
  `--${x}-0:var(--${a}-0,var(--${b}-0));`,
128
- `--${x}-1:var(--${a}-0,var(--${b}-1)) var(--${b}-0,var(--${a}-1)) var(--${a}-1,var(--${b}-1));`,
143
+ `--${x}-1:var(--${a}-1) var(--${b}-1);`,
129
144
  ].join("");
130
145
  })(name),
131
146
  },
@@ -138,7 +153,7 @@ export function buildHooksSystem(stringify = genericStringify) {
138
153
  return [];
139
154
  }
140
155
  if (!b) {
141
- return css.bind(this)([name, a]);
156
+ return css(name, a);
142
157
  }
143
158
  extraCSS = [
144
159
  {
@@ -146,8 +161,8 @@ export function buildHooksSystem(stringify = genericStringify) {
146
161
  const a = `${x}A`;
147
162
  const b = `${x}B`;
148
163
  return [
149
- `--${x}-0:var(--${a}-0,var(--${b}-0)) var(--${a}-1,var(--${b}-0)) var(--${b}-1,var(--${a}-0));`,
150
- `--${x}-1:var(--${a}-1,var(${b}-1));`,
164
+ `--${x}-0:var(--${a}-0) var(--${b}-0);`,
165
+ `--${x}-1:var(--${a}-1,var(--${b}-1));`,
151
166
  ].join("");
152
167
  })(name),
153
168
  },
@@ -155,8 +170,8 @@ export function buildHooksSystem(stringify = genericStringify) {
155
170
  }
156
171
  if (operator) {
157
172
  return [
158
- ...css.bind(this)([`${name}A`, a]),
159
- ...css.bind(this)([`${name}B`, b]),
173
+ ...css(`${name}A`, a),
174
+ ...css(`${name}B`, b),
160
175
  ...extraCSS,
161
176
  ];
162
177
  }
@@ -175,7 +190,7 @@ export function buildHooksSystem(stringify = genericStringify) {
175
190
  }
176
191
  }
177
192
  return rule === undefined ? [] : [{ init, rule }];
178
- })
193
+ })(hookId(name), definition))
179
194
  .reduce((acc, { init = "", rule = "" }) => ({
180
195
  init: acc.init + init,
181
196
  rule: acc.rule + rule,
package/package.json CHANGED
@@ -1,10 +1,9 @@
1
1
  {
2
2
  "name": "@css-hooks/core",
3
3
  "description": "CSS Hooks core library",
4
- "version": "1.2.0",
4
+ "version": "1.3.0",
5
5
  "author": "Nick Saunders",
6
6
  "devDependencies": {
7
- "@tsconfig/node-lts": "^18.12.3",
8
7
  "@tsconfig/strictest": "^2.0.1",
9
8
  "@types/css-tree": "^2.3.2",
10
9
  "@types/jest": "^29.5.3",
@@ -33,6 +32,7 @@
33
32
  },
34
33
  "scripts": {
35
34
  "clean": "rimraf cjs esm types",
35
+ "compile": "tsc",
36
36
  "lint": "eslint __tests__ src .*.*js *.*js",
37
37
  "prepublishOnly": "tsc -p tsconfig.dist.json --outDir esm --module es6 && tsc -p tsconfig.dist.json --outDir cjs --module commonjs && tsc -p tsconfig.dist.json --outDir types --declaration --emitDeclarationOnly",
38
38
  "test": "jest"
package/types/index.d.ts CHANGED
@@ -10,7 +10,13 @@ type WithHooksImpl<Properties, HookProperties, HookPropertiesSub extends HookPro
10
10
  } : never>>;
11
11
  /** @internal */
12
12
  export declare function genericStringify(_: unknown, value: unknown): string | null;
13
- export declare function buildHooksSystem<Properties = Record<string, unknown>>(stringify?: (propertyName: keyof Properties, value: unknown) => string | null): <HookProperties extends string>(config: Record<HookProperties, HookSpec>) => readonly [`*{${string}}undefined` | `*{${string}}${string}`, (properties: WithHooks<HookProperties, Properties>) => Properties];
13
+ export declare function buildHooksSystem<Properties = Record<string, unknown>>(stringify?: (propertyName: keyof Properties, value: unknown) => string | null): <HookProperties extends string>(config: Record<HookProperties, HookSpec>, options?: {
14
+ debug?: boolean; /** @internal */
15
+ hookNameToId?: undefined;
16
+ } | {
17
+ debug?: undefined;
18
+ /** @internal */ hookNameToId?: (hookName: string) => string;
19
+ } | undefined) => readonly [`*{${string}}undefined` | `*{${string}}${string}`, (properties: WithHooks<HookProperties, Properties>) => Properties];
14
20
  /**
15
21
  * A list of hooks offered as a "sensible default" to solve the most common use cases.
16
22
  */