@css-hooks/solid 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,7 +1,16 @@
-'use strict';
-// @ts-nocheck
-
-const { buildHooksSystem } = require("@css-hooks/core");
-
-const createHooks = buildHooksSystem();
-exports.createHooks = createHooks;
+"use strict";
+/**
+ *  CSS Hooks for {@link https://www.solidjs.com/ | Solid}
+ *
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createHooks = void 0;
+const core_1 = require("@css-hooks/core");
+/**
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use Solid's
+ * `JSX.CSSProperties` type and logic for converting CSS values into strings.
+ *
+ * @public
+ */
+exports.createHooks = (0, core_1.buildHooksSystem)();

package/esm/index.js

@@ -1,5 +1,13 @@
-// @ts-nocheck
-
+/**
+ *  CSS Hooks for {@link https://www.solidjs.com/ | Solid}
+ *
+ * @packageDocumentation
+ */
 import { buildHooksSystem } from "@css-hooks/core";
-
+/**
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use Solid's
+ * `JSX.CSSProperties` type and logic for converting CSS values into strings.
+ *
+ * @public
+ */
 export const createHooks = buildHooksSystem();

package/package.json

@@ -1,30 +1,24 @@
 {
   "name": "@css-hooks/solid",
   "description": "CSS Hooks for Solid",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "author": "Nick Saunders",
   "dependencies": {
-    "@css-hooks/core": "^2.0.3",
-    "ts-toolbelt": "^9.6.0"
+    "@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.47.0",
-    "eslint-plugin-compat": "^4.2.0",
     "rimraf": "^5.0.1",
     "solid-js": "^1.7.11",
-    "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",
@@ -38,19 +32,11 @@
     "url": "https://github.com/css-hooks/css-hooks.git",
     "directory": "packages/solid"
   },
-  "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'"
-  },
   "type": "module",
   "types": "types",
   "exports": {
     ".": {
+      "@css-hooks/source": "./src/index.ts",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
       "types": "./types/index.d.ts"
@@ -58,5 +44,9 @@
   },
   "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,14 +3,11 @@
  *
  * @packageDocumentation
  */
-
 import type { JSX } from "solid-js";
-import type { CreateHooksFn } from "@css-hooks/core";
-
 /**
  * A {@link @css-hooks/core#CreateHooksFn} configured to use Solid's
  * `JSX.CSSProperties` type and logic for converting CSS values into strings.
  *
  * @public
  */
-export const createHooks: CreateHooksFn<JSX.CSSProperties>;
+export declare const createHooks: import("@css-hooks/core").CreateHooksFn<JSX.CSSProperties>;