@css-hooks/react 2.0.3 → 3.0.0

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 (6) hide show
  1. package/README.md +44 -33
  2. package/cjs/index.js +101 -95
  3. package/esm/index.js +94 -88
  4. package/package.json +14 -24
  5. package/tsdoc-metadata.json +11 -0
  6. package/types/index.d.ts +8 -12
package/README.md CHANGED
@@ -27,18 +27,18 @@ experience without runtime style injection or build steps.
27
27
 
28
28
  ```jsx
29
29
  <button
30
- style={css({
31
- background: "#004982",
32
- color: "#eeeff0",
33
- on: $ => [
34
- $("&:hover", {
35
- background: "#1b659c",
36
- }),
37
- $("&:active", {
38
- background: "#9f3131",
39
- }),
40
- ],
41
- })}
30
+ style={pipe(
31
+ {
32
+ background: "#004982",
33
+ color: "#eeeff0",
34
+ },
35
+ on("&:hover", {
36
+ background: "#1b659c",
37
+ }),
38
+ on("&:active", {
39
+ background: "#9f3131",
40
+ }),
41
+ )}
42
42
  >
43
43
  Save changes
44
44
  </button>
@@ -50,13 +50,12 @@ experience without runtime style injection or build steps.
50
50
  <label>
51
51
  <input type="checkbox" checked />
52
52
  <span
53
- style={css({
54
- on: $ => [
55
- $(":checked + &", {
56
- textDecoration: "line-through",
57
- }),
58
- ],
59
- })}
53
+ style={pipe(
54
+ {},
55
+ on(":checked + &", {
56
+ textDecoration: "line-through",
57
+ }),
58
+ )}
60
59
  >
61
60
  Simplify CSS architecture
62
61
  </span>
@@ -68,30 +67,42 @@ experience without runtime style injection or build steps.
68
67
  ```jsx
69
68
  <>
70
69
  <span
71
- style={css({
72
- on: ($, { not }) => [
73
- $(not("@container sm"), {
74
- display: "none",
75
- }),
76
- ],
77
- })}
70
+ style={pipe(
71
+ {},
72
+ on(not("@container (width < 400px)"), {
73
+ display: "none",
74
+ }),
75
+ )}
78
76
  >
79
77
  sm
80
78
  </span>
81
79
  <span
82
- style={css({
83
- on: ($, { not }) => [
84
- $(not("@container lg"), {
85
- display: "none",
86
- }),
87
- ],
88
- })}
80
+ style={pipe(
81
+ {},
82
+ on("@container (width < 400px)", {
83
+ display: "none",
84
+ }),
85
+ )}
89
86
  >
90
87
  lg
91
88
  </span>
92
89
  </>
