@css-hooks/core 4.0.0-next.2 → 4.0.0-next.21
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 +14 -11
- package/esm/index.js +14 -11
- 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.21/.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.21/.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.21"><img src="https://img.shields.io/badge/tag-v4.0.0--next.21-ffd700" alt="tag v4.0.0-next.21"></a>
|
|
12
|
+
<a href="https://www.npmjs.com/package/@css-hooks/core/v/4.0.0-next.21"><img src="https://img.shields.io/badge/npm-v4.0.0--next.21-ffd700" alt="npm version"></a>
|
|
13
|
+
<a href="https://github.com/css-hooks/css-hooks/blob/v4.0.0-next.21/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
|
@@ -40,13 +40,14 @@ function buildHooksSystem(stringify = String) {
|
|
|
40
40
|
catch {
|
|
41
41
|
// `process.env.NODE_ENV` is absent in unbundled browser environments
|
|
42
42
|
}
|
|
43
|
+
const selectorHashes = new Map(selectors.map(selector => [selector, createHash(selector)]));
|
|
43
44
|
return {
|
|
44
45
|
styleSheet() {
|
|
45
46
|
const indent = Array(2).fill(space).join("");
|
|
46
47
|
return `*${space}{${newline}${selectors
|
|
47
48
|
.flatMap(selector => [
|
|
48
|
-
`${indent}--${
|
|
49
|
-
`${indent}--${
|
|
49
|
+
`${indent}--${selectorHashes.get(selector)}0:${space}initial;`,
|
|
50
|
+
`${indent}--${selectorHashes.get(selector)}1:${space};`,
|
|
50
51
|
])
|
|
51
52
|
.join(newline)}${newline}}${newline}${selectors
|
|
52
53
|
.flatMap(def => {
|
|
@@ -54,16 +55,16 @@ function buildHooksSystem(stringify = String) {
|
|
|
54
55
|
return [
|
|
55
56
|
`${def} {`,
|
|
56
57
|
`${indent}* {`,
|
|
57
|
-
`${indent}${indent}--${
|
|
58
|
-
`${indent}${indent}--${
|
|
58
|
+
`${indent}${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
59
|
+
`${indent}${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
59
60
|
`${indent}}`,
|
|
60
61
|
"}",
|
|
61
62
|
];
|
|
62
63
|
}
|
|
63
64
|
return [
|
|
64
65
|
`${def.replace(/&/g, "*")}${space}{`,
|
|
65
|
-
`${indent}--${
|
|
66
|
-
`${indent}--${
|
|
66
|
+
`${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
67
|
+
`${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
67
68
|
"}",
|
|
68
69
|
];
|
|
69
70
|
})
|
|
@@ -105,8 +106,9 @@ function buildHooksSystem(stringify = String) {
|
|
|
105
106
|
extraDecls[`--${hash}`] = valFalse;
|
|
106
107
|
valFalse = `var(--${hash})`;
|
|
107
108
|
}
|
|
109
|
+
const selectorHash = selectorHashes.get(condition) || createHash(condition);
|
|
108
110
|
return [
|
|
109
|
-
`var(--${
|
|
111
|
+
`var(--${selectorHash}1,${space}${valTrue})${space}var(--${selectorHash}0,${space}${valFalse})`,
|
|
110
112
|
extraDecls,
|
|
111
113
|
];
|
|
112
114
|
}
|
|
@@ -135,7 +137,8 @@ function buildHooksSystem(stringify = String) {
|
|
|
135
137
|
};
|
|
136
138
|
};
|
|
137
139
|
}
|
|
138
|
-
const hashAlphabet = "
|
|
140
|
+
const hashAlphabet = "abcdefghijklmnopqrstuvwxyz0123456789-_";
|
|
141
|
+
const hashAlphabetLength = hashAlphabet.length;
|
|
139
142
|
function createHash(value) {
|
|
140
143
|
let h1 = 0xdeadbeef;
|
|
141
144
|
let h2 = 0x41c6ce57;
|
|
@@ -152,9 +155,9 @@ function createHash(value) {
|
|
|
152
155
|
Math.imul(h1 ^ (h1 >>> 13), 0xc2b2ae35);
|
|
153
156
|
let hash = (h1 >>> 0) + 0x100000000 * (h2 & 0xf);
|
|
154
157
|
let encoded = "";
|
|
155
|
-
for (let i = 0; i <
|
|
156
|
-
encoded = hashAlphabet.charAt(hash %
|
|
157
|
-
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);
|
|
158
161
|
}
|
|
159
162
|
return encoded;
|
|
160
163
|
}
|
package/esm/index.js
CHANGED
|
@@ -37,13 +37,14 @@ export function buildHooksSystem(stringify = String) {
|
|
|
37
37
|
catch {
|
|
38
38
|
// `process.env.NODE_ENV` is absent in unbundled browser environments
|
|
39
39
|
}
|
|
40
|
+
const selectorHashes = new Map(selectors.map(selector => [selector, createHash(selector)]));
|
|
40
41
|
return {
|
|
41
42
|
styleSheet() {
|
|
42
43
|
const indent = Array(2).fill(space).join("");
|
|
43
44
|
return `*${space}{${newline}${selectors
|
|
44
45
|
.flatMap(selector => [
|
|
45
|
-
`${indent}--${
|
|
46
|
-
`${indent}--${
|
|
46
|
+
`${indent}--${selectorHashes.get(selector)}0:${space}initial;`,
|
|
47
|
+
`${indent}--${selectorHashes.get(selector)}1:${space};`,
|
|
47
48
|
])
|
|
48
49
|
.join(newline)}${newline}}${newline}${selectors
|
|
49
50
|
.flatMap(def => {
|
|
@@ -51,16 +52,16 @@ export function buildHooksSystem(stringify = String) {
|
|
|
51
52
|
return [
|
|
52
53
|
`${def} {`,
|
|
53
54
|
`${indent}* {`,
|
|
54
|
-
`${indent}${indent}--${
|
|
55
|
-
`${indent}${indent}--${
|
|
55
|
+
`${indent}${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
56
|
+
`${indent}${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
56
57
|
`${indent}}`,
|
|
57
58
|
"}",
|
|
58
59
|
];
|
|
59
60
|
}
|
|
60
61
|
return [
|
|
61
62
|
`${def.replace(/&/g, "*")}${space}{`,
|
|
62
|
-
`${indent}--${
|
|
63
|
-
`${indent}--${
|
|
63
|
+
`${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
64
|
+
`${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
64
65
|
"}",
|
|
65
66
|
];
|
|
66
67
|
})
|
|
@@ -102,8 +103,9 @@ export function buildHooksSystem(stringify = String) {
|
|
|
102
103
|
extraDecls[`--${hash}`] = valFalse;
|
|
103
104
|
valFalse = `var(--${hash})`;
|
|
104
105
|
}
|
|
106
|
+
const selectorHash = selectorHashes.get(condition) || createHash(condition);
|
|
105
107
|
return [
|
|
106
|
-
`var(--${
|
|
108
|
+
`var(--${selectorHash}1,${space}${valTrue})${space}var(--${selectorHash}0,${space}${valFalse})`,
|
|
107
109
|
extraDecls,
|
|
108
110
|
];
|
|
109
111
|
}
|
|
@@ -132,7 +134,8 @@ export function buildHooksSystem(stringify = String) {
|
|
|
132
134
|
};
|
|
133
135
|
};
|
|
134
136
|
}
|
|
135
|
-
const hashAlphabet = "
|
|
137
|
+
const hashAlphabet = "abcdefghijklmnopqrstuvwxyz0123456789-_";
|
|
138
|
+
const hashAlphabetLength = hashAlphabet.length;
|
|
136
139
|
function createHash(value) {
|
|
137
140
|
let h1 = 0xdeadbeef;
|
|
138
141
|
let h2 = 0x41c6ce57;
|
|
@@ -149,9 +152,9 @@ function createHash(value) {
|
|
|
149
152
|
Math.imul(h1 ^ (h1 >>> 13), 0xc2b2ae35);
|
|
150
153
|
let hash = (h1 >>> 0) + 0x100000000 * (h2 & 0xf);
|
|
151
154
|
let encoded = "";
|
|
152
|
-
for (let i = 0; i <
|
|
153
|
-
encoded = hashAlphabet.charAt(hash %
|
|
154
|
-
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);
|
|
155
158
|
}
|
|
156
159
|
return encoded;
|
|
157
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<BaseCSSProperties, 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.
|