@css-hooks/qwik 2.0.4 → 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 (9) hide show
  1. package/README.md +30 -33
  2. package/cjs/index.js +78 -70
  3. package/cjs/isUnitlessNumber.js +60 -0
  4. package/esm/index.js +72 -63
  5. package/esm/isUnitlessNumber.js +56 -0
  6. package/package.json +10 -20
  7. package/tsdoc-metadata.json +11 -0
  8. package/types/index.d.ts +13 -13
  9. package/types/isUnitlessNumber.d.ts +8 -0
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,24 +67,22 @@ 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>
package/cjs/index.js CHANGED
@@ -1,78 +1,86 @@
1
- 'use strict';
2
- // @ts-nocheck
3
-
4
- const { buildHooksSystem } = require("@css-hooks/core");
5
-
6
- 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
- }
1
+ "use strict";
2
+ /**
3
+ * CSS Hooks for {@link https://qwik.dev | Qwik}
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");
10
+ /** @internal */
11
+ function _stringifyValue(value, propertyName) {
12
+ switch (typeof value) {
13
+ case "string":
14
+ return value;
15
+ case "number":
16
+ return `${value}${isUnitlessNumber(propertyName) ? "" : "px"}`;
17
+ default:
18
+ return null;
19
+ }
15
20
  }
16
- exports._stringifyValue = _stringifyValue
17
-
18
- const createHooks = buildHooksSystem(_stringifyValue);
19
- exports.createHooks = createHooks;
20
-
21
+ exports._stringifyValue = _stringifyValue;
22
+ /**
23
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use Qwik's
24
+ * `CSSProperties` type and logic for converting CSS values into strings.
25
+ *
26
+ * @public
27
+ */
28
+ exports.createHooks = (0, core_1.buildHooksSystem)(_stringifyValue);
21
29
  /**
22
30
  * Following code (c) Builder.io.
23
31
  * Source modified to account for custom properties.
24
32
  */
25
-
26
- /** CSS properties which accept numbers but are not in units of "px". */
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
- "flexShrink",
41
- "gridArea",
42
- "gridRow",
43
- "gridRowEnd",
44
- "gridRowStart",
45
- "gridColumn",
46
- "gridColumnEnd",
47
- "gridColumnStart",
48
- "fontWeight",
49
- "lineClamp",
50
- "lineHeight",
51
- "opacity",
52
- "order",
53
- "orphans",
54
- "scale",
55
- "tabSize",
56
- "widows",
57
- "zIndex",
58
- "zoom",
59
- "MozAnimationIterationCount", // Known Prefixed Properties
60
- "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
61
- "msFlex",
62
- "msFlexPositive",
63
- "WebkitAnimationIterationCount",
64
- "WebkitBoxFlex",
65
- "WebkitBoxOrdinalGroup",
66
- "WebkitColumnCount",
67
- "WebkitColumns",
68
- "WebkitFlex",
69
- "WebkitFlexGrow",
70
- "WebkitFlexShrink",
71
- "WebkitLineClamp",
33
+ /**
34
+ * CSS properties which accept numbers but are not in units of "px".
35
+ *
36
+ * @internal
37
+ */
38
+ exports._unitlessNumbers = new Set([
39
+ "animationIterationCount",
40
+ "aspectRatio",
41
+ "borderImageOutset",
42
+ "borderImageSlice",
43
+ "borderImageWidth",
44
+ "boxFlex",
45
+ "boxFlexGroup",
46
+ "boxOrdinalGroup",
47
+ "columnCount",
48
+ "columns",
49
+ "flex",
50
+ "flexGrow",
51
+ "flexShrink",
52
+ "gridArea",
53
+ "gridRow",
54
+ "gridRowEnd",
55
+ "gridRowStart",
56
+ "gridColumn",
57
+ "gridColumnEnd",
58
+ "gridColumnStart",
59
+ "fontWeight",
60
+ "lineClamp",
61
+ "lineHeight",
62
+ "opacity",
63
+ "order",
64
+ "orphans",
65
+ "scale",
66
+ "tabSize",
67
+ "widows",
68
+ "zIndex",
69
+ "zoom",
70
+ "MozAnimationIterationCount", // Known Prefixed Properties
71
+ "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
72
+ "msFlex",
73
+ "msFlexPositive",
74
+ "WebkitAnimationIterationCount",
75
+ "WebkitBoxFlex",
76
+ "WebkitBoxOrdinalGroup",
77
+ "WebkitColumnCount",
78
+ "WebkitColumns",
79
+ "WebkitFlex",
80
+ "WebkitFlexGrow",
81
+ "WebkitFlexShrink",
82
+ "WebkitLineClamp",
72
83
  ]);
