@css-hooks/qwik 1.6.0

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2023 Nick Saunders
+
+Copyright (c) BuilderIO
+
+Copyright (c) Meta Platforms Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,69 @@
+<p align="center">
+  
+  <a href="https://css-hooks.com/#gh-light-mode-only" target="_blank">
+    <img alt="CSS Hooks" src="https://raw.githubusercontent.com/css-hooks/css-hooks/HEAD/.github/logo-light.svg" width="310" height="64" style="max-width: 100%;">
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://github.com/css-hooks/css-hooks/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/css-hooks/css-hooks/ci.yml?branch=master" alt="Build Status"></a>
+  <a href="https://www.npmjs.com/org/css-hooks"><img src="https://img.shields.io/npm/v/@css-hooks%2Fcore.svg" alt="Latest Release"></a>
+  <a href="https://github.com/css-hooks/css-hooks/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/css-hooks.svg" alt="License"></a>
+</p>
+
+---
+
+## 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:
+
+```jsx
+<a
+  href="https://css-hooks.com/"
+  style={css({
+    color: "#03f",
+    fontSize: "1rem",
+    "&:hover": {
+      color: "#09f",
+    },
+    "&:active": {
+      color: "#e33",
+    },
+    "@media (1000px <= width)": {
+      fontSize: "1.25rem",
+    },
+  })}
+>
+  Hooks
+</a>
+```
+
+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.
+
+## 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](packages/react): React framework integration
+- [@css-hooks/preact](packages/preact): Preact framework integration
+- [@css-hooks/solid](packages/solid): Solid framework integration
+- [@css-hooks/awik](packages/qwik): Qwik framework integration
+- [@css-hooks/core](packages/core): Core package (internal / advanced use cases)
+
+## Contributing
+
+Contributions are welcome. Please see the
+[contributing guidelines](CONTRIBUTING.md) for more information.
+
+## License
+
+CSS Hooks is offered under the [MIT license](LICENSE).

package/cjs/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createHooks = exports.stringifyValue = void 0;
+const core_1 = require("@css-hooks/core");
+const isUnitlessNumber_js_1 = __importDefault(require("./isUnitlessNumber.js"));
+/**
+ * @internal
+ *
+ * @remarks
+ * Theoretically this should line up with the behavior of
+ * {@link https://github.com/BuilderIO/qwik/blob/1c6ccf935b3b7f2dc175b90b0503ae6936ba25ff/packages/qwik/src/core/render/execute-component.ts#L155-L187}.
+ */
+function stringifyValue(propertyName, value) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (typeof value === "number") {
+        return `${value}${(0, isUnitlessNumber_js_1.default)(propertyName) ? "" : "px"}`;
+    }
+    return null;
+}
+exports.stringifyValue = stringifyValue;
+/**
+ * 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)(stringifyValue);

package/cjs/isUnitlessNumber.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unitlessNumbers = void 0;
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ *
+ * @internal
+ */
+exports.unitlessNumbers = new Set([
+    "animationIterationCount",
+    "aspectRatio",
+    "borderImageOutset",
+    "borderImageSlice",
+    "borderImageWidth",
+    "boxFlex",
+    "boxFlexGroup",
+    "boxOrdinalGroup",
+    "columnCount",
+    "columns",
+    "flex",
+    "flexGrow",
+    "flexShrink",
+    "gridArea",
+    "gridRow",
+    "gridRowEnd",
+    "gridRowStart",
+    "gridColumn",
+    "gridColumnEnd",
+    "gridColumnStart",
+    "fontWeight",
+    "lineClamp",
+    "lineHeight",
+    "opacity",
+    "order",
+    "orphans",
+    "scale",
+    "tabSize",
+    "widows",
+    "zIndex",
+    "zoom",
+    "MozAnimationIterationCount", // Known Prefixed Properties
+    "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
+    "msFlex",
+    "msFlexPositive",
+    "WebkitAnimationIterationCount",
+    "WebkitBoxFlex",
+    "WebkitBoxOrdinalGroup",
+    "WebkitColumnCount",
+    "WebkitColumns",
+    "WebkitFlex",
+    "WebkitFlexGrow",
+    "WebkitFlexShrink",
+    "WebkitLineClamp",
+]);
+/** @internal */
+function default_1(name) {
+    // modified from Builder.io's source to account for custom properties
+    return /^--/.test(name) || exports.unitlessNumbers.has(name);
+}
+exports.default = default_1;

package/esm/index.js

