@css-hooks/core 4.0.0-next.5 → 4.0.0-next.7
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 +9 -7
- package/esm/index.js +9 -7
- package/package.json +1 -1
- package/types/index.d.ts +1 -1
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.7/.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.7/.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.7"><img src="https://img.shields.io/badge/tag-v4.0.0--next.7-ffd700" alt="tag v4.0.0-next.7"></a>
|
|
12
|
+
<a href="https://www.npmjs.com/package/@css-hooks/core/v/4.0.0-next.7"><img src="https://img.shields.io/badge/npm-v4.0.0--next.7-ffd700" alt="npm version"></a>
|
|
13
|
+
<a href="https://github.com/css-hooks/css-hooks/blob/v4.0.0-next.7/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
|
}
|
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
|
}
|
package/package.json
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -89,7 +89,7 @@ export interface CreateHooksResult<S, CSSProperties, CSSPropertyConflicts extend
|
|
|
89
89
|
* Creates a function that enhances a style object with conditional override
|
|
90
90
|
* styles.
|
|
91
91
|
*/
|
|
92
|
-
on: <OverrideCSSProperties extends CSSProperties, BaseCSSProperties extends
|
|
92
|
+
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;
|
|
93
93
|
/**
|
|
94
94
|
* Combines a list of conditions into a single condition which is true when
|
|
95
95
|
* all of the specified conditions are true.
|