@css-hooks/core 4.0.0-next.3 → 4.0.0-next.30
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 +44 -11
- package/cjs/package.json +1 -0
- package/esm/index.js +43 -11
- package/package.json +5 -4
- package/types/index.d.ts +20 -12
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.30/.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.30/.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.30"><img src="https://img.shields.io/badge/tag-v4.0.0--next.30-ffd700" alt="tag v4.0.0-next.30"></a>
|
|
12
|
+
<a href="https://www.npmjs.com/package/@css-hooks/core/v/4.0.0-next.30"><img src="https://img.shields.io/badge/npm-v4.0.0--next.30-ffd700" alt="npm version"></a>
|
|
13
|
+
<a href="https://github.com/css-hooks/css-hooks/blob/v4.0.0-next.30/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
|
@@ -5,7 +5,37 @@
|
|
|
5
5
|
* @packageDocumentation
|
|
6
6
|
*/
|
|
7
7
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
8
|
+
exports.mergeStyles = mergeStyles;
|
|
8
9
|
exports.buildHooksSystem = buildHooksSystem;
|
|
10
|
+
/**
|
|
11
|
+
* Merges an override style prop into a base style.
|
|
12
|
+
*
|
|
13
|
+
* @remarks
|
|
14
|
+
* Override properties are moved to the end of the resulting object so their
|
|
15
|
+
* declaration order takes precedence over properties in the base style.
|
|
16
|
+
*
|
|
17
|
+
* @typeParam OverrideStyle - The type of the override style prop
|
|
18
|
+
*
|
|
19
|
+
* @param overrideStyle - The style whose properties should take precedence
|
|
20
|
+
*
|
|
21
|
+
* @returns A curried function that merges `overrideStyle` with a base style
|
|
22
|
+
*
|
|
23
|
+
* @public
|
|
24
|
+
*/
|
|
25
|
+
function mergeStyles(overrideStyle) {
|
|
26
|
+
return (style) => {
|
|
27
|
+
if (!overrideStyle) {
|
|
28
|
+
return style;
|
|
29
|
+
}
|
|
30
|
+
const result = { ...style };
|
|
31
|
+
for (const property of Reflect.ownKeys(overrideStyle)) {
|
|
32
|
+
if (Object.prototype.propertyIsEnumerable.call(overrideStyle, property)) {
|
|
33
|
+
Reflect.deleteProperty(result, property);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
return Object.assign(result, overrideStyle);
|
|
37
|
+
};
|
|
38
|
+
}
|
|
9
39
|
/**
|
|
10
40
|
* Creates a flavor of CSS Hooks tailored to a specific app framework.
|
|
11
41
|
*
|
|
@@ -40,13 +70,14 @@ function buildHooksSystem(stringify = String) {
|
|
|
40
70
|
catch {
|
|
41
71
|
// `process.env.NODE_ENV` is absent in unbundled browser environments
|
|
42
72
|
}
|
|
73
|
+
const selectorHashes = new Map(selectors.map(selector => [selector, createHash(selector)]));
|
|
43
74
|
return {
|
|
44
75
|
styleSheet() {
|
|
45
76
|
const indent = Array(2).fill(space).join("");
|
|
46
77
|
return `*${space}{${newline}${selectors
|
|
47
78
|
.flatMap(selector => [
|
|
48
|
-
`${indent}--${
|
|
49
|
-
`${indent}--${
|
|
79
|
+
`${indent}--${selectorHashes.get(selector)}0:${space}initial;`,
|
|
80
|
+
`${indent}--${selectorHashes.get(selector)}1:${space};`,
|
|
50
81
|
])
|
|
51
82
|
.join(newline)}${newline}}${newline}${selectors
|
|
52
83
|
.flatMap(def => {
|
|
@@ -54,16 +85,16 @@ function buildHooksSystem(stringify = String) {
|
|
|
54
85
|
return [
|
|
55
86
|
`${def} {`,
|
|
56
87
|
`${indent}* {`,
|
|
57
|
-
`${indent}${indent}--${
|
|
58
|
-
`${indent}${indent}--${
|
|
88
|
+
`${indent}${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
89
|
+
`${indent}${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
59
90
|
`${indent}}`,
|
|
60
91
|
"}",
|
|
61
92
|
];
|
|
62
93
|
}
|
|
63
94
|
return [
|
|
64
95
|
`${def.replace(/&/g, "*")}${space}{`,
|
|
65
|
-
`${indent}--${
|
|
66
|
-
`${indent}--${
|
|
96
|
+
`${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
97
|
+
`${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
67
98
|
"}",
|
|
68
99
|
];
|
|
69
100
|
})
|
|
@@ -105,8 +136,9 @@ function buildHooksSystem(stringify = String) {
|
|
|
105
136
|
extraDecls[`--${hash}`] = valFalse;
|
|
106
137
|
valFalse = `var(--${hash})`;
|
|
107
138
|
}
|
|
139
|
+
const selectorHash = selectorHashes.get(condition) || createHash(condition);
|
|
108
140
|
return [
|
|
109
|
-
`var(--${
|
|
141
|
+
`var(--${selectorHash}1,${space}${valTrue})${space}var(--${selectorHash}0,${space}${valFalse})`,
|
|
110
142
|
extraDecls,
|
|
111
143
|
];
|
|
112
144
|
}
|
|
@@ -135,7 +167,8 @@ function buildHooksSystem(stringify = String) {
|
|
|
135
167
|
};
|
|
136
168
|
};
|
|
137
169
|
}
|
|
138
|
-
const hashAlphabet = "
|
|
170
|
+
const hashAlphabet = "abcdefghijklmnopqrstuvwxyz0123456789-_";
|
|
171
|
+
const hashAlphabetLength = hashAlphabet.length;
|
|
139
172
|
function createHash(value) {
|
|
140
173
|
let h1 = 0xdeadbeef;
|
|
141
174
|
let h2 = 0x41c6ce57;
|
|
@@ -152,9 +185,9 @@ function createHash(value) {
|
|
|
152
185
|
Math.imul(h1 ^ (h1 >>> 13), 0xc2b2ae35);
|
|
153
186
|
let hash = (h1 >>> 0) + 0x100000000 * (h2 & 0xf);
|
|
154
187
|
let encoded = "";
|
|
155
|
-
for (let i = 0; i <
|
|
156
|
-
encoded = hashAlphabet.charAt(hash %
|
|
157
|
-
hash = Math.floor(hash /
|
|
188
|
+
for (let i = 0; i < 7; i++) {
|
|
189
|
+
encoded = hashAlphabet.charAt(hash % hashAlphabetLength) + encoded;
|
|
190
|
+
hash = Math.floor(hash / hashAlphabetLength);
|
|
158
191
|
}
|
|
159
192
|
return encoded;
|
|
160
193
|
}
|
package/cjs/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"commonjs"}
|
package/esm/index.js
CHANGED
|
@@ -3,6 +3,35 @@
|
|
|
3
3
|
*
|
|
4
4
|
* @packageDocumentation
|
|
5
5
|
*/
|
|
6
|
+
/**
|
|
7
|
+
* Merges an override style prop into a base style.
|
|
8
|
+
*
|
|
9
|
+
* @remarks
|
|
10
|
+
* Override properties are moved to the end of the resulting object so their
|
|
11
|
+
* declaration order takes precedence over properties in the base style.
|
|
12
|
+
*
|
|
13
|
+
* @typeParam OverrideStyle - The type of the override style prop
|
|
14
|
+
*
|
|
15
|
+
* @param overrideStyle - The style whose properties should take precedence
|
|
16
|
+
*
|
|
17
|
+
* @returns A curried function that merges `overrideStyle` with a base style
|
|
18
|
+
*
|
|
19
|
+
* @public
|
|
20
|
+
*/
|
|
21
|
+
export function mergeStyles(overrideStyle) {
|
|
22
|
+
return (style) => {
|
|
23
|
+
if (!overrideStyle) {
|
|
24
|
+
return style;
|
|
25
|
+
}
|
|
26
|
+
const result = { ...style };
|
|
27
|
+
for (const property of Reflect.ownKeys(overrideStyle)) {
|
|
28
|
+
if (Object.prototype.propertyIsEnumerable.call(overrideStyle, property)) {
|
|
29
|
+
Reflect.deleteProperty(result, property);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return Object.assign(result, overrideStyle);
|
|
33
|
+
};
|
|
34
|
+
}
|
|
6
35
|
/**
|
|
7
36
|
* Creates a flavor of CSS Hooks tailored to a specific app framework.
|
|
8
37
|
*
|
|
@@ -37,13 +66,14 @@ export function buildHooksSystem(stringify = String) {
|
|
|
37
66
|
catch {
|
|
38
67
|
// `process.env.NODE_ENV` is absent in unbundled browser environments
|
|
39
68
|
}
|
|
69
|
+
const selectorHashes = new Map(selectors.map(selector => [selector, createHash(selector)]));
|
|
40
70
|
return {
|
|
41
71
|
styleSheet() {
|
|
42
72
|
const indent = Array(2).fill(space).join("");
|
|
43
73
|
return `*${space}{${newline}${selectors
|
|
44
74
|
.flatMap(selector => [
|
|
45
|
-
`${indent}--${
|
|
46
|
-
`${indent}--${
|
|
75
|
+
`${indent}--${selectorHashes.get(selector)}0:${space}initial;`,
|
|
76
|
+
`${indent}--${selectorHashes.get(selector)}1:${space};`,
|
|
47
77
|
])
|
|
48
78
|
.join(newline)}${newline}}${newline}${selectors
|
|
49
79
|
.flatMap(def => {
|
|
@@ -51,16 +81,16 @@ export function buildHooksSystem(stringify = String) {
|
|
|
51
81
|
return [
|
|
52
82
|
`${def} {`,
|
|
53
83
|
`${indent}* {`,
|
|
54
|
-
`${indent}${indent}--${
|
|
55
|
-
`${indent}${indent}--${
|
|
84
|
+
`${indent}${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
85
|
+
`${indent}${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
56
86
|
`${indent}}`,
|
|
57
87
|
"}",
|
|
58
88
|
];
|
|
59
89
|
}
|
|
60
90
|
return [
|
|
61
91
|
`${def.replace(/&/g, "*")}${space}{`,
|
|
62
|
-
`${indent}--${
|
|
63
|
-
`${indent}--${
|
|
92
|
+
`${indent}--${selectorHashes.get(def)}0:${space};`,
|
|
93
|
+
`${indent}--${selectorHashes.get(def)}1:${space}initial;`,
|
|
64
94
|
"}",
|
|
65
95
|
];
|
|
66
96
|
})
|
|
@@ -102,8 +132,9 @@ export function buildHooksSystem(stringify = String) {
|
|
|
102
132
|
extraDecls[`--${hash}`] = valFalse;
|
|
103
133
|
valFalse = `var(--${hash})`;
|
|
104
134
|
}
|
|
135
|
+
const selectorHash = selectorHashes.get(condition) || createHash(condition);
|
|
105
136
|
return [
|
|
106
|
-
`var(--${
|
|
137
|
+
`var(--${selectorHash}1,${space}${valTrue})${space}var(--${selectorHash}0,${space}${valFalse})`,
|
|
107
138
|
extraDecls,
|
|
108
139
|
];
|
|
109
140
|
}
|
|
@@ -132,7 +163,8 @@ export function buildHooksSystem(stringify = String) {
|
|
|
132
163
|
};
|
|
133
164
|
};
|
|
134
165
|
}
|
|
135
|
-
const hashAlphabet = "
|
|
166
|
+
const hashAlphabet = "abcdefghijklmnopqrstuvwxyz0123456789-_";
|
|
167
|
+
const hashAlphabetLength = hashAlphabet.length;
|
|
136
168
|
function createHash(value) {
|
|
137
169
|
let h1 = 0xdeadbeef;
|
|
138
170
|
let h2 = 0x41c6ce57;
|
|
@@ -149,9 +181,9 @@ function createHash(value) {
|
|
|
149
181
|
Math.imul(h1 ^ (h1 >>> 13), 0xc2b2ae35);
|
|
150
182
|
let hash = (h1 >>> 0) + 0x100000000 * (h2 & 0xf);
|
|
151
183
|
let encoded = "";
|
|
152
|
-
for (let i = 0; i <
|
|
153
|
-
encoded = hashAlphabet.charAt(hash %
|
|
154
|
-
hash = Math.floor(hash /
|
|
184
|
+
for (let i = 0; i < 7; i++) {
|
|
185
|
+
encoded = hashAlphabet.charAt(hash % hashAlphabetLength) + encoded;
|
|
186
|
+
hash = Math.floor(hash / hashAlphabetLength);
|
|
155
187
|
}
|
|
156
188
|
return encoded;
|
|
157
189
|
}
|
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": "4.0.0-next.
|
|
4
|
+
"version": "4.0.0-next.30",
|
|
5
5
|
"author": "Nick Saunders",
|
|
6
6
|
"devDependencies": {
|
|
7
7
|
"color": "^5.0.3",
|
|
@@ -18,9 +18,10 @@
|
|
|
18
18
|
"!**/*.test.*"
|
|
19
19
|
],
|
|
20
20
|
"license": "MIT",
|
|
21
|
-
"main": "cjs",
|
|
22
|
-
"module": "esm",
|
|
21
|
+
"main": "./cjs/index.js",
|
|
22
|
+
"module": "./esm/index.js",
|
|
23
23
|
"type": "module",
|
|
24
|
+
"sideEffects": false,
|
|
24
25
|
"private": false,
|
|
25
26
|
"repository": {
|
|
26
27
|
"type": "git",
|
|
@@ -40,7 +41,7 @@
|
|
|
40
41
|
]
|
|
41
42
|
},
|
|
42
43
|
"build": {
|
|
43
|
-
"command": "tsc && tsc --project tsconfig.cjs.json"
|
|
44
|
+
"command": "tsc && tsc --project tsconfig.cjs.json && node -e \"require('node:fs').writeFileSync('cjs/package.json', JSON.stringify({type:'commonjs'}))\""
|
|
44
45
|
},
|
|
45
46
|
"prepublishOnly": {
|
|
46
47
|
"dependencies": [
|
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
|
|
@@ -85,7 +77,7 @@ export interface CreateHooksResult<S, CSSProperties, CSSPropertyConflicts extend
|
|
|
85
77
|
* Creates a function that enhances a style object with conditional override
|
|
86
78
|
* styles.
|
|
87
79
|
*/
|
|
88
|
-
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;
|
|
89
81
|
/**
|
|
90
82
|
* Combines a list of conditions into a single condition which is true when
|
|
91
83
|
* all of the specified conditions are true.
|
|
@@ -152,6 +144,22 @@ export interface CreateHooksResult<S, CSSProperties, CSSPropertyConflicts extend
|
|
|
152
144
|
* @public
|
|
153
145
|
*/
|
|
154
146
|
export type CreateHooksFn<CSSProperties, CSSPropertyConflicts extends object = object> = <S extends Selector>(...selectors: S[]) => CreateHooksResult<S, CSSProperties, CSSPropertyConflicts>;
|
|
147
|
+
/**
|
|
148
|
+
* Merges an override style prop into a base style.
|
|
149
|
+
*
|
|
150
|
+
* @remarks
|
|
151
|
+
* Override properties are moved to the end of the resulting object so their
|
|
152
|
+
* declaration order takes precedence over properties in the base style.
|
|
153
|
+
*
|
|
154
|
+
* @typeParam OverrideStyle - The type of the override style prop
|
|
155
|
+
*
|
|
156
|
+
* @param overrideStyle - The style whose properties should take precedence
|
|
157
|
+
*
|
|
158
|
+
* @returns A curried function that merges `overrideStyle` with a base style
|
|
159
|
+
*
|
|
160
|
+
* @public
|
|
161
|
+
*/
|
|
162
|
+
export declare function mergeStyles<const OverrideStyle extends object>(overrideStyle: OverrideStyle | null | undefined): <Style extends object>(style: Style) => Omit<Style, keyof OverrideStyle> & OverrideStyle;
|
|
155
163
|
/**
|
|
156
164
|
* Creates a flavor of CSS Hooks tailored to a specific app framework.
|
|
157
165
|
*
|