@@ -0,0 +1,26 @@
+import { buildHooksSystem } from "@css-hooks/core";
+import isUnitlessNumber from "./isUnitlessNumber.js";
+/**
+ * @internal
+ *
+ * @remarks
+ * Theoretically this should line up with the behavior of
+ * {@link https://github.com/BuilderIO/qwik/blob/1c6ccf935b3b7f2dc175b90b0503ae6936ba25ff/packages/qwik/src/core/render/execute-component.ts#L155-L187}.
+ */
+export function stringifyValue(propertyName, value) {
+    if (typeof value === "string") {
+        return value;
+    }
+    if (typeof value === "number") {
+        return `${value}${isUnitlessNumber(propertyName) ? "" : "px"}`;
+    }
+    return null;
+}
+/**
+ * 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);

package/esm/isUnitlessNumber.js

@@ -0,0 +1,56 @@
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ *
+ * @internal
+ */
+export const unitlessNumbers = new Set([
+    "animationIterationCount",
+    "aspectRatio",
+    "borderImageOutset",
+    "borderImageSlice",
+    "borderImageWidth",
+    "boxFlex",
+    "boxFlexGroup",
+    "boxOrdinalGroup",
+    "columnCount",
+    "columns",
+    "flex",
+    "flexGrow",
+    "flexShrink",
+    "gridArea",
+    "gridRow",
+    "gridRowEnd",
+    "gridRowStart",
+    "gridColumn",
+    "gridColumnEnd",
+    "gridColumnStart",
+    "fontWeight",
+    "lineClamp",
+    "lineHeight",
+    "opacity",
+    "order",
+    "orphans",
+    "scale",
+    "tabSize",
+    "widows",
+    "zIndex",
+    "zoom",
+    "MozAnimationIterationCount", // Known Prefixed Properties
+    "MozBoxFlex", // TODO: Remove these since they shouldn't be used in modern code
+    "msFlex",
+    "msFlexPositive",
+    "WebkitAnimationIterationCount",
+    "WebkitBoxFlex",
+    "WebkitBoxOrdinalGroup",
+    "WebkitColumnCount",
+    "WebkitColumns",
+    "WebkitFlex",
+    "WebkitFlexGrow",
+    "WebkitFlexShrink",
+    "WebkitLineClamp",
+]);
+/** @internal */
+export default function (name) {
+    // modified from Builder.io's source to account for custom properties
+    return /^--/.test(name) || unitlessNumbers.has(name);
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@css-hooks/qwik",
+  "description": "CSS Hooks for Qwik",
+  "version": "1.6.0",
+  "author": "Nick Saunders",
+  "dependencies": {
+    "@css-hooks/core": "^1.6.0"
+  },
+  "devDependencies": {
+    "@builder.io/qwik": "^1.3.0",
+    "@tsconfig/strictest": "^2.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "eslint": "^8.50.0",
+    "rimraf": "^5.0.1",
+    "ts-watch": "^1.0.8",
+    "typescript": "^5.1.6"
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "types"
+  ],
+  "license": "MIT",
+  "main": "cjs",
+  "module": "esm",
+  "type": "module",
+  "peerDependencies": {
+    "@builder.io/qwik": ">=1.2.0 <2"
+  },
+  "peerDependenciesMeta": {
+    "@builder.io/qwik": {
+      "optional": true
+    }
+  },
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/css-hooks/css-hooks.git",
+    "directory": "packages/qwik"
+  },
+  "scripts": {
+    "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",
+    "test": "tsc && node --test",
+    "test.watch": "tsc-watch --onSuccess 'node --test'"
+  },
+  "types": "types",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js",
+      "types": "./types/index.d.ts"
+    }
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,33 @@
+import type { CSSProperties } from "@builder.io/qwik";
+/**
+ * @internal
+ *
+ * @remarks
+ * Theoretically this should line up with the behavior of
+ * {@link https://github.com/BuilderIO/qwik/blob/1c6ccf935b3b7f2dc175b90b0503ae6936ba25ff/packages/qwik/src/core/render/execute-component.ts#L155-L187}.
+ */
+export declare function stringifyValue(propertyName: string, value: unknown): string | null;
+/**
+ * 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 declare const createHooks: <HookProperties extends string>(config: Record<HookProperties, `@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | {
+    or: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | any | {
+        and: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
+    })[];
+} | {
+    and: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | {
+        or: readonly (`@container ${string}` | `@media ${string}` | `:${string}` | `${string}&${string}` | any | any)[];
+    } | any)[];
+}>, options?: (({
+    debug?: boolean;
+    hookNameToId?: undefined;
+} | {
+    debug?: undefined;
+    hookNameToId?: (hookName: string) => string;
+}) & {
+    fallback?: "unset" | "revert-layer";
+}) | undefined) => [string, (properties: import("@css-hooks/core").WithHooks<HookProperties, CSSProperties>) => CSSProperties];

package/types/isUnitlessNumber.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ *
+ * @internal
+ */
+export declare const unitlessNumbers: Set<string>;
+/** @internal */
+export default function (name: string): boolean;