@css-hooks/preact 1.8.2 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +69 -37
  2. package/cjs/index.js +26 -37
  3. package/esm/index.js +23 -33
  4. package/package.json +13 -5
  5. package/types/index.d.ts +20 -37
package/README.md CHANGED
@@ -15,55 +15,87 @@
15
15
 
16
16
  ## Overview
17
17
 
18
- Hooks bring CSS features to native inline styles, enabling you to target various
19
- states such as hover, focus, and active, all without leaving the `style` prop.
20
- For example, hooks can easily solve the common use case of applying state-driven
21
- styles to a link:
18
+ Hooks add CSS features to native inline styles, enabling you to apply styles
19
+ conditionally based on pseudo-classes, custom selectors, media queries, and
20
+ more—all without leaving the `style` prop. By exploiting the hidden
21
+ programmability of CSS Variables, CSS Hooks delivers a flexible CSS-in-JS
22
+ experience without runtime style injection or build steps.
23
+
24
+ ## Feature highlights
25
+
26
+ ### Pseudo-classes
22
27
 
23
28
  ```jsx
24
- <a
25
- href="https://css-hooks.com/"
29
+ <button
26
30
  style={css({
27
- color: "#03f",
28
- fontSize: "1rem",
29
- "&:hover": {
30
- color: "#09f",
31
- },
32
- "&:active": {
33
- color: "#e33",
34
- },
35
- "@media (1000px <= width)": {
36
- fontSize: "1.25rem",
37
- },
31
+ background: "#004982",
32
+ color: "#eeeff0",
33
+ on: $ => [
34
+ $("&:hover", {
35
+ background: "#1b659c",
36
+ }),
37
+ $("&:active", {
38
+ background: "#9f3131",
39
+ }),
40
+ ],
38
41
  })}
39
42
  >
40
- Hooks
41
- </a>
43
+ Save changes
44
+ </button>
45
+ ```
46
+
47
+ ### Selectors
48
+
49
+ ```jsx
50
+ <label>
51
+ <input type="checkbox" checked />
52
+ <span
53
+ style={css({
54
+ on: $ => [
55
+ $(":checked + &", {
56
+ textDecoration: "line-through",
57
+ }),
58
+ ],
59
+ })}
60
+ >
61
+ Simplify CSS architecture
62
+ </span>
63
+ </label>
42
64
  ```
43
65
 
44
- Notably, the `css` function is pure. It simply returns a flat style object that
45
- is compatible with the `style` prop, creating dynamic property values that
46
- change under various conditions through CSS variables.
66
+ ### Responsive design
67
+
68
+ ```jsx
69
+ <>
70
+ <span
71
+ style={css({
72
+ on: ($, { not }) => [
73
+ $(not("@container sm"), {
74
+ display: "none",
75
+ }),
76
+ ],
77
+ })}
78
+ >
79
+ sm
80
+ </span>
81
+ <span
82
+ style={css({
83
+ on: ($, { not }) => [
84
+ $(not("@container lg"), {
85
+ display: "none",
86
+ }),
87
+ ],
88
+ })}
89
+ >
90
+ lg
91
+ </span>
92
+ </>
93
+ ```
47
94
 
48
95
  ## Documentation
49
96
 
