@css-hooks/preact 2.0.3 → 3.0.0

package/README.md

@@ -27,18 +27,18 @@ experience without runtime style injection or build steps.
 
 ```jsx
 <button
-  style={css({
-    background: "#004982",
-    color: "#eeeff0",
-    on: $ => [
-      $("&:hover", {
-        background: "#1b659c",
-      }),
-      $("&:active", {
-        background: "#9f3131",
-      }),
-    ],
-  })}
+  style={pipe(
+    {
+      background: "#004982",
+      color: "#eeeff0",
+    },
+    on("&:hover", {
+      background: "#1b659c",
+    }),
+    on("&:active", {
+      background: "#9f3131",
+    }),
+  )}
 >
   Save changes
 </button>
@@ -50,13 +50,12 @@ experience without runtime style injection or build steps.
 <label>
   <input type="checkbox" checked />
   <span
-    style={css({
-      on: $ => [
-        $(":checked + &", {
-          textDecoration: "line-through",
-        }),
-      ],
-    })}
+    style={pipe(
+      {},
+      on(":checked + &", {
+        textDecoration: "line-through",
+      }),
+    )}
   >
     Simplify CSS architecture
   </span>
@@ -68,30 +67,42 @@ experience without runtime style injection or build steps.
 ```jsx
 <>
   <span
-    style={css({
-      on: ($, { not }) => [
-        $(not("@container sm"), {
-          display: "none",
-        }),
-      ],
-    })}
+    style={pipe(
+      {},
+      on(not("@container (width < 400px)"), {
+        display: "none",
+      }),
+    )}
   >
     sm
   </span>
   <span