73
- exports._unitlessNumbers = _unitlessNumbers;
74
-
75
84
  function isUnitlessNumber(name) {
76
- return /^--/.test(name) || _unitlessNumbers.has(name);
85
+ return /^--/.test(name) || exports._unitlessNumbers.has(name);
77
86
  }
78
- exports.isUnitlessNumber = isUnitlessNumber
package/cjs/isUnitlessNumber.js ADDED
@@ -0,0 +1,60 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.unitlessNumbers = void 0;
4
+ /**
5
+ * CSS properties which accept numbers but are not in units of "px".
6
+ *
7
+ * @internal
8
+ */
9
+ exports.unitlessNumbers = new Set([
10
+ "animationIterationCount",
11
+ "aspectRatio",
12
+ "borderImageOutset",
13
+ "borderImageSlice",
14
+ "borderImageWidth",
15
+ "boxFlex",
16
+ "boxFlexGroup",
17
+ "boxOrdinalGroup",
18
+ "columnCount",
19
+ "columns",
20
+ "flex",
21
+ "flexGrow",
22
+ "flexShrink",
23
+ "gridArea",
24
+ "gridRow",
25
+ "gridRowEnd",
26
+ "gridRowStart",
27
+ "gridColumn",
28
+ "gridColumnEnd",
29
+ "gridColumnStart",
30
+ "fontWeight",
31
+ "lineClamp",
32
+ "lineHeight",
33
+ "opacity",
34
+ "order",
35
+ "orphans",
36
+ "scale",
37
+ "tabSize",
38
+ "widows",
39
+ "zIndex",
40
+ "zoom",
41
+ "MozAnimationIterationCount", // Known Prefixed Properties
42
+ "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
43
+ "msFlex",
44
+ "msFlexPositive",
45
+ "WebkitAnimationIterationCount",
46
+ "WebkitBoxFlex",
47
+ "WebkitBoxOrdinalGroup",
48
+ "WebkitColumnCount",
49
+ "WebkitColumns",
50
+ "WebkitFlex",
51
+ "WebkitFlexGrow",
52
+ "WebkitFlexShrink",
53
+ "WebkitLineClamp",
54
+ ]);
55
+ /** @internal */
56
+ function default_1(name) {
57
+ // modified from Builder.io's source to account for custom properties
58
+ return /^--/.test(name) || exports.unitlessNumbers.has(name);
59
+ }
60
+ exports.default = default_1;
package/esm/index.js CHANGED
@@ -1,73 +1,82 @@
1
- // @ts-nocheck
2
-
1
+ /**
2
+ * CSS Hooks for {@link https://qwik.dev | Qwik}
3
+ *
4
+ * @packageDocumentation
5
+ */
3
6
  import { buildHooksSystem } from "@css-hooks/core";
