@css-hooks/core 0.6.0 → 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Nick Saunders
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+<p align="center">
+  <a href="https://css-hooks.com/#gh-dark-mode-only" target="_blank">
+    <img alt="CSS Hooks" src="https://raw.githubusercontent.com/css-hooks/css-hooks/HEAD/.github/logo-dark.svg" width="310" height="64" style="max-width: 100%;">
+  </a>
+  <a href="https://css-hooks.com/#gh-light-mode-only" target="_blank">
+    <img alt="CSS Hooks" src="https://raw.githubusercontent.com/css-hooks/css-hooks/HEAD/.github/logo-light.svg" width="310" height="64" style="max-width: 100%;">
+  </a>
+</p>
+
+<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/@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>
+
+---
+
+## Overview
+
+Hooks bring CSS features to native inline styles, enabling you to target various
+states such as hover, focus, and active, all without leaving the `style` prop.
+For example, hooks can easily solve the common use case of applying state-driven
+styles to a link:
+
+```jsx
+<a
+  href="https://css-hooks.com/"
+  style={hooks({
+    color: "#03f",
+    hover: {
+      color: "#09f",
+    },
+    active: {
+      color: "#e33",
+    },
+  })}
+>
+  Hooks
+</a>
+```
+
+Notably, the `hooks` function is pure. It simply returns a flat style object
+that is compatible with the `style` prop, creating dynamic property values that
+change under various conditions through CSS variables.
+
+## Documentation
+
+Please visit [css-hooks.com](https://css-hooks.com) to get started.
+
+## Packages
+
+- [@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)
+
+## Contributing
+
+Contributions are welcome. Please see the
+[contributing guidelines](CONTRIBUTING.md) for more information.
+
+## License
+
+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.6.0",
+  "version": "0.8.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";