@css-hooks/core 2.0.4 → 3.0.1

package/esm/index.js

@@ -1,308 +1,132 @@
-// @ts-nocheck
-
-const helpers = {
-  and: (...and) => ({ and }),
-  or: (...or) => ({ or }),
-  not: not => ({ not }),
-};
-
-function genericStringify(_, value) {
-  if (typeof value === "string") {
-    return value;
-  }
-
-  if (typeof value === "number") {
-    return `${value}`;
-  }
-
-  return null;
+/**
+ * CSS Hooks core library
+ *
+ * @packageDocumentation
+ */
+/**
+ * Creates a flavor of CSS Hooks tailored to a specific app framework.
+ *
+ * @param stringify - The function used to stringify values when merging
+ * conditional styles.
+ *
+ * @returns The `createHooks` function used to bootstrap CSS Hooks within an app
+ * or component library.
+ *
+ * @remarks
+ * Primarily for internal use, advanced use cases, or when an appropriate
+ * framework integration is not provided.
+ *
+ * @public
+ *
+ */
+export function buildHooksSystem(stringify = String) {
+    return (...selectors) => {
+        const [space, newline] = 
+        // @ts-expect-error bundler expected to replace `process.env.NODE_ENV` expression
+        process.env.NODE_ENV === "development" ? [" ", "\n"] : ["", ""];
+        return {
+            styleSheet() {
+                const indent = Array(2).fill(space).join("");
+                return `*${space}{${newline}${selectors
+                    .flatMap(selector => [
+                    `${indent}--${createHash(selector)}-0:${space}initial;`,
+                    `${indent}--${createHash(selector)}-1:${space};`,
+                ])
+                    .join(newline)}${newline}}${newline}${selectors
+                    .flatMap(def => {
+                    if (def.startsWith("@")) {
+                        return [
+                            `${def} {`,
+                            `${indent}* {`,
+                            `${indent}${indent}--${createHash(def)}-0:${space};`,
+                            `${indent}${indent}--${createHash(def)}-1:${space}initial;`,
+                            `${indent}}`,
+                            "}",
+                        ];
+                    }
+                    return [
+                        `${def.replace(/&/g, "*")}${space}{`,
+                        `${indent}--${createHash(def)}-0:${space};`,
+                        `${indent}--${createHash(def)}-1:${space}initial;`,
+                        "}",
+                    ];
+                })
+                    .join(newline)}`;
+            },
+            and: (...and) => ({ and }),
+            or: (...or) => ({ or }),
+            not: not => ({ not }),
+            on(condition, conditionalStyle) {
+                return fallbackStyle => {
+                    const style = { ...fallbackStyle };
+                    for (const property in conditionalStyle) {
+                        const conditionalValue = stringify(conditionalStyle[property], property);
+                        if (conditionalValue === null) {
+                            continue;
+                        }
+                        let fallbackValue = "revert-layer";
+                        if (property in style) {
+                            const fv = stringify(style[property], property);
+                            if (fv !== null) {
+                                fallbackValue = fv;
+                            }
+                        }
+                        const [value, extraDecls] = buildExpression(condition, conditionalValue, fallbackValue);
+                        Object.assign(style, { [property]: value }, extraDecls);
+                    }
+                    return style;
+                    function buildExpression(condition, valueIfTrue, valueIfFalse) {
+                        if (typeof condition === "string") {
+                            let valTrue = valueIfTrue, valFalse = valueIfFalse;
+                            const extraDecls = {};
+                            if (valTrue.length > 32) {
+                                const hash = createHash(valTrue);
+                                extraDecls[`--${hash}`] = valTrue;
+                                valTrue = `var(--${hash})`;
+                            }
+                            if (valFalse.length > 32) {
+                                const hash = createHash(valFalse);
+                                extraDecls[`--${hash}`] = valFalse;
+                                valFalse = `var(--${hash})`;
+                            }
+                            return [
+                                `var(--${createHash(condition)}-1,${space}${valTrue})${space}var(--${createHash(condition)}-0,${space}${valFalse})`,
+                                extraDecls,
+                            ];
+                        }
+                        if ("and" in condition) {
+                            const [head, ...tail] = condition.and;
+                            if (!head) {
+                                return [valueIfTrue, {}];
+                            }
+                            if (tail.length === 0) {
+                                return buildExpression(head, valueIfTrue, valueIfFalse);
+                            }
+                            const [tailExpr, tailDecls] = buildExpression({ and: tail }, valueIfTrue, valueIfFalse);
+                            const [expr, decls] = buildExpression(head, tailExpr, valueIfFalse);
+                            return [expr, { ...decls, ...tailDecls }];
+                        }
+                        if ("or" in condition) {
+                            return buildExpression({ and: condition.or.map(not => ({ not })) }, valueIfFalse, valueIfTrue);
+                        }
+                        if (condition.not) {
+                            return buildExpression(condition.not, valueIfFalse, valueIfTrue);
+                        }
+                        throw new Error(`Invalid condition: ${JSON.stringify(condition)}`);
+                    }
+                };
+            },
+        };
+    };
 }
-
-function hash(obj) {
-  const jsonString = JSON.stringify(obj);
-
-  let hashValue = 0;
-
-  for (let i = 0; i < jsonString.length; i++) {
-    const charCode = jsonString.charCodeAt(i);
-    hashValue = (hashValue << 5) - hashValue + charCode;
-    hashValue &= 0x7fffffff;
-  }
-
-  return hashValue.toString(36);
-}
-
-function normalizeCondition(cond) {
-  if (!cond) {
-    return undefined;
-  }
-  if (typeof cond === "string") {
-    return cond;
-  }
-  if (typeof cond !== "object") {
-    return undefined;
-  }
-  if ("not" in cond) {
-    if (!cond.not) {
-      return undefined;
-    }
-    if (cond.not.not) {
-      return normalizeCondition(cond.not.not);
-    }
-    const inner = normalizeCondition(cond.not);
-    return inner ? { not: inner } : undefined;
-  }
-  const [operator] = Object.keys(cond);
-  const [head, ...tail] = cond[operator].map(normalizeCondition).filter(x => x);
-  if (!head) {
-    return undefined;
-  }
-  if (tail.length === 0) {
-    return head;
-  }
-  if (tail.length === 1) {
-    return { [operator]: [head, tail[0]] };
-  }
-  return { [operator]: [head, normalizeCondition({ [operator]: tail })] };
-}
-
-export function buildHooksSystem(stringify = genericStringify) {
-  return function createHooks({
-    hooks: hooksConfigUnresolved,
-    fallback = "revert-layer",
-    debug,
-    sort: {
-      properties: sortProperties = true,
-      conditionalStyles: sortConditionalStyles = true,
-    } = {},
-    hookNameToId: customHookNameToId,
-  }) {
-    const hooksConfig =
-      typeof hooksConfigUnresolved === "function"
-        ? hooksConfigUnresolved(helpers)
-        : hooksConfigUnresolved;
-
-    const [space, newline] = debug ? [" ", "\n"] : ["", ""];
-    const indent = `${space}${space}`;
-
-    const hookNameToId =
-      customHookNameToId ||
-      (hookName => {
-        const specHash = hash(hooksConfig[hookName]);
-        return debug
-          ? `${hookName.replace(/[^A-Za-z0-9-]/g, "_")}-${specHash}`
-          : specHash;
-      });
-
-    function conditionToId(condition) {
-      if (condition) {
-        if (typeof condition === "string") {
-          return hookNameToId(condition);
-        }
-        if (typeof condition === "object") {
-          if (condition.and) {
-            return `_${condition.and.map(conditionToId).join("-and-")}_`;
-          }
-          if (condition.or) {
-            return `_${condition.or.map(conditionToId).join("-or-")}_`;
-          }
-          if (condition.not) {
-            return `_-not-${conditionToId(condition.not)}_`;
-          }
-        }
-      }
-      return `${condition}`;
-    }
-
-    function styleSheet() {
-      function variablePair({ id, initial, indents }) {
-        return [0, 1]
-          .map(
-            i =>
-              `${Array(indents).fill(indent).join("")}--${id}-${i}:${space}${
-                initial === i ? "initial" : space ? "" : " "
-              };${newline}`,
-          )
-          .join("");
-      }
-
-      let sheet = `*${space}{${newline}`;
-
-      const hooks = Object.entries(hooksConfig)
-        .map(([hookName, hookCondition]) => [
-          hookName,
-          normalizeCondition(hookCondition),
-        ])
-        .filter(([, hookCondition]) => hookCondition);
-
-      for (const [hookName, hookCondition] of hooks) {
-        (function it(id, hookCondition) {
-          if (hookCondition && typeof hookCondition === "object") {
-            if (hookCondition.not) {
-              it(`${id}X`, hookCondition.not);
-              sheet += `${indent}--${id}-0:${space}var(--${id}X-1);${newline}`;
-              sheet += `${indent}--${id}-1:${space}var(--${id}X-0);${newline}`;
-              return;
-            }
-
-            if ("and" in hookCondition || "or" in hookCondition) {
-              const operator = hookCondition.and ? "and" : "or";
-              it(`${id}A`, hookCondition[operator][0]);
-              it(`${id}B`, hookCondition[operator][1]);
-              if (operator === "and") {
-                sheet += `${indent}--${id}-0:${space}var(--${id}A-0)${space}var(--${id}B-0);${newline}`;
-                sheet += `${indent}--${id}-1:${space}var(--${id}A-1,${space}var(--${id}B-1));${newline}`;
-              } else {
-                sheet += `${indent}--${id}-0:${space}var(--${id}A-0,${space}var(--${id}B-0));${newline}`;
-                sheet += `${indent}--${id}-1:${space}var(--${id}A-1)${space}var(--${id}B-1);${newline}`;
-              }
-              return;
-            }
-          }
-          sheet += variablePair({ id, initial: 0, indents: 1 });
-        })(hookNameToId(hookName), hookCondition);
-      }
-
-      sheet += `}${newline}`;
-
-      for (const [hookName, hookCondition] of hooks) {
-        (function it(id, hookCondition) {
-          if (hookCondition && typeof hookCondition === "object") {
-            if (hookCondition.not) {
-              return it(`${id}X`, hookCondition.not);
-            }
-
-            if ("and" in hookCondition || "or" in hookCondition) {
-              const operator = hookCondition.and ? "and" : "or";
-              it(`${id}A`, hookCondition[operator][0]);
-              it(`${id}B`, hookCondition[operator][1]);
-              return;
-            }
-          }
-
-          if (typeof hookCondition === "string") {
-            if (hookCondition[0] === "@") {
-              sheet += [
-                `${hookCondition}${space}{${newline}`,
-                `${indent}*${space}{${newline}`,
-                variablePair({
-                  id,
-                  initial: 1,
-                  indents: 2,
-                }),
-                `${indent}}${newline}`,
-                `}${newline}`,
-              ].join("");
-            } else {
-              sheet += [
-                `${hookCondition.replace(/&/g, "*")}${space}{${newline}`,
-                variablePair({
-                  id,
-                  initial: 1,
-                  indents: 1,
-                }),
-                `}${newline}`,
-              ].join("");
-            }
-          }
-        })(hookNameToId(hookName), hookCondition);
-      }
-
-      return sheet;
-    }
-
-    function css(...args) {
-      const style = {};
-      const rules = args
-        .filter(rule => rule)
-        .reduce(
-          ([baseStyles, conditionalStyles], rule) => {
-            if (rule.on) {
-              baseStyles.push(rule);
-              (sortConditionalStyles ? conditionalStyles : baseStyles).push(
-                ...(typeof rule.on === "function"
-                  ? rule.on((condition, styles) => [condition, styles], helpers)
-                  : rule.on),
-              );
-            } else {
-              baseStyles.push(rule);
-            }
-            return [baseStyles, conditionalStyles];
-          },
-          [[], []],
-        )
-        .reduce((a, b) => {
-          return a.concat(b);
-        }, []);
-      for (const rule of rules) {
-        if (!rule || typeof rule !== "object") {
-          continue;
-        }
-        if (rule instanceof Array && rule.length === 2) {
-          let conditionId = normalizeCondition(rule[0]);
-          if (!conditionId) {
-            continue;
-          }
-          if (typeof conditionId === "string") {
-            conditionId = hookNameToId(conditionId);
-          } else if (typeof conditionId === "object") {
-            conditionId = (function it(name, cond) {
-              if (typeof cond === "string") {
-                return hookNameToId(cond);
-              }
-              if (cond.not) {
-                const inner = it(`${name}X`, cond.not);
-                style[`--${name}-0`] = `var(--${inner}-1)`;
-                style[`--${name}-1`] = `var(--${inner}-0)`;
-              }
-              if (cond.and || cond.or) {
-                const operator = cond.and ? "and" : "or";
-                const a = it(`${name}A`, cond[operator][0]);
-                const b = it(`${name}B`, cond[operator][1]);
-                if (operator === "and") {
-                  style[`--${name}-0`] = `var(--${a}-0)${space}var(--${b}-0)`;
-                  style[`--${name}-1`] = `var(--${a}-1,${space}var(--${b}-1))`;
-                } else {
-                  style[`--${name}-0`] = `var(--${a}-0,${space}var(--${b}-0))`;
-                  style[`--${name}-1`] = `var(--${a}-1)${space}var(--${b}-1)`;
-                }
-              }
-              return name;
-            })(`cond-${hash(conditionToId(conditionId))}`, conditionId);
-          }
-          for (const [property, value] of Object.entries(rule[1])) {
-            const stringifiedValue = stringify(property, value);
-            if (stringifiedValue === null) {
-              continue;
-            }
-            const fallbackValue = (() => {
-              if (!(property in style)) {
-                return fallback;
-              }
-              const stringifiedValue = stringify(property, style[property]);
-              return stringifiedValue === null ? fallback : stringifiedValue;
-            })();
-            if (sortProperties) {
-              delete style[property];
-            }
-            style[property] =
-              `var(--${conditionId}-1,${space}${stringifiedValue})${space}var(--${conditionId}-0,${space}${fallbackValue})`;
-          }
-          continue;
-        }
-        for (const [property, value] of Object.entries(rule)) {
-          if (property === "on") {
-            continue;
-          }
-          if (sortProperties) {
-            delete style[property];
-          }
-          style[property] = value;
-        }
-      }
-      return style;
+function createHash(obj) {
+    const jsonString = JSON.stringify(obj);
+    let hashValue = 0;
+    for (let i = 0; i < jsonString.length; i++) {
+        const charCode = jsonString.charCodeAt(i);
+        hashValue = (hashValue << 5) - hashValue + charCode;
+        hashValue &= 0x7fffffff;
     }
-
-    return { styleSheet, css };
-  };
+    const str = hashValue.toString(36);
+    return /^[0-9]/.test(str) ? `a${str}` : str;
 }

package/package.json

@@ -1,30 +1,27 @@
 {
   "name": "@css-hooks/core",
   "description": "CSS Hooks core library",
-  "version": "2.0.4",
+  "version": "3.0.1",
   "author": "Nick Saunders",
   "devDependencies": {
     "@microsoft/api-extractor": "^7.39.4",
-    "@tsconfig/strictest": "^2.0.1",
     "@types/color": "^3.0.6",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "ascjs": "^6.0.3",
+    "@types/node": "^22.7.5",
     "color": "^4.2.3",
     "csstype": "^3.1.3",
-    "eslint": "^8.47.0",
-    "eslint-plugin-compat": "^4.2.0",
     "lightningcss": "^1.23.0",
     "puppeteer": "^22.0.0",
+    "remeda": "^2.14.0",
     "rimraf": "^5.0.1",
-    "tsc-watch": "^6.0.4",
-    "typescript": "^5.1.6"
+    "tsx": "^4.19.1",
+    "typescript": "^5.4.2"
   },
   "files": [
     "cjs",
     "esm",
     "types",
-    "tsdoc-metadata.json"
+    "tsdoc-metadata.json",
+    "!**/*.test.*"
   ],
   "license": "MIT",
   "main": "cjs",
@@ -39,19 +36,14 @@
   "types": "types",
   "exports": {
     ".": {
+      "@css-hooks/source": "./src/index.ts",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "browserslist": [
-    "supports css-variables and supports object-entries"
-  ],
   "scripts": {
-    "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",
-    "clean": "rimraf cjs esm out types",
-    "lint": "eslint src .*.*js *.*js",
-    "test": "tsc && node --test",
-    "test.watch": "tsc-watch --onSuccess 'node --test'"
+    "clean": "rimraf cjs esm types",
+    "test": "node --import tsx --conditions @css-hooks/source --test src/index.test.ts"
   }
 }