@css-hooks/preact 0.6.0

package/cjs/index.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recommended = exports.createHooks = exports.stringifyValue = void 0;
+const core_1 = require("@css-hooks/core");
+Object.defineProperty(exports, "recommended", { enumerable: true, get: function () { return core_1.recommended; } });
+/**
+ * @remarks
+ * Sourced from
+ * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/constants.js#L3-L4 | Preact}.
+ */
+const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+/**
+ * @internal
+ *
+ * @remarks
+ * This should align with
+ * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/diff/props.js#L36-L46 | Preact's algorithm}.
+ */
+function stringifyValue(propertyName, value) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (typeof value === "number") {
+        return `${value}${typeof propertyName === "string" && IS_NON_DIMENSIONAL.test(propertyName)
+            ? ""
+            : "px"}`;
+    }
+    return null;
+}
+exports.stringifyValue = stringifyValue;
+/**
+ * Creates the hooks specified in the configuration.
+ *
+ * @param config - The hooks to build
+ *
+ * @returns The CSS required to enable the configured hooks, along with the corresponding `hooks` function for use in components.
+ */
+exports.createHooks = (0, core_1.buildHooksSystem)(stringifyValue);

package/esm/index.js

@@ -0,0 +1,34 @@
+import { buildHooksSystem, recommended } from "@css-hooks/core";
+/**
+ * @remarks
+ * Sourced from
+ * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/constants.js#L3-L4 | Preact}.
+ */
+const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+/**
+ * @internal
+ *
+ * @remarks
+ * This should align with
+ * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/diff/props.js#L36-L46 | Preact's algorithm}.
+ */
+export function stringifyValue(propertyName, value) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (typeof value === "number") {
+        return `${value}${typeof propertyName === "string" && IS_NON_DIMENSIONAL.test(propertyName)
+            ? ""
+            : "px"}`;
+    }
+    return null;
+}
+/**
+ * Creates the hooks specified in the configuration.
+ *
+ * @param config - The hooks to build
+ *
+ * @returns The CSS required to enable the configured hooks, along with the corresponding `hooks` function for use in components.
+ */
+export const createHooks = buildHooksSystem(stringifyValue);
+export { recommended };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@css-hooks/preact",
+  "description": "CSS Hooks for Preact",
+  "version": "0.6.0",
+  "author": "Nick Saunders",
+  "dependencies": {
+    "@css-hooks/core": "^0.6.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node-lts": "^18.12.3",
+    "@tsconfig/strictest": "^2.0.1",
+    "@types/jest": "^29.5.3",
+    "jest": "^29.6.2",
+    "preact": ">=10.0.0 <11.0.0",
+    "rimraf": "^5.0.1",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "types"
+  ],
+  "license": "MIT",
+  "main": "cjs",
+  "module": "esm",
+  "peerDependencies": {
+    "preact": ">=10.0.0 <11.0.0"
+  },
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/css-hooks/css-hooks.git",
+    "directory": "packages/preact"
+  },
+  "scripts": {
+    "clean": "rimraf cjs esm types",
+    "lint": "eslint __tests__ src .*.*js *.*js",
+    "postversion": "npm install @css-hooks/core@^$npm_package_version --force",
+    "prepublishOnly": "tsc -p tsconfig.dist.json --outDir cjs --module commonjs && tsc -p tsconfig.dist.json --outDir esm --module es6 && tsc -p tsconfig.dist.json --declaration --emitDeclarationOnly --outDir types",
+    "test": "jest"
+  },
+  "types": "types"
+}

package/types/index.d.ts

@@ -0,0 +1,29 @@
+import type { JSX } from "preact";
+import { recommended } from "@css-hooks/core";
+/**
+ * @internal
+ *
+ * @remarks
+ * The type we really want is {@link JSX.CSSProperties}. However, that type
+ * enforces a flat structure that is incompatible with hooks.
+ */
+export type CSSProperties = JSX.DOMCSSProperties & {
+    cssText?: string | null;
+};
+/**
+ * @internal
+ *
+ * @remarks
+ * This should align with
+ * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/diff/props.js#L36-L46 | Preact's algorithm}.
+ */
+export declare function stringifyValue(propertyName: string | number | symbol, value: unknown): string | null;
+/**
+ * Creates the hooks specified in the configuration.
+ *
+ * @param config - The hooks to build
+ *
+ * @returns The CSS required to enable the configured hooks, along with the corresponding `hooks` function for use in components.
+ */
+export declare const createHooks: <HookProperties extends string | number | symbol>(config: Record<HookProperties, `@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}`>) => readonly [string, (properties: import("@css-hooks/core").WithHooks<HookProperties, CSSProperties>) => CSSProperties];
+export { recommended };