@css-hooks/core 0.7.0 → 0.8.0

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 +2 -4
  2. package/cjs/index.js +34 -11
  3. package/esm/index.js +34 -11
  4. package/package.json +1 -1
  5. package/types/index.d.ts +15 -5
package/README.md CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  <p align="center">
11
11
  <a href="https://github.com/css-hooks/css-hooks/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/css-hooks/css-hooks/ci.yml?branch=master" alt="Build Status"></a>
12
- <a href="https://github.com/css-hooks/css-hooks/releases"><img src="https://img.shields.io/npm/v/hooks.css.svg" alt="Latest Release"></a>
12
+ <a href="https://github.com/css-hooks/css-hooks/releases"><img src="https://img.shields.io/npm/v/@css-hooks%2Fcore.svg" alt="Latest Release"></a>
13
13
  <a href="https://github.com/css-hooks/css-hooks/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/css-hooks.svg" alt="License"></a>
14
14
  </p>
15
15
 
@@ -49,7 +49,6 @@ Please visit [css-hooks.com](https://css-hooks.com) to get started.
49
49
 
50
50
  ## Packages
51
51
 
52
- - [hooks.css](packages/hooks.css): The style sheet that enables CSS Hooks
53
52
  - [@css-hooks/react](packages/react): React framework integration
54
53
  - [@css-hooks/solid](packages/solid): Solid framework integration
55
54
  - [@css-hooks/preact](packages/preact): Preact framework integration
@@ -62,5 +61,4 @@ Contributions are welcome. Please see the
62
61
 
63
62
  ## License
64
63
 
65
- CSS Hooks is offered under the [MIT license](LICENSE) by
66
- [Nick Saunders](https://github.com/nsaunders).
64
+ CSS Hooks is offered under the [MIT license](LICENSE).
package/cjs/index.js CHANGED
@@ -1,6 +1,23 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.recommended = exports.buildHooksSystem = void 0;
4
+ function isHookSpec(x) {
5
+ if (!x) {
6
+ return false;
7
+ }
8
+ if (typeof x === "string") {
9
+ return (x.startsWith(":") ||
10
+ x.startsWith("@media ") ||
11
+ x.startsWith("@container ") ||
12
+ x.includes("&"));
13
+ }
14
+ if (typeof x === "object") {
15
+ if ("or" in x && x.or instanceof Array) {
16
+ return !x.or.some(xx => !isHookSpec(xx));
17
+ }
18
+ }
19
+ return false;
20
+ }
4
21
  function buildHooksSystem(stringify) {
5
22
  return function createHooks(config) {
6
23
  const stringifyImpl = (propertyName, value) => {
@@ -57,20 +74,26 @@ function buildHooksSystem(stringify) {
57
74
  "*{",
58
75
  ...Object.keys(config).map(off),
59
76
  "}",
60
- ...Object.entries(config).map(([name, spec]) => {
61
- if (typeof spec !== "string") {
62
- return "";
77
+ ...Object.entries(config).flatMap(function render([name, spec]) {
78
+ if (!isHookSpec(spec)) {
79
+ return [];
80
+ }
81
+ if (typeof spec === "object") {
82
+ if ("or" in spec) {
83
+ return spec.or.flatMap(x => render.bind(this)([name, x]));
84
+ }
85
+ return [];
63
86
  }
64
87
  if (spec.includes("&")) {
65
- return `${spec.replace(/&/g, "*")}{${on(name)}}`;
88
+ return [`${spec.replace(/&/g, "*")}{${on(name)}}`];
66
89
  }
67
90
  if (spec.startsWith(":")) {
68
- return `${spec}{${on(name)}}`;
91
+ return [`${spec}{${on(name)}}`];
69
92
  }
70
93
  if (spec.startsWith("@")) {
71
- return `${spec}{*{${on(name)}}}`;
94
+ return [`${spec}{*{${on(name)}}}`];
72
95
  }
73
- return "";
96
+ return [];
74
97
  }),
75
98
  ].join(""),
76
99
  function hooks(properties) {
@@ -85,7 +108,7 @@ exports.buildHooksSystem = buildHooksSystem;
85
108
  */
86
109
  exports.recommended = {
87
110
  active: ":active",
88
- autofill: ":autofill",
111
+ autofill: { or: [":autofill", ":-webkit-autofill"] },
89
112
  checked: ":checked",
90
113
  default: ":default",
91
114
  disabled: ":disabled",
@@ -107,9 +130,9 @@ exports.recommended = {
107
130
  onlyChild: ":only-child",
108
131
  onlyOfType: ":only-of-type",
109
132
  outOfRange: ":out-of-range",
110
- placeholderShown: ":placeholder-shown",
111
- readOnly: ":read-only",
112
- readWrite: ":read-write",
133
+ placeholderShown: { or: [":placeholder-shown", ":-moz-placeholder-shown"] },
134
+ readOnly: { or: [":read-only", ":-moz-read-only"] },
135
+ readWrite: { or: [":read-write", ":-moz-read-write"] },
113
136
  required: ":required",
114
137
  target: ":target",
115
138
  valid: ":valid",
package/esm/index.js CHANGED
@@ -1,3 +1,20 @@
1
+ function isHookSpec(x) {
2
+ if (!x) {
3
+ return false;
4
+ }
5
+ if (typeof x === "string") {
6
+ return (x.startsWith(":") ||
7
+ x.startsWith("@media ") ||
8
+ x.startsWith("@container ") ||
9
+ x.includes("&"));
10
+ }
11
+ if (typeof x === "object") {
12
+ if ("or" in x && x.or instanceof Array) {
13
+ return !x.or.some(xx => !isHookSpec(xx));
14
+ }
15
+ }
16
+ return false;
17
+ }
1
18
  export function buildHooksSystem(stringify) {
2
19
  return function createHooks(config) {
3
20
  const stringifyImpl = (propertyName, value) => {
@@ -54,20 +71,26 @@ export function buildHooksSystem(stringify) {
54
71
  "*{",
55
72
  ...Object.keys(config).map(off),
56
73
  "}",
57
- ...Object.entries(config).map(([name, spec]) => {
58
- if (typeof spec !== "string") {
59
- return "";
74
+ ...Object.entries(config).flatMap(function render([name, spec]) {
75
+ if (!isHookSpec(spec)) {
76
+ return [];
77
+ }
78
+ if (typeof spec === "object") {
79
+ if ("or" in spec) {
80
+ return spec.or.flatMap(x => render.bind(this)([name, x]));
81
+ }
82
+ return [];
60
83
  }
61
84
  if (spec.includes("&")) {
62
- return `${spec.replace(/&/g, "*")}{${on(name)}}`;
85
+ return [`${spec.replace(/&/g, "*")}{${on(name)}}`];
63
86
  }
64
87
  if (spec.startsWith(":")) {
65
- return `${spec}{${on(name)}}`;
88
+ return [`${spec}{${on(name)}}`];
66
89
  }
67
90
  if (spec.startsWith("@")) {
68
- return `${spec}{*{${on(name)}}}`;
91
+ return [`${spec}{*{${on(name)}}}`];
69
92
  }
70
- return "";
93
+ return [];
71
94
  }),
72
95
  ].join(""),
73
96
  function hooks(properties) {
@@ -81,7 +104,7 @@ export function buildHooksSystem(stringify) {
81
104
  */
82
105
  export const recommended = {
83
106
  active: ":active",
84
- autofill: ":autofill",
107
+ autofill: { or: [":autofill", ":-webkit-autofill"] },
85
108
  checked: ":checked",
86
109
  default: ":default",
87
110
  disabled: ":disabled",
@@ -103,9 +126,9 @@ export const recommended = {
103
126
  onlyChild: ":only-child",
104
127
  onlyOfType: ":only-of-type",
105
128
  outOfRange: ":out-of-range",
106
- placeholderShown: ":placeholder-shown",
107
- readOnly: ":read-only",
108
- readWrite: ":read-write",
129
+ placeholderShown: { or: [":placeholder-shown", ":-moz-placeholder-shown"] },
130
+ readOnly: { or: [":read-only", ":-moz-read-only"] },
131
+ readWrite: { or: [":read-write", ":-moz-read-write"] },
109
132
  required: ":required",
110
133
  target: ":target",
111
134
  valid: ":valid",
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": "0.7.0",
4
+ "version": "0.8.0",
5
5
  "author": "Nick Saunders",
6
6
  "devDependencies": {
7
7
  "@tsconfig/node-lts": "^18.12.3",
package/types/index.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  type UnionToIntersection<T> = (T extends any ? (t: T) => any : never) extends (t: infer U) => any ? U : never;
2
- type HookSpec = `@${"media" | "container"} ${string}` | `:${string}` | `${string}&${string}`;
2
+ type HookSpec = `@${"media" | "container"} ${string}` | `:${string}` | `${string}&${string}` | {
3
+ or: Readonly<(HookSpec & string)[]>;
4
+ };
3
5
  export type WithHooks<HookProperties, Properties> = WithHooksImpl<Properties, HookProperties>;
4
6
  type WithHooksImpl<Properties, HookProperties, HookPropertiesSub extends HookProperties = HookProperties> = Properties & Partial<UnionToIntersection<HookPropertiesSub extends string ? {
5
7
  [K in HookPropertiesSub]: WithHooksImpl<Properties, Exclude<HookProperties, HookPropertiesSub>>;
@@ -10,7 +12,9 @@ export declare function buildHooksSystem<Properties>(stringify: (propertyName: k
10
12
  */
11
13
  export declare const recommended: {
12
14
  readonly active: ":active";
13
- readonly autofill: ":autofill";
15
+ readonly autofill: {
16
+ readonly or: readonly [":autofill", ":-webkit-autofill"];
17
+ };
14
18
  readonly checked: ":checked";
15
19
  readonly default: ":default";
16
20
  readonly disabled: ":disabled";
@@ -32,9 +36,15 @@ export declare const recommended: {
32
36
  readonly onlyChild: ":only-child";
33
37
  readonly onlyOfType: ":only-of-type";
34
38
  readonly outOfRange: ":out-of-range";
35
- readonly placeholderShown: ":placeholder-shown";
36
- readonly readOnly: ":read-only";
37
- readonly readWrite: ":read-write";
39
+ readonly placeholderShown: {
40
+ readonly or: readonly [":placeholder-shown", ":-moz-placeholder-shown"];
41
+ };
42
+ readonly readOnly: {
43
+ readonly or: readonly [":read-only", ":-moz-read-only"];
44
+ };
45
+ readonly readWrite: {
46
+ readonly or: readonly [":read-write", ":-moz-read-write"];
47
+ };
38
48
  readonly required: ":required";
39
49
  readonly target: ":target";
40
50
  readonly valid: ":valid";