@css-hooks/core 4.0.0-next.0 → 4.0.0-next.10
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 +5 -5
- package/cjs/index.js +26 -14
- package/esm/index.js +26 -14
- package/package.json +1 -1
- package/types/index.d.ts +7 -13
package/README.md
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
<a id="logomark" href="https://next.css-hooks.com"><img alt="CSS Hooks" src="https://github.com/css-hooks/css-hooks/raw/v4.0.0-next.
|
|
2
|
+
<a id="logomark" href="https://next.css-hooks.com"><img alt="CSS Hooks" src="https://github.com/css-hooks/css-hooks/raw/v4.0.0-next.10/.github/logomark.svg" height="128" /></a><br/><br/>
|
|
3
3
|
<div id="wordmark">
|
|
4
|
-
<a href="https://next.css-hooks.com"><img alt="CSS Hooks" src="https://github.com/css-hooks/css-hooks/raw/v4.0.0-next.
|
|
4
|
+
<a href="https://next.css-hooks.com"><img alt="CSS Hooks" src="https://github.com/css-hooks/css-hooks/raw/v4.0.0-next.10/.github/wordmark-dark.svg" width="256"></a>
|
|
5
5
|
</div>
|
|
6
6
|
</div>
|
|
7
7
|
|
|
8
8
|
<br/>
|
|
9
9
|
|
|
10
10
|
<div align="center" id="badges">
|
|
11
|
-
<a href="https://github.com/css-hooks/css-hooks/tree/v4.0.0-next.
|
|
12
|
-
<a href="https://www.npmjs.com/package/@css-hooks/core/v/4.0.0-next.
|
|
13
|
-
<a href="https://github.com/css-hooks/css-hooks/blob/v4.0.0-next.
|
|
11
|
+
<a href="https://github.com/css-hooks/css-hooks/tree/v4.0.0-next.10"><img src="https://img.shields.io/badge/tag-v4.0.0--next.10-ffd700" alt="tag v4.0.0-next.10"></a>
|
|
12
|
+
<a href="https://www.npmjs.com/package/@css-hooks/core/v/4.0.0-next.10"><img src="https://img.shields.io/badge/npm-v4.0.0--next.10-ffd700" alt="npm version"></a>
|
|
13
|
+
<a href="https://github.com/css-hooks/css-hooks/blob/v4.0.0-next.10/LICENSE"><img src="https://img.shields.io/badge/license-MIT-ffd700" alt="license"></a>
|
|
14
14
|
</div>
|
|
15
15
|
|
|
16
16
|
---
|
package/cjs/index.js
CHANGED
|
@@ -28,16 +28,26 @@ exports.buildHooksSystem = buildHooksSystem;
|
|
|
28
28
|
*/
|
|
29
29
|
function buildHooksSystem(stringify = String) {
|
|
30
30
|
return (...selectors) => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
let space = "";
|
|
32
|
+
let newline = "";
|
|
33
|
+
try {
|
|
34
|
+
// @ts-expect-error bundler expected to replace `process.env.NODE_ENV` expression
|
|
35
|
+
if (process.env.NODE_ENV === "development") {
|
|
36
|
+
space = " ";
|
|
37
|
+
newline = "\n";
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
catch {
|
|
41
|
+
// `process.env.NODE_ENV` is absent in unbundled browser environments
|
|
42
|
+
}
|
|
43
|
+
const selectorHashes = new Map(selectors.map(selector => [selector, createHash(selector)]));
|
|
34
44
|
return {
|
|
35
45
|
styleSheet() {
|
|
36
46
|
const indent = Array(2).fill(space).join("");
|
|
37
47
|
return `*${space}{${newline}${selectors
|
|
38
48
|
.flatMap(selector => [
|
|
39
|
-
`${indent}--${
|
|
40
|
-
`${indent}--${
|
|
49
|
+
`${indent}--${selectorHashes.get(selector)}0:${space}initial;`,
|
|
50
|
+
`${indent}--${selectorHashes.get(selector)}1:${space};`,
|
|
41
51
|
])
|
|
42
52
|
.join(newline)}${newline}}${newline}${selectors
|
|
43
53
|
.flatMap(def => {
|
|
@@ -45,16 +55,16 @@ function buildHooksSystem(stringify = String) {
|
|
|
45
55
|
return [
|
|
46
56
|
`${def} {`,
|
|
47
57
|
`${indent}* {`,
|
|
48
|
-
`${indent}${indent}--${
|
|
49
|
-
`${indent}${indent}--${
|
|
58
|
+
`${indent}${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
59
|
+
`${indent}${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
50
60
|
`${indent}}`,
|
|
51
61
|
"}",
|
|
52
62
|
];
|
|
53
63
|
}
|
|
54
64
|
return [
|
|
55
65
|
`${def.replace(/&/g, "*")}${space}{`,
|
|
56
|
-
`${indent}--${
|
|
57
|
-
`${indent}--${
|
|
66
|
+
`${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
67
|
+
`${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
58
68
|
"}",
|
|
59
69
|
];
|
|
60
70
|
})
|
|
@@ -96,8 +106,9 @@ function buildHooksSystem(stringify = String) {
|
|
|
96
106
|
extraDecls[`--${hash}`] = valFalse;
|
|
97
107
|
valFalse = `var(--${hash})`;
|
|
98
108
|
}
|
|
109
|
+
const selectorHash = selectorHashes.get(condition) || createHash(condition);
|
|
99
110
|
return [
|
|
100
|
-
`var(--${
|
|
111
|
+
`var(--${selectorHash}1,${space}${valTrue})${space}var(--${selectorHash}0,${space}${valFalse})`,
|
|
101
112
|
extraDecls,
|
|
102
113
|
];
|
|
103
114
|
}
|
|
@@ -126,7 +137,8 @@ function buildHooksSystem(stringify = String) {
|
|
|
126
137
|
};
|
|
127
138
|
};
|
|
128
139
|
}
|
|
129
|
-
const hashAlphabet = "
|
|
140
|
+
const hashAlphabet = "abcdefghijklmnopqrstuvwxyz0123456789-_";
|
|
141
|
+
const hashAlphabetLength = hashAlphabet.length;
|
|
130
142
|
function createHash(value) {
|
|
131
143
|
let h1 = 0xdeadbeef;
|
|
132
144
|
let h2 = 0x41c6ce57;
|
|
@@ -143,9 +155,9 @@ function createHash(value) {
|
|
|
143
155
|
Math.imul(h1 ^ (h1 >>> 13), 0xc2b2ae35);
|
|
144
156
|
let hash = (h1 >>> 0) + 0x100000000 * (h2 & 0xf);
|
|
145
157
|
let encoded = "";
|
|
146
|
-
for (let i = 0; i <
|
|
147
|
-
encoded = hashAlphabet.charAt(hash %
|
|
148
|
-
hash = Math.floor(hash /
|
|
158
|
+
for (let i = 0; i < 7; i++) {
|
|
159
|
+
encoded = hashAlphabet.charAt(hash % hashAlphabetLength) + encoded;
|
|
160
|
+
hash = Math.floor(hash / hashAlphabetLength);
|
|
149
161
|
}
|
|
150
162
|
return encoded;
|
|
151
163
|
}
|
package/esm/index.js
CHANGED
|
@@ -25,16 +25,26 @@
|
|
|
25
25
|
*/
|
|
26
26
|
export function buildHooksSystem(stringify = String) {
|
|
27
27
|
return (...selectors) => {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
let space = "";
|
|
29
|
+
let newline = "";
|
|
30
|
+
try {
|
|
31
|
+
// @ts-expect-error bundler expected to replace `process.env.NODE_ENV` expression
|
|
32
|
+
if (process.env.NODE_ENV === "development") {
|
|
33
|
+
space = " ";
|
|
34
|
+
newline = "\n";
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
catch {
|
|
38
|
+
// `process.env.NODE_ENV` is absent in unbundled browser environments
|
|
39
|
+
}
|
|
40
|
+
const selectorHashes = new Map(selectors.map(selector => [selector, createHash(selector)]));
|
|
31
41
|
return {
|
|
32
42
|
styleSheet() {
|
|
33
43
|
const indent = Array(2).fill(space).join("");
|
|
34
44
|
return `*${space}{${newline}${selectors
|
|
35
45
|
.flatMap(selector => [
|
|
36
|
-
`${indent}--${
|
|
37
|
-
`${indent}--${
|
|
46
|
+
`${indent}--${selectorHashes.get(selector)}0:${space}initial;`,
|
|
47
|
+
`${indent}--${selectorHashes.get(selector)}1:${space};`,
|
|
38
48
|
])
|
|
39
49
|
.join(newline)}${newline}}${newline}${selectors
|
|
40
50
|
.flatMap(def => {
|
|
@@ -42,16 +52,16 @@ export function buildHooksSystem(stringify = String) {
|
|
|
42
52
|
return [
|
|
43
53
|
`${def} {`,
|
|
44
54
|
`${indent}* {`,
|
|
45
|
-
`${indent}${indent}--${
|
|
46
|
-
`${indent}${indent}--${
|
|
55
|
+
`${indent}${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
56
|
+
`${indent}${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
47
57
|
`${indent}}`,
|
|
48
58
|
"}",
|
|
49
59
|
];
|
|
50
60
|
}
|
|
51
61
|
return [
|
|
52
62
|
`${def.replace(/&/g, "*")}${space}{`,
|
|
53
|
-
`${indent}--${
|
|
54
|
-
`${indent}--${
|
|
63
|
+
`${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
64
|
+
`${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
55
65
|
"}",
|
|
56
66
|
];
|
|
57
67
|
})
|
|
@@ -93,8 +103,9 @@ export function buildHooksSystem(stringify = String) {
|
|
|
93
103
|
extraDecls[`--${hash}`] = valFalse;
|
|
94
104
|
valFalse = `var(--${hash})`;
|
|
95
105
|
}
|
|
106
|
+
const selectorHash = selectorHashes.get(condition) || createHash(condition);
|
|
96
107
|
return [
|
|
97
|
-
`var(--${
|
|
108
|
+
`var(--${selectorHash}1,${space}${valTrue})${space}var(--${selectorHash}0,${space}${valFalse})`,
|
|
98
109
|
extraDecls,
|
|
99
110
|
];
|
|
100
111
|
}
|
|
@@ -123,7 +134,8 @@ export function buildHooksSystem(stringify = String) {
|
|
|
123
134
|
};
|
|
124
135
|
};
|
|
125
136
|
}
|
|
126
|
-
const hashAlphabet = "
|
|
137
|
+
const hashAlphabet = "abcdefghijklmnopqrstuvwxyz0123456789-_";
|
|
138
|
+
const hashAlphabetLength = hashAlphabet.length;
|
|
127
139
|
function createHash(value) {
|
|
128
140
|
let h1 = 0xdeadbeef;
|
|
129
141
|
let h2 = 0x41c6ce57;
|
|
@@ -140,9 +152,9 @@ function createHash(value) {
|
|
|
140
152
|
Math.imul(h1 ^ (h1 >>> 13), 0xc2b2ae35);
|
|
141
153
|
let hash = (h1 >>> 0) + 0x100000000 * (h2 & 0xf);
|
|
142
154
|
let encoded = "";
|
|
143
|
-
for (let i = 0; i <
|
|
144
|
-
encoded = hashAlphabet.charAt(hash %
|
|
145
|
-
hash = Math.floor(hash /
|
|
155
|
+
for (let i = 0; i < 7; i++) {
|
|
156
|
+
encoded = hashAlphabet.charAt(hash % hashAlphabetLength) + encoded;
|
|
157
|
+
hash = Math.floor(hash / hashAlphabetLength);
|
|
146
158
|
}
|
|
147
159
|
return encoded;
|
|
148
160
|
}
|
package/package.json
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -56,17 +56,9 @@ export type Selector = `${string}&${string}` | `@${"media" | "container" | "supp
|
|
|
56
56
|
* conflicting properties are resolved
|
|
57
57
|
*/
|
|
58
58
|
type CSSPropertyConflictKeys<CSSPropertyConflicts extends object, OverrideCSSProperties> = CSSPropertyConflicts[keyof OverrideCSSProperties & keyof CSSPropertyConflicts] & PropertyKey;
|
|
59
|
-
/**
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
*
|
|
63
|
-
* @typeParam CSSPropertyConflicts - A map from CSS properties to the properties
|
|
64
|
-
* with which they conflict
|
|
65
|
-
* @typeParam OverrideCSSProperties - The conditional declarations for which
|
|
66
|
-
* conflicting properties are forbidden
|
|
67
|
-
*/
|
|
68
|
-
type ForbidCSSPropertyConflicts<CSSPropertyConflicts extends object, OverrideCSSProperties> = {
|
|
69
|
-
[P in CSSPropertyConflictKeys<CSSPropertyConflicts, OverrideCSSProperties>]?: never;
|
|
59
|
+
/** Preserves a style's shape while rejecting known-present conflicts. */
|
|
60
|
+
type CSSPropertiesWithoutConflicts<CSSProperties, CSSPropertyConflicts extends object, OverrideCSSProperties> = {
|
|
61
|
+
[P in keyof CSSProperties]: P extends CSSPropertyConflictKeys<CSSPropertyConflicts, OverrideCSSProperties> ? Pick<CSSProperties, P> extends Required<Pick<CSSProperties, P>> ? never : CSSProperties[P] : CSSProperties[P];
|
|
70
62
|
};
|
|
71
63
|
/**
|
|
72
64
|
* An object containing the functions needed to support and use the configured
|
|
@@ -77,13 +69,15 @@ type ForbidCSSPropertyConflicts<CSSPropertyConflicts extends object, OverrideCSS
|
|
|
77
69
|
* an app framework (e.g., React's `CSSProperties` type)
|
|
78
70
|
* @typeParam CSSPropertyConflicts - A map from CSS properties to the properties
|
|
79
71
|
* with which they conflict
|
|
72
|
+
*
|
|
73
|
+
* @public
|
|
80
74
|
*/
|
|
81
|
-
interface CreateHooksResult<S, CSSProperties, CSSPropertyConflicts extends object> {
|
|
75
|
+
export interface CreateHooksResult<S, CSSProperties, CSSPropertyConflicts extends object> {
|
|
82
76
|
/**
|
|
83
77
|
* Creates a function that enhances a style object with conditional override
|
|
84
78
|
* styles.
|
|
85
79
|
*/
|
|
86
|
-
on: <OverrideCSSProperties extends CSSProperties, BaseCSSProperties extends
|
|
80
|
+
on: <OverrideCSSProperties extends CSSProperties, BaseCSSProperties extends CSSProperties>(condition: Condition<S>, overrideStyle: OverrideCSSProperties) => (style: CSSProperties & CSSPropertiesWithoutConflicts<BaseCSSProperties, CSSPropertyConflicts, OverrideCSSProperties>) => Omit<CSSPropertiesWithoutConflicts<BaseCSSProperties, CSSPropertyConflicts, OverrideCSSProperties>, keyof OverrideCSSProperties> & OverrideCSSProperties;
|
|
87
81
|
/**
|
|
88
82
|
* Combines a list of conditions into a single condition which is true when
|
|
89
83
|
* all of the specified conditions are true.
|