@css-hooks/solid 1.8.1 → 2.0.0

package/README.md

@@ -15,55 +15,87 @@
 
 ## 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:
+Hooks add CSS features to native inline styles, enabling you to apply styles
+conditionally based on pseudo-classes, custom selectors, media queries, and
+more—all without leaving the `style` prop. By exploiting the hidden
+programmability of CSS Variables, CSS Hooks delivers a flexible CSS-in-JS
+experience without runtime style injection or build steps.
+
+## Feature highlights
+
+### Pseudo-classes
 
 ```jsx
-<a
-  href="https://css-hooks.com/"
+<button
   style={css({
-    color: "#03f",
-    fontSize: "1rem",
-    "&:hover": {
-      color: "#09f",
-    },
-    "&:active": {
-      color: "#e33",
-    },
-    "@media (1000px <= width)": {
-      fontSize: "1.25rem",
-    },
+    background: "#004982",
+    color: "#eeeff0",
+    on: $ => [
+      $("&:hover", {
+        background: "#1b659c",
+      }),
+      $("&:active", {
+        background: "#9f3131",
+      }),
+    ],
   })}
 >
-  Hooks
-</a>
+  Save changes
+</button>
+```
+
+### Selectors
+
+```jsx
+<label>
+  <input type="checkbox" checked />
+  <span
+    style={css({
+      on: $ => [
+        $(":checked + &", {
+          textDecoration: "line-through",
+        }),
+      ],
+    })}
+  >
+    Simplify CSS architecture
+  </span>
+</label>
 ```
 