93
90
  ```
94
91
 
92
+ ## Compatibility
93
+
94
+ ### Framework integrations
95
+
96
+ | <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 |
97
+ | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
98
+ | <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> |
99
+
100
+ ### Browser support
101
+
102
+ | <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 |
103
+ | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
104
+ | <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> |
105
+
95
106
  ## Documentation
96
107
 
97
108
  Please visit [css-hooks.com](https://css-hooks.com) to get started.
package/cjs/index.js CHANGED
@@ -1,104 +1,110 @@
1
- 'use strict';
2
- // @ts-nocheck
3
-
4
- const { buildHooksSystem } = require("@css-hooks/core");
5
-
1
+ "use strict";
2
+ /**
3
+ * CSS Hooks for {@link https://react.dev | React}
4
+ *
5
+ * @packageDocumentation
6
+ */
7
+ Object.defineProperty(exports, "__esModule", { value: true });
8
+ exports._unitlessNumbers = exports.createHooks = exports._stringifyValue = void 0;
9
+ const core_1 = require("@css-hooks/core");
6
10
  // See https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
7
- function _stringifyValue(propertyName, value) {
8
- switch (typeof value) {
9
- case "string":
10
- return value;
11
- case "number":
12
- return `${value}${isUnitlessNumber(propertyName) ? "" : "px"}`;
13
- default:
14
- return null;
15
- }
11
+ /** @internal */
12
+ function _stringifyValue(value, propertyName) {
13
+ switch (typeof value) {
14
+ case "string":
15
+ return value;
16
+ case "number":
17
+ return `${value}${isUnitlessNumber(propertyName) ? "" : "px"}`;
18
+ default:
19
+ return null;
20
+ }
16
21
  }
17
- exports._stringifyValue = _stringifyValue
18
-
19
- const createHooks = buildHooksSystem(_stringifyValue);
20
- exports.createHooks = createHooks;
21
-
22
+ exports._stringifyValue = _stringifyValue;
23
+ /**
24
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use React's
25
+ * `CSSProperties` type and logic for converting CSS values into strings.
26
+ *
27
+ * @public
28
+ */
29
+ exports.createHooks = (0, core_1.buildHooksSystem)(_stringifyValue);
22
30
  /**
23
31
  * Following code (c) Meta Platforms, Inc. and affiliates.
24
32
  * Source modified to account for custom properties.
25
33
  */
26
-
27
- const _unitlessNumbers = new Set([
28
- "animationIterationCount",
29
- "aspectRatio",
30
- "borderImageOutset",
31
- "borderImageSlice",
32
- "borderImageWidth",
33
- "boxFlex",
34
- "boxFlexGroup",
35
- "boxOrdinalGroup",
36
- "columnCount",
37
- "columns",
38
- "flex",
39
- "flexGrow",
40
- "flexPositive",
41
- "flexShrink",
42
- "flexNegative",
43
- "flexOrder",
44
- "gridArea",
45
- "gridRow",
46
- "gridRowEnd",
47
- "gridRowSpan",
48
- "gridRowStart",
49
- "gridColumn",
50
- "gridColumnEnd",
51
- "gridColumnSpan",
52
- "gridColumnStart",
53
- "fontWeight",
54
- "lineClamp",
55
- "lineHeight",
56
- "opacity",
57
- "order",
58
- "orphans",
59
- "scale",
60
- "tabSize",
61
- "widows",
62
- "zIndex",
63
- "zoom",
64
- "fillOpacity", // SVG-related properties
65
- "floodOpacity",
66
- "stopOpacity",
67
- "strokeDasharray",
68
- "strokeDashoffset",
69
- "strokeMiterlimit",
70
- "strokeOpacity",
71
- "strokeWidth",
72
- "MozAnimationIterationCount", // Known Prefixed Properties
73
- "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
74
- "MozBoxFlexGroup",
75
- "MozLineClamp",
76
- "msAnimationIterationCount",
77
- "msFlex",
78
- "msZoom",
79
- "msFlexGrow",
80
- "msFlexNegative",
81
- "msFlexOrder",
82
- "msFlexPositive",
83
- "msFlexShrink",
84
- "msGridColumn",
85
- "msGridColumnSpan",
86
- "msGridRow",
87
- "msGridRowSpan",
88
- "WebkitAnimationIterationCount",
89
- "WebkitBoxFlex",
90
- "WebKitBoxFlexGroup",
91
- "WebkitBoxOrdinalGroup",
92
- "WebkitColumnCount",
93
- "WebkitColumns",
94
- "WebkitFlex",
95
- "WebkitFlexGrow",
96
- "WebkitFlexPositive",
97
- "WebkitFlexShrink",
98
- "WebkitLineClamp",
34
+ /** @internal */
35
+ exports._unitlessNumbers = new Set([
36
+ "animationIterationCount",
37
+ "aspectRatio",
38
+ "borderImageOutset",
39
+ "borderImageSlice",
40
+ "borderImageWidth",
41
+ "boxFlex",
42
+ "boxFlexGroup",
43
+ "boxOrdinalGroup",
44
+ "columnCount",
45
+ "columns",
46
+ "flex",
47
+ "flexGrow",
48
+ "flexPositive",
49
+ "flexShrink",
50
+ "flexNegative",
51
+ "flexOrder",
52
+ "gridArea",
53
+ "gridRow",
54
+ "gridRowEnd",
55
+ "gridRowSpan",
56
+ "gridRowStart",
57
+ "gridColumn",
58
+ "gridColumnEnd",
59
+ "gridColumnSpan",
60
+ "gridColumnStart",
61
+ "fontWeight",
62
+ "lineClamp",
63
+ "lineHeight",
64
+ "opacity",
65
+ "order",
66
+ "orphans",
67
+ "scale",
68
+ "tabSize",
69
+ "widows",
70
+ "zIndex",
71
+ "zoom",
72
+ "fillOpacity", // SVG-related properties
73
+ "floodOpacity",
74
+ "stopOpacity",
75
+ "strokeDasharray",
76
+ "strokeDashoffset",
77
+ "strokeMiterlimit",
78
+ "strokeOpacity",
79
+ "strokeWidth",
80
+ "MozAnimationIterationCount", // Known Prefixed Properties
81
+ "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
82
+ "MozBoxFlexGroup",
83
+ "MozLineClamp",
84
+ "msAnimationIterationCount",
85
+ "msFlex",
86
+ "msZoom",
87
+ "msFlexGrow",
88
+ "msFlexNegative",
89
+ "msFlexOrder",
90
+ "msFlexPositive",
91
+ "msFlexShrink",
92
+ "msGridColumn",
93
+ "msGridColumnSpan",
94
+ "msGridRow",
95
+ "msGridRowSpan",
96
+ "WebkitAnimationIterationCount",
97
+ "WebkitBoxFlex",
98
+ "WebKitBoxFlexGroup",
99
+ "WebkitBoxOrdinalGroup",
100
+ "WebkitColumnCount",
101
+ "WebkitColumns",
102
+ "WebkitFlex",
103
+ "WebkitFlexGrow",
104
+ "WebkitFlexPositive",
105
+ "WebkitFlexShrink",
106
+ "WebkitLineClamp",
99
107
  ]);
100
- exports._unitlessNumbers = _unitlessNumbers;
101
-
102
108
  function isUnitlessNumber(name) {
103
- return /^--/.test(name) || _unitlessNumbers.has(name);
109
+ return /^--/.test(name) || exports._unitlessNumbers.has(name);
104
110
  }
package/esm/index.js CHANGED
@@ -1,100 +1,106 @@
1
- // @ts-nocheck
2
-
1
+ /**
2
+ * CSS Hooks for {@link https://react.dev | React}
3
+ *
4
+ * @packageDocumentation
5
+ */
3
6
  import { buildHooksSystem } from "@css-hooks/core";
4
-
5
7
  // See https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/CSSPropertyOperations.js
6
- export function _stringifyValue(propertyName, value) {
7
- switch (typeof value) {
8
- case "string":
9
- return value;
10
- case "number":
11
- return `${value}${isUnitlessNumber(propertyName) ? "" : "px"}`;
12
- default:
13
- return null;
14
- }
8
+ /** @internal */
9
+ export function _stringifyValue(value, propertyName) {
10
+ switch (typeof value) {
11
+ case "string":
12
+ return value;
13
+ case "number":
14
+ return `${value}${isUnitlessNumber(propertyName) ? "" : "px"}`;
15
+ default:
16
+ return null;
17
+ }
15
18
  }
16
-
19
+ /**
20
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use React's
21
+ * `CSSProperties` type and logic for converting CSS values into strings.
22
+ *
23
+ * @public
24
+ */
17
25
  export const createHooks = buildHooksSystem(_stringifyValue);
18
-
19
26
  /**
20
27
  * Following code (c) Meta Platforms, Inc. and affiliates.
21
28
  * Source modified to account for custom properties.
22
29
  */
23
-
30
+ /** @internal */
24
31
  export const _unitlessNumbers = new Set([
25
- "animationIterationCount",
26
- "aspectRatio",
27
- "borderImageOutset",
28
- "borderImageSlice",
29
- "borderImageWidth",
30
- "boxFlex",
31
- "boxFlexGroup",
32
- "boxOrdinalGroup",
33
- "columnCount",
34
- "columns",
35
- "flex",
36
- "flexGrow",
37
- "flexPositive",
38
- "flexShrink",
39
- "flexNegative",
40
- "flexOrder",
41
- "gridArea",
42
- "gridRow",
43
- "gridRowEnd",
44
- "gridRowSpan",
45
- "gridRowStart",
46
- "gridColumn",
47
- "gridColumnEnd",
48
- "gridColumnSpan",
49
- "gridColumnStart",
50
- "fontWeight",
51
- "lineClamp",
52
- "lineHeight",
53
- "opacity",
54
- "order",
55
- "orphans",
56
- "scale",
57
- "tabSize",
58
- "widows",
59
- "zIndex",
60
- "zoom",
61
- "fillOpacity", // SVG-related properties
62
- "floodOpacity",
63
- "stopOpacity",
64
- "strokeDasharray",
65
- "strokeDashoffset",
66
- "strokeMiterlimit",
67
- "strokeOpacity",
68
- "strokeWidth",
69
- "MozAnimationIterationCount", // Known Prefixed Properties
70
- "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
71
- "MozBoxFlexGroup",
72
- "MozLineClamp",
73
- "msAnimationIterationCount",
74
- "msFlex",
75
- "msZoom",
76
- "msFlexGrow",
77
- "msFlexNegative",
78
- "msFlexOrder",
79
- "msFlexPositive",
80
- "msFlexShrink",
81
- "msGridColumn",
82
- "msGridColumnSpan",
83
- "msGridRow",
84
- "msGridRowSpan",
85
- "WebkitAnimationIterationCount",
86
- "WebkitBoxFlex",
87
- "WebKitBoxFlexGroup",
88
- "WebkitBoxOrdinalGroup",
89
- "WebkitColumnCount",
90
- "WebkitColumns",
91
- "WebkitFlex",
92
- "WebkitFlexGrow",
93
- "WebkitFlexPositive",
94
- "WebkitFlexShrink",
95
- "WebkitLineClamp",
32
+ "animationIterationCount",
33
+ "aspectRatio",
34
+ "borderImageOutset",
35
+ "borderImageSlice",
36
+ "borderImageWidth",
37
+ "boxFlex",
38
+ "boxFlexGroup",
39
+ "boxOrdinalGroup",
40
+ "columnCount",
41
+ "columns",
42
+ "flex",
43
+ "flexGrow",
44
+ "flexPositive",
45
+ "flexShrink",
46
+ "flexNegative",
47
+ "flexOrder",
48
+ "gridArea",
49
+ "gridRow",
50
+ "gridRowEnd",
51
+ "gridRowSpan",
52
+ "gridRowStart",
53
+ "gridColumn",
54
+ "gridColumnEnd",
55
+ "gridColumnSpan",
56
+ "gridColumnStart",
57
+ "fontWeight",
58
+ "lineClamp",
59
+ "lineHeight",
60
+ "opacity",
61
+ "order",
62
+ "orphans",
63
+ "scale",
64
+ "tabSize",
65
+ "widows",
66
+ "zIndex",
67
+ "zoom",
68
+ "fillOpacity", // SVG-related properties
69
+ "floodOpacity",
70
+ "stopOpacity",
71
+ "strokeDasharray",
72
+ "strokeDashoffset",
73
+ "strokeMiterlimit",
74
+ "strokeOpacity",
75
+ "strokeWidth",
76
+ "MozAnimationIterationCount", // Known Prefixed Properties
77
+ "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
78
+ "MozBoxFlexGroup",
79
+ "MozLineClamp",
80
+ "msAnimationIterationCount",
81
+ "msFlex",
82
+ "msZoom",
83
+ "msFlexGrow",
84
+ "msFlexNegative",
85
+ "msFlexOrder",
86
+ "msFlexPositive",
87
+ "msFlexShrink",
88
+ "msGridColumn",
89
+ "msGridColumnSpan",
90
+ "msGridRow",
91
+ "msGridRowSpan",
92
+ "WebkitAnimationIterationCount",
93
+ "WebkitBoxFlex",
94
+ "WebKitBoxFlexGroup",
95
+ "WebkitBoxOrdinalGroup",
96
+ "WebkitColumnCount",
97
+ "WebkitColumns",
98
+ "WebkitFlex",
99
+ "WebkitFlexGrow",
100
+ "WebkitFlexPositive",
101
+ "WebkitFlexShrink",
102
+ "WebkitLineClamp",
96
103
  ]);
97
-
98
104
  function isUnitlessNumber(name) {
99
- return /^--/.test(name) || _unitlessNumbers.has(name);
105
+ return /^--/.test(name) || _unitlessNumbers.has(name);
100
106
  }
package/package.json CHANGED
@@ -1,36 +1,33 @@
1
1
  {
2
2
  "name": "@css-hooks/react",
3
3
  "description": "CSS Hooks for React",
4
- "version": "2.0.3",
4
+ "version": "3.0.0",
5
5
  "author": "Nick Saunders",
6
6
  "dependencies": {
7
- "@css-hooks/core": "^2.0.3"
7
+ "@css-hooks/core": "3.0.0"
8
8
  },
9
9
  "devDependencies": {
10
10
  "@microsoft/api-extractor": "^7.39.4",
11
- "@tsconfig/strictest": "^2.0.1",
11
+ "@types/node": "^20.12.7",
12
12
  "@types/react": "^18.2.20",
13
13
  "@typescript-eslint/eslint-plugin": "^7.0.0",
14
- "@typescript-eslint/parser": "^7.0.0",
15
- "ascjs": "^6.0.3",
16
- "eslint": "^8.50.0",
17
- "eslint-plugin-compat": "^4.2.0",
18
14
  "rimraf": "^5.0.1",
19
- "ts-watch": "^1.0.8",
20
- "typescript": "^5.1.6"
15
+ "tsx": "^4.19.1",
16
+ "typescript": "=5.4.2"
21
17
  },
22
18
  "files": [
23
19
  "cjs",
24
20
  "esm",
25
21
  "types",
26
- "tsdoc-metadata.json"
22
+ "tsdoc-metadata.json",
23
+ "!**/*.test.*"
27
24
  ],
28
25
  "license": "MIT",
29
26
  "main": "cjs",
30
27
  "module": "esm",
31
28
  "type": "module",
32
29
  "peerDependencies": {
33
- "@types/react": ">=16 <19"
30
+ "@types/react": ">=16 <20"
34
31
  },
35
32
  "peerDependenciesMeta": {
36
33
  "@types/react": {
@@ -43,24 +40,17 @@
43
40
  "url": "https://github.com/css-hooks/css-hooks.git",
44
41
  "directory": "packages/react"
45
42
  },
46
- "scripts": {
47
- "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",
48
- "clean": "rimraf cjs esm out types",
49
- "lint": "eslint src .*.*js *.*js",
50
- "postversion": "npm install @css-hooks/core@^$npm_package_version --force",
51
- "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",
52
- "test": "tsc && node --test",
53
- "test.watch": "tsc-watch --onSuccess 'node --test'"
54
- },
55
43
  "types": "types",
56
44
  "exports": {
57
45
  ".": {
46
+ "@css-hooks/source": "./src/index.ts",
58
47
  "import": "./esm/index.js",
59
48
  "require": "./cjs/index.js",
60
49
  "types": "./types/index.d.ts"
61
50
  }
62
51
  },
63
- "browserslist": [
64
- "supports css-variables"
65
- ]
66
- }
52
+ "scripts": {
53
+ "clean": "rimraf cjs esm types",
54
+ "test": "node --import tsx --conditions @css-hooks/source --test src/index.test.ts"
55
+ }
56
+ }
package/tsdoc-metadata.json ADDED
@@ -0,0 +1,11 @@
1
+ // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
+ // It should be published with your NPM package. It should not be tracked by Git.
3
+ {
4
+ "tsdocVersion": "0.12",
5
+ "toolPackages": [
6
+ {
7
+ "packageName": "@microsoft/api-extractor",
8
+ "packageVersion": "7.43.1"
9
+ }
10
+ ]
11
+ }
package/types/index.d.ts CHANGED
@@ -3,23 +3,19 @@
3
3
  *
4
4
  * @packageDocumentation
5
5
  */
6
-
7
6
  import type { CSSProperties } from "react";
8
- import { CreateHooksFn } from "@css-hooks/core";
9
-
7
+ /** @internal */
8
+ export declare function _stringifyValue(value: unknown, propertyName: string): string | null;
10
9
  /**
11
10
  * A {@link @css-hooks/core#CreateHooksFn} configured to use React's
12
11
  * `CSSProperties` type and logic for converting CSS values into strings.
13
12
  *
14
13
  * @public
15
14
  */
16
- export const createHooks: CreateHooksFn<CSSProperties>;
17
-
18
- /** @internal */
19
- declare function _stringifyValue(
20
- propertyName: string,
21
- value: unknown,
22
- ): string | null;
23
-
15
+ export declare const createHooks: import("@css-hooks/core").CreateHooksFn<CSSProperties>;
16
+ /**
17
+ * Following code (c) Meta Platforms, Inc. and affiliates.
18
+ * Source modified to account for custom properties.
19
+ */
24
20
  /** @internal */
25
- export const _unitlessNumbers: Set<string>;
21
+ export declare const _unitlessNumbers: Set<string>;