50
97
  Please visit [css-hooks.com](https://css-hooks.com) to get started.
51
98
 
52
- ## Packages
53
-
54
- - [@css-hooks/recommended](packages/recommended): Recommended hook configuration
55
- with sensible defaults
56
- - [@css-hooks/react](https://github.com/css-hooks/css-hooks/tree/master/packages/react):
57
- React framework integration
58
- - [@css-hooks/preact](https://github.com/css-hooks/css-hooks/tree/master/packages/preact):
59
- Preact framework integration
60
- - [@css-hooks/solid](https://github.com/css-hooks/css-hooks/tree/master/packages/solid):
61
- Solid framework integration
62
- - [@css-hooks/qwik](https://github.com/css-hooks/css-hooks/tree/master/packages/qwik):
63
- Qwik framework integration
64
- - [@css-hooks/core](https://github.com/css-hooks/css-hooks/tree/master/packages/core):
65
- Core package (internal / advanced use cases)
66
-
67
99
  ## Contributing
68
100
 
69
101
  Contributions are welcome. Please see the
package/cjs/index.js CHANGED
@@ -1,38 +1,27 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.recommended = exports.createHooks = exports.stringifyValue = void 0;
4
- const core_1 = require("@css-hooks/core");
5
- Object.defineProperty(exports, "recommended", { enumerable: true, get: function () { return core_1.recommended; } });
6
- /**
7
- * @remarks
8
- * Sourced from
9
- * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/constants.js#L3-L4 | Preact}.
10
- */
11
- const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
12
- /**
13
- * @internal
14
- *
15
- * @remarks
16
- * This should align with
17
- * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/diff/props.js#L36-L46 | Preact's algorithm}.
18
- */
19
- function stringifyValue(propertyName, value) {
20
- if (typeof value === "string") {
21
- return value;
22
- }
23
- if (typeof value === "number") {
24
- return `${value}${typeof propertyName === "string" && IS_NON_DIMENSIONAL.test(propertyName)
25
- ? ""
26
- : "px"}`;
27
- }
28
- return null;
1
+ 'use strict';
2
+ // @ts-nocheck
3
+
4
+ const { buildHooksSystem } = require("@css-hooks/core");
5
+
6
+ const IS_NON_DIMENSIONAL =
7
+ /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
8
+
9
+ function _stringifyValue(propertyName, value) {
10
+ switch (typeof value) {
11
+ case "string":
12
+ return value;
13
+ case "number":
14
+ return `${value}${
15
+ typeof propertyName === "string" &&
16
+ IS_NON_DIMENSIONAL.test(propertyName)
17
+ ? ""
18
+ : "px"
19
+ }`;
20
+ default:
21
+ return null;
22
+ }
29
23
  }
30
- exports.stringifyValue = stringifyValue;
31
- /**
32
- * Creates the hooks specified in the configuration.
33
- *
34
- * @param config - The hooks to build
35
- *
36
- * @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
37
- */
38
- exports.createHooks = (0, core_1.buildHooksSystem)(stringifyValue);
24
+ exports._stringifyValue = _stringifyValue
25
+
26
+ const createHooks = buildHooksSystem(_stringifyValue);
27
+ exports.createHooks = createHooks;
package/esm/index.js CHANGED
@@ -1,34 +1,24 @@
1
- import { buildHooksSystem, recommended } from "@css-hooks/core";
2
- /**
3
- * @remarks
4
- * Sourced from
5
- * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/constants.js#L3-L4 | Preact}.
6
- */
7
- const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
8
- /**
9
- * @internal
10
- *
11
- * @remarks
12
- * This should align with
13
- * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/diff/props.js#L36-L46 | Preact's algorithm}.
14
- */
15
- export function stringifyValue(propertyName, value) {
16
- if (typeof value === "string") {
17
- return value;
18
- }
19
- if (typeof value === "number") {
20
- return `${value}${typeof propertyName === "string" && IS_NON_DIMENSIONAL.test(propertyName)
21
- ? ""
22
- : "px"}`;
23
- }
24
- return null;
1
+ // @ts-nocheck
2
+
3
+ import { buildHooksSystem } from "@css-hooks/core";
4
+
5
+ const IS_NON_DIMENSIONAL =
6
+ /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
7
+
8
+ export function _stringifyValue(propertyName, value) {
9
+ switch (typeof value) {
10
+ case "string":
11
+ return value;
12
+ case "number":
13
+ return `${value}${
14
+ typeof propertyName === "string" &&
15
+ IS_NON_DIMENSIONAL.test(propertyName)
16
+ ? ""
17
+ : "px"
18
+ }`;
19
+ default:
20
+ return null;
21
+ }
25
22
  }
26
- /**
27
- * Creates the hooks specified in the configuration.
28
- *
29
- * @param config - The hooks to build
30
- *
31
- * @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
32
- */
33
- export const createHooks = buildHooksSystem(stringifyValue);
34
- export { recommended };
23
+
24
+ export const createHooks = buildHooksSystem(_stringifyValue);
package/package.json CHANGED
@@ -1,16 +1,19 @@
1
1
  {
2
2
  "name": "@css-hooks/preact",
3
3
  "description": "CSS Hooks for Preact",
4
- "version": "1.8.2",
4
+ "version": "2.0.1",
5
5
  "author": "Nick Saunders",
6
6
  "dependencies": {
7
- "@css-hooks/core": "^1.8.2"
7
+ "@css-hooks/core": "^2.0.1"
8
8
  },
9
9
  "devDependencies": {
10
+ "@microsoft/api-extractor": "^7.39.4",
10
11
  "@tsconfig/strictest": "^2.0.1",
11
12
  "@typescript-eslint/eslint-plugin": "^6.7.2",
12
13
  "@typescript-eslint/parser": "^6.7.2",
14
+ "ascjs": "^6.0.3",
13
15
  "eslint": "^8.50.0",
16
+ "eslint-plugin-compat": "^4.2.0",
14
17
  "preact": ">=10.0.0 <11.0.0",
15
18
  "rimraf": "^5.0.1",
16
19
  "ts-watch": "^1.0.8",
@@ -19,7 +22,8 @@
19
22
  "files": [
20
23
  "cjs",
21
24
  "esm",
22
- "types"
25
+ "types",
26
+ "tsdoc-metadata.json"
23
27
  ],
24
28
  "license": "MIT",
25
29
  "main": "cjs",
@@ -35,10 +39,11 @@
35
39
  "directory": "packages/preact"
36
40
  },
37
41
  "scripts": {
42
+ "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",
38
43
  "clean": "rimraf cjs esm out types",
39
44
  "lint": "eslint src .*.*js *.*js",
40
45
  "postversion": "npm install @css-hooks/core@^$npm_package_version --force",
41
- "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",
46
+ "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",
42
47
  "test": "tsc && node --test",
43
48
  "test.watch": "tsc-watch --onSuccess 'node --test'"
44
49
  },
@@ -49,5 +54,8 @@
49
54
  "require": "./cjs/index.js",
50
55
  "types": "./types/index.d.ts"
51
56
  }
52
- }
57
+ },
58
+ "browserslist": [
59
+ "supports css-variables"
60
+ ]
53
61
  }
package/types/index.d.ts CHANGED
@@ -1,46 +1,29 @@
1
- import type { JSX } from "preact";
2
- import { recommended } from "@css-hooks/core";
3
1
  /**
4
- * @internal
2
+ * CSS Hooks for {@link https://preactjs.com | Preact}
5
3
  *
6
- * @remarks
7
- * The type we really want is {@link JSX.CSSProperties}. However, that type
8
- * enforces a flat structure that is incompatible with hooks.
4
+ * @packageDocumentation
9
5
  */
10
- export type CSSProperties = JSX.DOMCSSProperties & {
11
- cssText?: string | null;
12
- };
6
+
7
+ import type { JSX } from "preact";
8
+ import type { CreateHooksFn } from "@css-hooks/core";
9
+
13
10
  /**
14
- * @internal
11
+ * A version of Preact's `JSX.CSSProperties` type that admits an `on` field
15
12
  *
16
- * @remarks
17
- * This should align with
18
- * {@link https://github.com/preactjs/preact/blob/4fea40d1124ba631f8a11c27f6e71e018136318e/src/diff/props.js#L36-L46 | Preact's algorithm}.
13
+ * @public
19
14
  */
20
- export declare function stringifyValue(propertyName: string | number | symbol, value: unknown): string | null;
15
+ export type CSSProperties = JSX.DOMCSSProperties & { cssText?: string | null };
16
+
21
17
  /**
22
- * Creates the hooks specified in the configuration.
23
- *
24
- * @param config - The hooks to build
18
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use Preact's
19
+ * `JSX.CSSProperties` type and logic for converting CSS values into strings.
25
20
  *
26
- * @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
21
+ * @public
27
22
  */
28
- export declare const createHooks: <HookProperties extends string>(config: Record<HookProperties, `@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | {
29
- or: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | any | {
30
- and: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
31
- })[];
32
- } | {
33
- and: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | {
34
- or: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
35
- } | any)[];
36
- }>, options?: (({
37
- debug?: boolean;
38
- hookNameToId?: undefined;
39
- } | {
40
- debug?: undefined;
41
- hookNameToId?: (hookName: string) => string;
42
- }) & {
43
- fallback?: "unset" | "revert-layer";
44
- sort?: boolean;
45
- }) | undefined) => [string, (properties_0: import("@css-hooks/core").WithHooks<HookProperties, CSSProperties>, ...properties_1: (import("@css-hooks/core").WithHooks<HookProperties, CSSProperties> | undefined)[]) => CSSProperties];
46
- export { recommended };
23
+ export const createHooks: CreateHooksFn<CSSProperties>;
24
+
25
+ /** @internal */
26
+ declare function _stringifyValue(
27
+ propertyName: string,
28
+ value: unknown,
29
+ ): string | null;