-Notably, the `css` 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.
+### Responsive design
+
+```jsx
+<>
+  <span
+    style={css({
+      on: ($, { not }) => [
+        $(not("@container sm"), {
+          display: "none",
+        }),
+      ],
+    })}
+  >
+    sm
+  </span>
+  <span
+    style={css({
+      on: ($, { not }) => [
+        $(not("@container lg"), {
+          display: "none",
+        }),
+      ],
+    })}
+  >
+    lg
+  </span>
+</>
+```
 
 ## Documentation
 
 Please visit [css-hooks.com](https://css-hooks.com) to get started.
 
-## Packages
-
-- [@css-hooks/recommended](packages/recommended): Recommended hook configuration
-  with sensible defaults
-- [@css-hooks/react](https://github.com/css-hooks/css-hooks/tree/master/packages/react):
-  React framework integration
-- [@css-hooks/preact](https://github.com/css-hooks/css-hooks/tree/master/packages/preact):
-  Preact framework integration
-- [@css-hooks/solid](https://github.com/css-hooks/css-hooks/tree/master/packages/solid):
-  Solid framework integration
-- [@css-hooks/qwik](https://github.com/css-hooks/css-hooks/tree/master/packages/qwik):
-  Qwik framework integration
-- [@css-hooks/core](https://github.com/css-hooks/css-hooks/tree/master/packages/core):
-  Core package (internal / advanced use cases)
-
 ## Contributing
 
 Contributions are welcome. Please see the

package/cjs/index.js

@@ -1,28 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.recommended = exports.createHooks = exports.stringifyValue = void 0;
-const core_1 = require("@css-hooks/core");
-/** @internal */
-exports.stringifyValue = core_1.genericStringify;
-/**
- * Creates the hooks specified in the configuration.
- *
- * @param config - The hooks to build
- *
- * @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
- */
-exports.createHooks = (0, core_1.buildHooksSystem)(exports.stringifyValue);
-function keybab(r) {
-    /* eslint-disable @typescript-eslint/no-unsafe-return,@typescript-eslint/no-explicit-any */
-    return Object.fromEntries(Object.entries(r).map(([key, value]) => [
-        key.replace(/[A-Z]/g, x => `-${x.toLowerCase()}`),
-        value,
-    ]));
-    /* eslint-enable @typescript-eslint/no-unsafe-return,@typescript-eslint/no-explicit-any */
-}
-/**
- * A list of hooks offered as a "sensible default" to solve the most common use cases.
- *
- * @deprecated Use the `@css-hooks/recommended` package instead.
- */
-exports.recommended = keybab(core_1.recommended);
+'use strict';
+// @ts-nocheck
+
+const { buildHooksSystem } = require("@css-hooks/core");
+
+const createHooks = buildHooksSystem();
+exports.createHooks = createHooks;

package/esm/index.js

@@ -1,25 +1,5 @@
-import { buildHooksSystem, recommended as coreRecommended, genericStringify, } from "@css-hooks/core";
-/** @internal */
-export const stringifyValue = genericStringify;
-/**
- * Creates the hooks specified in the configuration.
- *
- * @param config - The hooks to build
- *
- * @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
- */
-export const createHooks = buildHooksSystem(stringifyValue);
-function keybab(r) {
-    /* eslint-disable @typescript-eslint/no-unsafe-return,@typescript-eslint/no-explicit-any */
-    return Object.fromEntries(Object.entries(r).map(([key, value]) => [
-        key.replace(/[A-Z]/g, x => `-${x.toLowerCase()}`),
-        value,
-    ]));
-    /* eslint-enable @typescript-eslint/no-unsafe-return,@typescript-eslint/no-explicit-any */
-}
-/**
- * A list of hooks offered as a "sensible default" to solve the most common use cases.
- *
- * @deprecated Use the `@css-hooks/recommended` package instead.
- */
-export const recommended = keybab(coreRecommended);
+// @ts-nocheck
+
+import { buildHooksSystem } from "@css-hooks/core";
+
+export const createHooks = buildHooksSystem();

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@css-hooks/solid",
   "description": "CSS Hooks for Solid",
-  "version": "1.8.1",
+  "version": "2.0.0",
   "author": "Nick Saunders",
   "dependencies": {
-    "@css-hooks/core": "^1.8.1",
+    "@css-hooks/core": "^2.0.0",
     "ts-toolbelt": "^9.6.0"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "^7.39.4",
     "@tsconfig/strictest": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.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",
@@ -20,7 +23,8 @@
   "files": [
     "cjs",
     "esm",
-    "types"
+    "types",
+    "tsdoc-metadata.json"
   ],
   "license": "MIT",
   "main": "cjs",
@@ -35,10 +39,11 @@
     "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": "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",
+    "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'"
   },
@@ -50,5 +55,8 @@
       "require": "./cjs/index.js",
       "types": "./types/index.d.ts"
     }
-  }
+  },
+  "browserslist": [
+    "supports css-variables"
+  ]
 }

package/types/index.d.ts

@@ -1,74 +1,16 @@
-import type { JSX } from "solid-js";
-import { genericStringify } from "@css-hooks/core";
-/** @internal */
-export declare const stringifyValue: typeof genericStringify;
 /**
- * Creates the hooks specified in the configuration.
- *
- * @param config - The hooks to build
+ *  CSS Hooks for {@link https://www.solidjs.com/ | Solid}
  *
- * @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
+ * @packageDocumentation
  */
-export declare const createHooks: <HookProperties extends string>(config: Record<HookProperties, `@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | {
-    or: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | any | {
-        and: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
-    })[];
-} | {
-    and: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | {
-        or: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
-    } | any)[];
-}>, options?: (({
-    debug?: boolean;
-    hookNameToId?: undefined;
-} | {
-    debug?: undefined;
-    hookNameToId?: (hookName: string) => string;
-}) & {
-    fallback?: "unset" | "revert-layer";
-    sort?: boolean;
-}) | undefined) => [string, (styles_0: import("@css-hooks/core").WithHooks<HookProperties, JSX.CSSProperties>, ...styles_1: (import("@css-hooks/core").WithHooks<HookProperties, JSX.CSSProperties> | undefined)[]) => JSX.CSSProperties];
+
+import type { JSX } from "solid-js";
+import type { CreateHooksFn } from "@css-hooks/core";
+
 /**
- * A list of hooks offered as a "sensible default" to solve the most common use cases.
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use Solid's
+ * `JSX.CSSProperties` type and logic for converting CSS values into strings.
  *
- * @deprecated Use the `@css-hooks/recommended` package instead.
+ * @public
  */
-export declare const recommended: {
-    active: ":active";
-    autofill: {
-        readonly or: readonly [":autofill", ":-webkit-autofill"];
-    };
-    checked: ":checked";
-    default: ":default";
-    disabled: ":disabled";
-    empty: ":empty";
-    enabled: ":enabled";
-    "even-child": ":nth-child(even)";
-    "first-child": ":first-child";
-    "first-of-type": ":first-of-type";
-    focus: ":focus";
-    "focus-visible": ":focus-visible";
-    "focus-within": ":focus-within";
-    hover: ":hover";
-    "in-range": ":in-range";
-    indeterminate: ":indeterminate";
-    invalid: ":invalid";
-    "last-child": ":last-child";
-    "last-of-type": ":last-of-type";
-    "odd-child": ":nth-child(odd)";
-    "only-child": ":only-child";
-    "only-of-type": ":only-of-type";
-    "out-of-range": ":out-of-range";
-    "placeholder-shown": {
-        readonly or: readonly [":placeholder-shown", ":-moz-placeholder-shown"];
-    };
-    "read-only": {
-        readonly or: readonly [":read-only", ":-moz-read-only"];
-    };
-    "read-write": {
-        readonly or: readonly [":read-write", ":-moz-read-write"];
-    };
-    required: ":required";
-    target: ":target";
-    valid: ":valid";
-    visited: ":visited";
-};
+export const createHooks: CreateHooksFn<JSX.CSSProperties>;