@css-hooks/core 0.7.0 → 1.0.0

package/README.md

@@ -9,7 +9,7 @@
 
 <p align="center">
   <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>
-  <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>
+  <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>
   <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>
 </p>
 
@@ -49,11 +49,10 @@ Please visit [css-hooks.com](https://css-hooks.com) to get started.
 
 ## Packages
 
-- [hooks.css](packages/hooks.css): The style sheet that enables CSS Hooks
 - [@css-hooks/react](packages/react): React framework integration
 - [@css-hooks/solid](packages/solid): Solid framework integration
 - [@css-hooks/preact](packages/preact): Preact framework integration
-- [@css-hooks/core](packages/core): Core CSS Hooks package (internal use only)
+- [@css-hooks/core](packages/core): Core package (internal use only)
 
 ## Contributing
 
@@ -62,5 +61,4 @@ Contributions are welcome. Please see the
 
 ## License
 
-CSS Hooks is offered under the [MIT license](LICENSE) by
-[Nick Saunders](https://github.com/nsaunders).
+CSS Hooks is offered under the [MIT license](LICENSE).

package/cjs/index.js

@@ -1,6 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.recommended = exports.buildHooksSystem = void 0;
+function isHookSpec(x) {
+    if (!x) {
+        return false;
+    }
+    if (typeof x === "string") {
+        return (x.startsWith(":") ||
+            x.startsWith("@media ") ||
+            x.startsWith("@container ") ||
+            x.includes("&"));
+    }
+    if (typeof x === "object") {
+        if ("or" in x && x.or instanceof Array) {
+            return !x.or.some(xx => !isHookSpec(xx));
+        }
+    }
+    return false;
+}
 function buildHooksSystem(stringify) {
     return function createHooks(config) {
         const stringifyImpl = (propertyName, value) => {
@@ -57,20 +74,26 @@ function buildHooksSystem(stringify) {
                 "*{",
                 ...Object.keys(config).map(off),
                 "}",
-                ...Object.entries(config).map(([name, spec]) => {
-                    if (typeof spec !== "string") {
-                        return "";
+                ...Object.entries(config).flatMap(function render([name, spec]) {
+                    if (!isHookSpec(spec)) {
+                        return [];
+                    }
+                    if (typeof spec === "object") {
+                        if ("or" in spec) {
+                            return spec.or.flatMap(x => render.bind(this)([name, x]));
+                        }
+                        return [];
                     }
                     if (spec.includes("&")) {
-                        return `${spec.replace(/&/g, "*")}{${on(name)}}`;
+                        return [`${spec.replace(/&/g, "*")}{${on(name)}}`];
                     }
                     if (spec.startsWith(":")) {
-                        return `${spec}{${on(name)}}`;
+                        return [`${spec}{${on(name)}}`];
                     }
                     if (spec.startsWith("@")) {
-                        return `${spec}{*{${on(name)}}}`;
+                        return [`${spec}{*{${on(name)}}}`];
                     }
-                    return "";
+                    return [];
                 }),
             ].join(""),
             function hooks(properties) {
@@ -85,7 +108,7 @@ exports.buildHooksSystem = buildHooksSystem;
  */
 exports.recommended = {
     active: ":active",
-    autofill: ":autofill",
+    autofill: { or: [":autofill", ":-webkit-autofill"] },
     checked: ":checked",
     default: ":default",
     disabled: ":disabled",
@@ -107,9 +130,9 @@ exports.recommended = {
     onlyChild: ":only-child",
     onlyOfType: ":only-of-type",
     outOfRange: ":out-of-range",
-    placeholderShown: ":placeholder-shown",
-    readOnly: ":read-only",
-    readWrite: ":read-write",
+    placeholderShown: { or: [":placeholder-shown", ":-moz-placeholder-shown"] },
+    readOnly: { or: [":read-only", ":-moz-read-only"] },
+    readWrite: { or: [":read-write", ":-moz-read-write"] },
     required: ":required",
     target: ":target",
     valid: ":valid",

package/esm/index.js

@@ -1,3 +1,20 @@
+function isHookSpec(x) {
+    if (!x) {
+        return false;
+    }
+    if (typeof x === "string") {
+        return (x.startsWith(":") ||
+            x.startsWith("@media ") ||
+            x.startsWith("@container ") ||
+            x.includes("&"));
+    }
+    if (typeof x === "object") {
+        if ("or" in x && x.or instanceof Array) {
+            return !x.or.some(xx => !isHookSpec(xx));
+        }
+    }
+    return false;
+}
 export function buildHooksSystem(stringify) {
     return function createHooks(config) {
         const stringifyImpl = (propertyName, value) => {
@@ -54,20 +71,26 @@ export function buildHooksSystem(stringify) {
                 "*{",
                 ...Object.keys(config).map(off),
                 "}",
-                ...Object.entries(config).map(([name, spec]) => {
-                    if (typeof spec !== "string") {
-                        return "";
+                ...Object.entries(config).flatMap(function render([name, spec]) {
+                    if (!isHookSpec(spec)) {
+                        return [];
+                    }
+                    if (typeof spec === "object") {
+                        if ("or" in spec) {
+                            return spec.or.flatMap(x => render.bind(this)([name, x]));
+                        }
+                        return [];
                     }
                     if (spec.includes("&")) {
-                        return `${spec.replace(/&/g, "*")}{${on(name)}}`;
+                        return [`${spec.replace(/&/g, "*")}{${on(name)}}`];
                     }
                     if (spec.startsWith(":")) {
-                        return `${spec}{${on(name)}}`;
+                        return [`${spec}{${on(name)}}`];
                     }
                     if (spec.startsWith("@")) {
-                        return `${spec}{*{${on(name)}}}`;
+                        return [`${spec}{*{${on(name)}}}`];
                     }
-                    return "";
+                    return [];
                 }),
             ].join(""),
             function hooks(properties) {
@@ -81,7 +104,7 @@ export function buildHooksSystem(stringify) {
  */
 export const recommended = {
     active: ":active",
-    autofill: ":autofill",
+    autofill: { or: [":autofill", ":-webkit-autofill"] },
     checked: ":checked",
     default: ":default",
     disabled: ":disabled",
@@ -103,9 +126,9 @@ export const recommended = {
     onlyChild: ":only-child",
     onlyOfType: ":only-of-type",
     outOfRange: ":out-of-range",
-    placeholderShown: ":placeholder-shown",
-    readOnly: ":read-only",
-    readWrite: ":read-write",
+    placeholderShown: { or: [":placeholder-shown", ":-moz-placeholder-shown"] },
+    readOnly: { or: [":read-only", ":-moz-read-only"] },
+    readWrite: { or: [":read-write", ":-moz-read-write"] },
     required: ":required",
     target: ":target",
     valid: ":valid",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@css-hooks/core",
   "description": "CSS Hooks core library",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "author": "Nick Saunders",
   "devDependencies": {
     "@tsconfig/node-lts": "^18.12.3",

package/types/index.d.ts

@@ -1,5 +1,7 @@
 type UnionToIntersection<T> = (T extends any ? (t: T) => any : never) extends (t: infer U) => any ? U : never;
-type HookSpec = `@${"media" | "container"} ${string}` | `:${string}` | `${string}&${string}`;
+type HookSpec = `@${"media" | "container"} ${string}` | `:${string}` | `${string}&${string}` | {
+    or: Readonly<(HookSpec & string)[]>;
+};
 export type WithHooks<HookProperties, Properties> = WithHooksImpl<Properties, HookProperties>;
 type WithHooksImpl<Properties, HookProperties, HookPropertiesSub extends HookProperties = HookProperties> = Properties & Partial<UnionToIntersection<HookPropertiesSub extends string ? {
     [K in HookPropertiesSub]: WithHooksImpl<Properties, Exclude<HookProperties, HookPropertiesSub>>;
@@ -10,7 +12,9 @@ export declare function buildHooksSystem<Properties>(stringify: (propertyName: k
  */
 export declare const recommended: {
     readonly active: ":active";
-    readonly autofill: ":autofill";
+    readonly autofill: {
+        readonly or: readonly [":autofill", ":-webkit-autofill"];
+    };
     readonly checked: ":checked";
     readonly default: ":default";
     readonly disabled: ":disabled";
@@ -32,9 +36,15 @@ export declare const recommended: {
     readonly onlyChild: ":only-child";
     readonly onlyOfType: ":only-of-type";
     readonly outOfRange: ":out-of-range";
-    readonly placeholderShown: ":placeholder-shown";
-    readonly readOnly: ":read-only";
-    readonly readWrite: ":read-write";
+    readonly placeholderShown: {
+        readonly or: readonly [":placeholder-shown", ":-moz-placeholder-shown"];
+    };
+    readonly readOnly: {
+        readonly or: readonly [":read-only", ":-moz-read-only"];
+    };
+    readonly readWrite: {
+        readonly or: readonly [":read-write", ":-moz-read-write"];
+    };
     readonly required: ":required";
     readonly target: ":target";
     readonly valid: ":valid";