@css-hooks/qwik 1.8.1 → 2.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 (8) hide show
  1. package/README.md +69 -37
  2. package/cjs/index.js +75 -30
  3. package/esm/index.js +69 -22
  4. package/package.json +13 -5
  5. package/types/index.d.ts +19 -28
  6. package/cjs/isUnitlessNumber.js +0 -60
  7. package/esm/isUnitlessNumber.js +0 -56
  8. package/types/isUnitlessNumber.d.ts +0 -8
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,33 +1,78 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.createHooks = exports.stringifyValue = void 0;
7
- const core_1 = require("@css-hooks/core");
8
- const isUnitlessNumber_js_1 = __importDefault(require("./isUnitlessNumber.js"));
9
- /**
10
- * @internal
11
- *
12
- * @remarks
13
- * Theoretically this should line up with the behavior of
14
- * {@link https://github.com/BuilderIO/qwik/blob/1c6ccf935b3b7f2dc175b90b0503ae6936ba25ff/packages/qwik/src/core/render/execute-component.ts#L155-L187}.
15
- */
16
- function stringifyValue(propertyName, value) {
17
- if (typeof value === "string") {
18
- return value;
19
- }
20
- if (typeof value === "number") {
21
- return `${value}${(0, isUnitlessNumber_js_1.default)(propertyName) ? "" : "px"}`;
22
- }
23
- return null;
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
+ }
24
15
  }
25
- exports.stringifyValue = stringifyValue;
16
+ exports._stringifyValue = _stringifyValue
17
+
18
+ const createHooks = buildHooksSystem(_stringifyValue);
19
+ exports.createHooks = createHooks;
20
+
26
21
  /**
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.
22
+ * Following code (c) Builder.io.
23
+ * Source modified to account for custom properties.
32
24
  */
33
- exports.createHooks = (0, core_1.buildHooksSystem)(stringifyValue);
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",
72
+ ]);
73
+ exports._unitlessNumbers = _unitlessNumbers;
74
+
75
+ function isUnitlessNumber(name) {
76
+ return /^--/.test(name) || _unitlessNumbers.has(name);
77
+ }
78
+ exports.isUnitlessNumber = isUnitlessNumber
package/esm/index.js CHANGED
@@ -1,26 +1,73 @@
1
+ // @ts-nocheck
2
+
1
3
  import { buildHooksSystem } from "@css-hooks/core";
2
- import isUnitlessNumber from "./isUnitlessNumber.js";
3
- /**
4
- * @internal
5
- *
6
- * @remarks
7
- * Theoretically this should line up with the behavior of
8
- * {@link https://github.com/BuilderIO/qwik/blob/1c6ccf935b3b7f2dc175b90b0503ae6936ba25ff/packages/qwik/src/core/render/execute-component.ts#L155-L187}.
9
- */
10
- export function stringifyValue(propertyName, value) {
11
- if (typeof value === "string") {
12
- return value;
13
- }
14
- if (typeof value === "number") {
15
- return `${value}${isUnitlessNumber(propertyName) ? "" : "px"}`;
16
- }
17
- return null;
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
+ }
18
14
  }
15
+
16
+ export const createHooks = buildHooksSystem(_stringifyValue);
17
+
19
18
  /**
20
- * Creates the hooks specified in the configuration.
21
- *
22
- * @param config - The hooks to build
23
- *
24
- * @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
19
+ * Following code (c) Builder.io.
20
+ * Source modified to account for custom properties.
25
21
  */