-    style={css({
-      on: ($, { not }) => [
-        $(not("@container lg"), {
-          display: "none",
-        }),
-      ],
-    })}
+    style={pipe(
+      {},
+      on("@container (width < 400px)", {
+        display: "none",
+      }),
+    )}
   >
     lg
   </span>
 </>
 ```
 
+## Compatibility
+
+### Framework integrations
+
+| <img src="https://github.com/reactjs.png" alt="React" style="width: 24px; height: 24px" /><br/>React | <img src="https://github.com/preactjs.png" alt="Preact" style="width: 24px; height: 24px" /><br/>Preact | <img src="https://github.com/solidjs.png" alt="Solid" style="width: 24px; height: 24px" /><br/>Solid | <img src="https://github.com/qwikdev.png" alt="Qwik" style="width: 24px; height: 24px" /><br/>Qwik |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| <div align="center"><a href="https://www.npmjs.com/package/@css-hooks/react">✅</a></div>            | <div align="center"><a href="https://www.npmjs.com/package/@css-hooks/preact">✅</a></div>              | <div align="center"><a href="https://www.npmjs.com/package/@css-hooks/solid">✅</a></div>            | <div align="center"><a href="https://www.npmjs.com/package/@css-hooks/qwik">✅</a></div>           |
+
+### Browser support
+
+| <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/74.1.0/chrome/chrome_24x24.png" alt="Chrome" /><br/>Chrome | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/74.1.0/edge/edge_24x24.png" alt="Edge" /><br/>Edge | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/74.1.0/safari/safari_24x24.png" alt="Safari" /><br/>Safari | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/74.1.0/firefox/firefox_24x24.png" alt="Firefox" /><br/>Firefox | <img src="https://cdnjs.cloudflare.com/ajax/libs/browser-logos/74.1.0/opera/opera_24x24.png" alt="Opera" /><br/>Opera |
+| ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| <div align="center">49+</div>                                                                                             | <div align="center">16+</div>                                                                                     | <div align="center">10+</div>                                                                                             | <div align="center">31+</div>                                                                                                 | <div align="center">36+</div>                                                                                         |
+
 ## Documentation
 
 Please visit [css-hooks.com](https://css-hooks.com) to get started.

package/cjs/index.js

@@ -1,27 +1,32 @@
-'use strict';
-// @ts-nocheck
-
-const { buildHooksSystem } = require("@css-hooks/core");
-
-const IS_NON_DIMENSIONAL =
-  /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
-
-function _stringifyValue(propertyName, value) {
-  switch (typeof value) {
-    case "string":
-      return value;
-    case "number":
-      return `${value}${
-        typeof propertyName === "string" &&
-        IS_NON_DIMENSIONAL.test(propertyName)
-          ? ""
-          : "px"
-      }`;
-    default:
-      return null;
-  }
+"use strict";
+/**
+ *  CSS Hooks for {@link https://preactjs.com | Preact}
+ *
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._stringifyValue = exports.createHooks = void 0;
+const core_1 = require("@css-hooks/core");
+const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+/**
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use Preact's
+ * `JSX.CSSProperties` type and logic for converting CSS values into strings.
+ *
+ * @public
+ */
+exports.createHooks = (0, core_1.buildHooksSystem)(_stringifyValue);
+/** @internal */
+function _stringifyValue(value, propertyName) {
+    switch (typeof value) {
+        case "string":
+            return value;
+        case "number":
+            return `${value}${typeof propertyName === "string" &&
+                IS_NON_DIMENSIONAL.test(propertyName)
+                ? ""
+                : "px"}`;
+        default:
+            return null;
+    }
 }
-exports._stringifyValue = _stringifyValue
-
-const createHooks = buildHooksSystem(_stringifyValue);
-exports.createHooks = createHooks;
+exports._stringifyValue = _stringifyValue;

package/esm/index.js

@@ -1,24 +1,28 @@
-// @ts-nocheck
-
+/**
+ *  CSS Hooks for {@link https://preactjs.com | Preact}
+ *
+ * @packageDocumentation
+ */
 import { buildHooksSystem } from "@css-hooks/core";
-
-const IS_NON_DIMENSIONAL =
-  /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
-
-export function _stringifyValue(propertyName, value) {
-  switch (typeof value) {
-    case "string":
-      return value;
-    case "number":
-      return `${value}${
-        typeof propertyName === "string" &&
-        IS_NON_DIMENSIONAL.test(propertyName)
-          ? ""
-          : "px"
-      }`;
-    default:
-      return null;
-  }
-}
-
+const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+/**
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use Preact's
+ * `JSX.CSSProperties` type and logic for converting CSS values into strings.
+ *
+ * @public
+ */
 export const createHooks = buildHooksSystem(_stringifyValue);
+/** @internal */
+export function _stringifyValue(value, propertyName) {
+    switch (typeof value) {
+        case "string":
+            return value;
+        case "number":
+            return `${value}${typeof propertyName === "string" &&
+                IS_NON_DIMENSIONAL.test(propertyName)
+                ? ""
+                : "px"}`;
+        default:
+            return null;
+    }
+}

package/package.json

@@ -1,29 +1,25 @@
 {
   "name": "@css-hooks/preact",
   "description": "CSS Hooks for Preact",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "author": "Nick Saunders",
   "dependencies": {
-    "@css-hooks/core": "^2.0.3"
+    "@css-hooks/core": "3.0.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.39.4",
-    "@tsconfig/strictest": "^2.0.1",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "ascjs": "^6.0.3",
-    "eslint": "^8.50.0",
-    "eslint-plugin-compat": "^4.2.0",
+    "@types/node": "^20.12.7",
     "preact": ">=10.0.0 <11.0.0",
     "rimraf": "^5.0.1",
-    "ts-watch": "^1.0.8",
-    "typescript": "^5.1.6"
+    "tsx": "^4.19.1",
+    "typescript": "=5.4.2"
   },
   "files": [
     "cjs",
     "esm",
     "types",
-    "tsdoc-metadata.json"
+    "tsdoc-metadata.json",
+    "!**/*.test.*"
   ],
   "license": "MIT",
   "main": "cjs",
@@ -32,30 +28,28 @@
   "peerDependencies": {
     "preact": ">=10.0.0 <11.0.0"
   },
+  "peerDependenciesMeta": {
+    "preact": {
+      "optional": true
+    }
+  },
   "private": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/css-hooks/css-hooks.git",
     "directory": "packages/preact"
   },
-  "scripts": {
-    "api": "node -e \"var path=require('path').resolve,fs=require('fs'),cp=fs.cpSync;cp(path('src', 'index.d.ts'),path('types','index.d.ts'))\" && api-extractor run",
-    "clean": "rimraf cjs esm out types",
-    "lint": "eslint src .*.*js *.*js",
-    "postversion": "npm install @css-hooks/core@^$npm_package_version --force",
-    "prepublishOnly": "node -e \"var path=require('path').resolve,fs=require('fs'),cp=fs.cpSync,mkdir=fs.mkdirSync;cp(path('src', 'index.d.ts'),path('types','index.d.ts'));cp(path('src','index.js'),path('esm','index.js'));mkdir(path('cjs'),{recursive:true})\" && ascjs src/index.js cjs/index.js",
-    "test": "tsc && node --test",
-    "test.watch": "tsc-watch --onSuccess 'node --test'"
-  },
   "types": "types",
   "exports": {
     ".": {
+      "@css-hooks/source": "./src/index.ts",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "browserslist": [
-    "supports css-variables"
-  ]
-}
+  "scripts": {
+    "clean": "rimraf cjs esm types",
+    "test": "node --import tsx --conditions @css-hooks/source --test src/index.test.ts"
+  }
+}

package/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.43.1"
+    }
+  ]
+}

package/types/index.d.ts

@@ -3,27 +3,13 @@
  *
  * @packageDocumentation
  */
-
 import type { JSX } from "preact";
-import type { CreateHooksFn } from "@css-hooks/core";
-
-/**
- * A version of Preact's `JSX.CSSProperties` type that admits an `on` field
- *
- * @public
- */
-export type CSSProperties = JSX.DOMCSSProperties & { cssText?: string | null };
-
 /**
  * A {@link @css-hooks/core#CreateHooksFn} configured to use Preact's
  * `JSX.CSSProperties` type and logic for converting CSS values into strings.
  *
  * @public
  */
-export const createHooks: CreateHooksFn<CSSProperties>;
-
+export declare const createHooks: import("@css-hooks/core").CreateHooksFn<JSX.CSSProperties>;
 /** @internal */
-declare function _stringifyValue(
-  propertyName: string,
-  value: unknown,
-): string | null;
+export declare function _stringifyValue(value: unknown, propertyName: string): string | null;