@css-hooks/core 4.0.0-next.4 → 4.0.0-next.6

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 (5) hide show
  1. package/README.md +5 -5
  2. package/cjs/index.js +9 -7
  3. package/esm/index.js +9 -7
  4. package/package.json +1 -1
  5. package/types/index.d.ts +5 -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.4/.github/logomark.svg" height="128" /></a><br/><br/>
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.6/.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/.github/wordmark-dark.svg" width="256"></a>
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.6/.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.4"><img src="https://img.shields.io/badge/tag-v4.0.0--next.4-ffd700" alt="tag v4.0.0-next.4"></a>
12
- <a href="https://www.npmjs.com/package/@css-hooks/core/v/4.0.0-next.4"><img src="https://img.shields.io/badge/npm-v4.0.0--next.4-ffd700" alt="npm version"></a>
13
- <a href="https://github.com/css-hooks/css-hooks/blob/v4.0.0-next.4/LICENSE"><img src="https://img.shields.io/badge/license-MIT-ffd700" alt="license"></a>
11
+ <a href="https://github.com/css-hooks/css-hooks/tree/v4.0.0-next.6"><img src="https://img.shields.io/badge/tag-v4.0.0--next.6-ffd700" alt="tag v4.0.0-next.6"></a>
12
+ <a href="https://www.npmjs.com/package/@css-hooks/core/v/4.0.0-next.6"><img src="https://img.shields.io/badge/npm-v4.0.0--next.6-ffd700" alt="npm version"></a>
13
+ <a href="https://github.com/css-hooks/css-hooks/blob/v4.0.0-next.6/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}--${createHash(selector)}0:${space}initial;`,
49
- `${indent}--${createHash(selector)}1:${space};`,
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}--${createHash(def)}0:${space};`,
58
- `${indent}${indent}--${createHash(def)}1:${space}initial;`,
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}--${createHash(def)}0:${space};`,
66
- `${indent}--${createHash(def)}1:${space}initial;`,
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(--${createHash(condition)}1,${space}${valTrue})${space}var(--${createHash(condition)}0,${space}${valFalse})`,
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}--${createHash(selector)}0:${space}initial;`,
46
- `${indent}--${createHash(selector)}1:${space};`,
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}--${createHash(def)}0:${space};`,
55
- `${indent}${indent}--${createHash(def)}1:${space}initial;`,
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}--${createHash(def)}0:${space};`,
63
- `${indent}--${createHash(def)}1:${space}initial;`,
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(--${createHash(condition)}1,${space}${valTrue})${space}var(--${createHash(condition)}0,${space}${valFalse})`,
108
+ `var(--${selectorHash}1,${space}${valTrue})${space}var(--${selectorHash}0,${space}${valFalse})`,
107
109
  extraDecls,
108
110
  ];
109
111
  }
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",
4
+ "version": "4.0.0-next.6",
5
5
  "author": "Nick Saunders",
6
6
  "devDependencies": {
7
7
  "color": "^5.0.3",
package/types/index.d.ts CHANGED
@@ -68,6 +68,10 @@ type CSSPropertyConflictKeys<CSSPropertyConflicts extends object, OverrideCSSPro
68
68
  type ForbidCSSPropertyConflicts<CSSPropertyConflicts extends object, OverrideCSSProperties> = {
69
69
  [P in CSSPropertyConflictKeys<CSSPropertyConflicts, OverrideCSSProperties>]?: never;
70
70
  };
71
+ /** Preserves a style's shape while replacing conflicting property values. */
72
+ type CSSPropertiesWithoutConflicts<CSSProperties, CSSPropertyConflicts extends object, OverrideCSSProperties> = {
73
+ [P in keyof CSSProperties]: P extends CSSPropertyConflictKeys<CSSPropertyConflicts, OverrideCSSProperties> ? never : CSSProperties[P];
74
+ } & ForbidCSSPropertyConflicts<CSSPropertyConflicts, OverrideCSSProperties>;
71
75
  /**
72
76
  * An object containing the functions needed to support and use the configured
73
77
  * hooks
@@ -85,7 +89,7 @@ export interface CreateHooksResult<S, CSSProperties, CSSPropertyConflicts extend
85
89
  * Creates a function that enhances a style object with conditional override
86
90
  * styles.
87
91
  */
88
- on: <OverrideCSSProperties extends CSSProperties, BaseCSSProperties extends Omit<CSSProperties, CSSPropertyConflictKeys<CSSPropertyConflicts, OverrideCSSProperties>>>(condition: Condition<S>, overrideStyle: OverrideCSSProperties) => (style: CSSProperties & BaseCSSProperties & ForbidCSSPropertyConflicts<CSSPropertyConflicts, OverrideCSSProperties>) => BaseCSSProperties & OverrideCSSProperties;
92
+ on: <OverrideCSSProperties extends CSSProperties, BaseCSSProperties extends Omit<CSSProperties, CSSPropertyConflictKeys<CSSPropertyConflicts, OverrideCSSProperties>>>(condition: Condition<S>, overrideStyle: OverrideCSSProperties) => (style: CSSPropertiesWithoutConflicts<CSSProperties & BaseCSSProperties, CSSPropertyConflicts, OverrideCSSProperties>) => BaseCSSProperties & OverrideCSSProperties;
89
93
  /**
90
94
  * Combines a list of conditions into a single condition which is true when
91
95
  * all of the specified conditions are true.