4
-
5
- export function _stringifyValue(propertyName, value) {
6
- switch (typeof value) {
7
- case "string":
8
- return value;
9
- case "number":
10
- return `${value}${isUnitlessNumber(propertyName) ? "" : "px"}`;
11
- default:
12
- return null;
13
- }
7
+ /** @internal */
8
+ export function _stringifyValue(value, propertyName) {
9
+ switch (typeof value) {
10
+ case "string":
11
+ return value;
12
+ case "number":
13
+ return `${value}${isUnitlessNumber(propertyName) ? "" : "px"}`;
14
+ default:
15
+ return null;
16
+ }
14
17
  }
15
-
18
+ /**
19
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use Qwik's
20
+ * `CSSProperties` type and logic for converting CSS values into strings.
21
+ *
22
+ * @public
23
+ */
16
24
  export const createHooks = buildHooksSystem(_stringifyValue);
17
-
18
25
  /**
19
26
  * Following code (c) Builder.io.
20
27
  * Source modified to account for custom properties.
21
28
  */
22
-
23
- /** CSS properties which accept numbers but are not in units of "px". */
29
+ /**
30
+ * CSS properties which accept numbers but are not in units of "px".
31
+ *
32
+ * @internal
33
+ */
24
34
  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
- "flexShrink",
38
- "gridArea",
39
- "gridRow",
40
- "gridRowEnd",
41
- "gridRowStart",
42
- "gridColumn",
43
- "gridColumnEnd",
44
- "gridColumnStart",
45
- "fontWeight",
46
- "lineClamp",
47
- "lineHeight",
48
- "opacity",
49
- "order",
50
- "orphans",
51
- "scale",
52
- "tabSize",
53
- "widows",
54
- "zIndex",
55
- "zoom",
56
- "MozAnimationIterationCount", // Known Prefixed Properties
57
- "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
58
- "msFlex",
59
- "msFlexPositive",
60
- "WebkitAnimationIterationCount",
61
- "WebkitBoxFlex",
62
- "WebkitBoxOrdinalGroup",
63
- "WebkitColumnCount",
64
- "WebkitColumns",
65
- "WebkitFlex",
66
- "WebkitFlexGrow",
67
- "WebkitFlexShrink",
68
- "WebkitLineClamp",
35
+ "animationIterationCount",
36
+ "aspectRatio",
37
+ "borderImageOutset",
38
+ "borderImageSlice",
39
+ "borderImageWidth",
40
+ "boxFlex",
41
+ "boxFlexGroup",
42
+ "boxOrdinalGroup",
43
+ "columnCount",
44
+ "columns",
45
+ "flex",
46
+ "flexGrow",
47
+ "flexShrink",
48
+ "gridArea",
49
+ "gridRow",
50
+ "gridRowEnd",
51
+ "gridRowStart",
52
+ "gridColumn",
53
+ "gridColumnEnd",
54
+ "gridColumnStart",
55
+ "fontWeight",
56
+ "lineClamp",
57
+ "lineHeight",
58
+ "opacity",
59
+ "order",
60
+ "orphans",
61
+ "scale",
62
+ "tabSize",
63
+ "widows",
64
+ "zIndex",
65
+ "zoom",
66
+ "MozAnimationIterationCount", // Known Prefixed Properties
67
+ "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
68
+ "msFlex",
69
+ "msFlexPositive",
70
+ "WebkitAnimationIterationCount",
71
+ "WebkitBoxFlex",
72
+ "WebkitBoxOrdinalGroup",
73
+ "WebkitColumnCount",
74
+ "WebkitColumns",
75
+ "WebkitFlex",
76
+ "WebkitFlexGrow",
77
+ "WebkitFlexShrink",
78
+ "WebkitLineClamp",
69
79
  ]);