26
- export const createHooks = buildHooksSystem(stringifyValue);
22
+
23
+ /** CSS properties which accept numbers but are not in units of "px". */
24
+ 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",
69
+ ]);
70
+
71
+ export function isUnitlessNumber(name) {
72
+ return /^--/.test(name) || _unitlessNumbers.has(name);
73
+ }
package/package.json CHANGED
@@ -1,17 +1,20 @@
1
1
  {
2
2
  "name": "@css-hooks/qwik",
3
3
  "description": "CSS Hooks for Qwik",
4
- "version": "1.8.1",
4
+ "version": "2.0.0",
5
5
  "author": "Nick Saunders",
6
6
  "dependencies": {
7
- "@css-hooks/core": "^1.8.1"
7
+ "@css-hooks/core": "^2.0.0"
8
8
  },
9
9
  "devDependencies": {
10
10
  "@builder.io/qwik": "^1.3.0",
11
+ "@microsoft/api-extractor": "^7.39.4",
11
12
  "@tsconfig/strictest": "^2.0.1",
12
13
  "@typescript-eslint/eslint-plugin": "^6.7.2",
13
14
  "@typescript-eslint/parser": "^6.7.2",
15
+ "ascjs": "^6.0.3",
14
16
  "eslint": "^8.50.0",
17
+ "eslint-plugin-compat": "^4.2.0",
15
18
  "rimraf": "^5.0.1",
16
19
  "ts-watch": "^1.0.8",
17
20
  "typescript": "^5.1.6"
@@ -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",
@@ -40,10 +44,11 @@
40
44
  "directory": "packages/qwik"
41
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",
43
48
  "clean": "rimraf cjs esm out types",
44
49
  "lint": "eslint src .*.*js *.*js",
45
50
  "postversion": "npm install @css-hooks/core@^$npm_package_version --force",
46
- "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",
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",
47
52
  "test": "tsc && node --test",
48
53
  "test.watch": "tsc-watch --onSuccess 'node --test'"
49
54
  },
@@ -54,5 +59,8 @@
54
59
  "require": "./cjs/index.js",
55
60
  "types": "./types/index.d.ts"
56
61
  }
57
- }
62
+ },
63
+ "browserslist": [
64
+ "supports css-variables"
65
+ ]
58
66
  }
package/types/index.d.ts CHANGED
@@ -1,34 +1,25 @@
1
- import type { CSSProperties } from "@builder.io/qwik";
2
1
  /**
3
- * @internal
2
+ * CSS Hooks for {@link https://qwik.dev | Qwik}
4
3
  *
5
- * @remarks
6
- * Theoretically this should line up with the behavior of
7
- * {@link https://github.com/BuilderIO/qwik/blob/1c6ccf935b3b7f2dc175b90b0503ae6936ba25ff/packages/qwik/src/core/render/execute-component.ts#L155-L187}.
4
+ * @packageDocumentation
8
5
  */
9
- export declare function stringifyValue(propertyName: string, value: unknown): string | null;
6
+
7
+ import type { CSSProperties } from "@builder.io/qwik";
8
+ import type { CreateHooksFn } from "@css-hooks/core";
9
+
10
10
  /**
11
- * Creates the hooks specified in the configuration.
12
- *
13
- * @param config - The hooks to build
11
+ * A {@link @css-hooks/core#CreateHooksFn} configured to use Qwik's
12
+ * `CSSProperties` type and logic for converting CSS values into strings.
14
13
  *
15
- * @returns The `hooks` CSS required to enable the configured hooks, along with the corresponding `css` function for use in components.
14
+ * @public
16
15
  */
17
- export declare const createHooks: <HookProperties extends string>(config: Record<HookProperties, `@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | {
18
- or: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | any | {
19
- and: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
20
- })[];
21
- } | {
22
- and: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | {
23
- or: readonly (`@container ${string}` | `@media ${string}` | `@supports ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
24
- } | any)[];
25
- }>, options?: (({
26
- debug?: boolean;
27
- hookNameToId?: undefined;
28
- } | {
29
- debug?: undefined;
30
- hookNameToId?: (hookName: string) => string;
31
- }) & {
32
- fallback?: "unset" | "revert-layer";
33
- sort?: boolean;
34
- }) | undefined) => [string, (styles_0: import("@css-hooks/core").WithHooks<HookProperties, CSSProperties>, ...styles_1: (import("@css-hooks/core").WithHooks<HookProperties, CSSProperties> | undefined)[]) => CSSProperties];
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>;
package/cjs/isUnitlessNumber.js DELETED
@@ -1,60 +0,0 @@
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/isUnitlessNumber.js DELETED
@@ -1,56 +0,0 @@
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/types/isUnitlessNumber.d.ts DELETED
@@ -1,8 +0,0 @@
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;