70
-
71
- export function isUnitlessNumber(name) {
72
- return /^--/.test(name) || _unitlessNumbers.has(name);
80
+ function isUnitlessNumber(name) {
81
+ return /^--/.test(name) || _unitlessNumbers.has(name);
73
82
  }
package/esm/isUnitlessNumber.js ADDED
@@ -0,0 +1,56 @@
1
+ /**
2
+ * CSS properties which accept numbers but are not in units of "px".
3
+ *
4
+ * @internal
5
+ */
6
+ export const unitlessNumbers = new Set([
7
+ "animationIterationCount",
8
+ "aspectRatio",
9
+ "borderImageOutset",
10
+ "borderImageSlice",
11
+ "borderImageWidth",
12
+ "boxFlex",
13
+ "boxFlexGroup",
14
+ "boxOrdinalGroup",
15
+ "columnCount",
16
+ "columns",
17
+ "flex",
18
+ "flexGrow",
19
+ "flexShrink",
20
+ "gridArea",
21
+ "gridRow",
22
+ "gridRowEnd",
23
+ "gridRowStart",
24
+ "gridColumn",
25
+ "gridColumnEnd",
26
+ "gridColumnStart",
27
+ "fontWeight",
28
+ "lineClamp",
29
+ "lineHeight",
30
+ "opacity",
31
+ "order",
32
+ "orphans",
33
+ "scale",
34
+ "tabSize",
35
+ "widows",
36
+ "zIndex",
37
+ "zoom",
38
+ "MozAnimationIterationCount", // Known Prefixed Properties
39
+ "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
40
+ "msFlex",
41
+ "msFlexPositive",
42
+ "WebkitAnimationIterationCount",
43
+ "WebkitBoxFlex",
44
+ "WebkitBoxOrdinalGroup",
45
+ "WebkitColumnCount",
46
+ "WebkitColumns",
47
+ "WebkitFlex",
48
+ "WebkitFlexGrow",
49
+ "WebkitFlexShrink",
50
+ "WebkitLineClamp",
51
+ ]);
52
+ /** @internal */
53
+ export default function (name) {
54
+ // modified from Builder.io's source to account for custom properties
55
+ return /^--/.test(name) || unitlessNumbers.has(name);
56
+ }
package/package.json CHANGED
@@ -1,30 +1,25 @@
1
1
  {
2
2
  "name": "@css-hooks/qwik",
3
3
  "description": "CSS Hooks for Qwik",
4
- "version": "2.0.4",
4
+ "version": "3.0.0",
5
5
  "author": "Nick Saunders",
6
6
  "dependencies": {
7
- "@css-hooks/core": "2.0.4"
7
+ "@css-hooks/core": "3.0.0"
8
8
  },
9
9
  "devDependencies": {
10
- "@builder.io/qwik": "^1.3.0",
10
+ "@builder.io/qwik": "^1.9.0",
11
11
  "@microsoft/api-extractor": "^7.39.4",
12
- "@tsconfig/strictest": "^2.0.1",
13
12
  "@types/node": "^20.12.7",
14
- "@typescript-eslint/eslint-plugin": "^7.0.0",
15
- "@typescript-eslint/parser": "^7.0.0",
16
- "ascjs": "^6.0.3",
17
- "eslint": "^8.50.0",
18
- "eslint-plugin-compat": "^4.2.0",
19
13
  "rimraf": "^5.0.1",
20
- "ts-watch": "^1.0.8",
21
- "typescript": "^5.1.6"
14
+ "tsx": "^4.19.1",
15
+ "typescript": "^5.4.2"
22
16
  },
23
17
  "files": [
24
18
  "cjs",
25
19
  "esm",
26
20
  "types",
27
- "tsdoc-metadata.json"
21
+ "tsdoc-metadata.json",
22
+ "!**/*.test.*"
28
23
  ],
29
24
  "license": "MIT",
30
25
  "main": "cjs",
@@ -47,19 +42,14 @@
47
42
  "types": "types",
48
43
  "exports": {
49
44
  ".": {
45
+ "@css-hooks/source": "./src/index.ts",
50
46
  "import": "./esm/index.js",
51
47
  "require": "./cjs/index.js",
52
48
  "types": "./types/index.d.ts"
53
49
  }
54
50
  },
55
- "browserslist": [
56
- "supports css-variables"
57
- ],
58
51
  "scripts": {
59
- "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",
60
- "clean": "rimraf cjs esm out types",
61
- "lint": "eslint src .*.*js *.*js",
62
- "test": "tsc && node --test",
63
- "test.watch": "tsc-watch --onSuccess 'node --test'"
52
+ "clean": "rimraf cjs esm types",
53
+ "test": "node --import tsx --conditions @css-hooks/source --test src/index.test.ts"
64
54
  }
65
55
  }
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,23 @@
3
3
  *
4
4
  * @packageDocumentation
5
5
  */
6
-
7
6
  import type { CSSProperties } from "@builder.io/qwik";
8
- import type { 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 Qwik'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
-
24
- /** @internal */
25
- export const _unitlessNumbers: Set<string>;
15
+ export declare const createHooks: import("@css-hooks/core").CreateHooksFn<CSSProperties>;
16
+ /**
17
+ * Following code (c) Builder.io.
18
+ * Source modified to account for custom properties.
19
+ */
20
+ /**
21
+ * CSS properties which accept numbers but are not in units of "px".
22
+ *
23
+ * @internal
24
+ */
25
+ export declare const _unitlessNumbers: Set<string>;
package/types/isUnitlessNumber.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * CSS properties which accept numbers but are not in units of "px".
3
+ *
4
+ * @internal
5
+ */
6
+ export declare const unitlessNumbers: Set<string>;
7
+ /** @internal */
8
+ export default function (name: string): boolean;