@css-hooks/core 1.8.1 → 2.0.0

package/esm/index.js

@@ -1,268 +1,287 @@
-function isHookSpec(x) {
-    if (!x) {
-        return false;
-    }
-    if (typeof x === "string") {
-        return (x.startsWith(":") ||
-            x.startsWith("@media ") ||
-            x.startsWith("@container ") ||
-            x.startsWith("@supports ") ||
-            x.includes("&"));
-    }
-    if (typeof x === "object") {
-        if ("or" in x && x.or instanceof Array) {
-            return !x.or.some(xx => !isHookSpec(xx));
-        }
-        if ("and" in x && x.and instanceof Array) {
-            return !x.and.some(xx => !isHookSpec(xx));
-        }
-    }
-    return false;
-}
-/** @internal */
-export function genericStringify(_, value) {
-    if (typeof value === "string") {
-        return value;
-    }
-    if (typeof value === "number") {
-        return `${value}`;
-    }
-    return null;
+// @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;
 }
+
 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;
+  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;
     }
-    return hashValue.toString(36);
+    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(config, options) {
-        const fallbackKeyword = (options === null || options === void 0 ? void 0 : options.fallback) || "unset";
-        const stringifyImpl = (propertyName, value) => {
-            return typeof value === "string" && value.startsWith("var(")
-                ? value
-                : stringify(propertyName, value);
-        };
-        const hookId = (options === null || options === void 0 ? void 0 : options.hookNameToId) ||
-            ((hookName) => {
-                const specHash = hash(config[hookName]);
-                return (options === null || options === void 0 ? void 0 : options.debug)
-                    ? `${hookName.replace(/[^A-Za-z0-9-]/g, "_")}-${specHash}`
-                    : specHash;
-            });
-        const hooks = Object.entries(config)
-            .map(([name, definition]) => {
-            function nest(input) {
-                if (typeof input === "object") {
-                    if ("and" in input) {
-                        if (input.and.length > 2) {
-                            const [left, ...rest] = input.and;
-                            return { and: [left, nest({ and: rest })] };
-                        }
-                        return {
-                            and: input.and.map(item => typeof item === "string" ? item : nest(item)),
-                        };
-                    }
-                    if ("or" in input) {
-                        if (input.or.length > 2) {
-                            const [left, ...rest] = input.or;
-                            return { or: [left, nest({ or: rest })] };
-                        }
-                        return {
-                            or: input.or.map(item => typeof item === "string" ? item : nest(item)),
-                        };
-                    }
-                }
-                return input;
+  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 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 (!isHookSpec(definition) || typeof definition !== "object") {
-                return [name, definition];
+
+            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;
             }
-            return [name, nest(definition)];
-        })
-            .flatMap(([name, definition]) => (function hooksCSS(name, definition) {
-            if (!isHookSpec(definition)) {
-                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 (typeof definition === "object") {
-                let a, operator, b, extraHooksCSS = [];
-                if ("or" in definition) {
-                    operator = "or";
-                    [a, b] = definition.or;
-                    if (!a) {
-                        return [];
-                    }
-                    if (!b) {
-                        return hooksCSS(name, a);
-                    }
-                    extraHooksCSS = [
-                        {
-                            init: (function aorb(x) {
-                                const a = `${x}A`;
-                                const b = `${x}B`;
-                                return [
-                                    `--${x}-0:var(--${a}-0,var(--${b}-0));`,
-                                    `--${x}-1:var(--${a}-1) var(--${b}-1);`,
-                                ].join("");
-                            })(name),
-                        },
-                    ];
-                }
-                else if ("and" in definition) {
-                    operator = "and";
-                    [a, b] = definition.and;
-                    if (!a) {
-                        return [];
-                    }
-                    if (!b) {
-                        return hooksCSS(name, a);
-                    }
-                    extraHooksCSS = [
-                        {
-                            init: (function aandb(x) {
-                                const a = `${x}A`;
-                                const b = `${x}B`;
-                                return [
-                                    `--${x}-0:var(--${a}-0) var(--${b}-0);`,
-                                    `--${x}-1:var(--${a}-1,var(--${b}-1));`,
-                                ].join("");
-                            })(name),
-                        },
-                    ];
-                }
-                if (operator) {
-                    return [
-                        ...hooksCSS(`${name}A`, a),
-                        ...hooksCSS(`${name}B`, b),
-                        ...extraHooksCSS,
-                    ];
-                }
+
+            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;
             }
-            const init = `--${name}-0:initial;--${name}-1: ;`;
-            let rule;
-            if (typeof definition === "string") {
-                if (definition.includes("&")) {
-                    rule = `${definition.replace(/&/g, "*")}{--${name}-0: ;--${name}-1:initial;}`;
-                }
-                else if (definition.startsWith(":")) {
-                    rule = `${definition}{--${name}-0: ;--${name}-1:initial;}`;
-                }
-                else if (definition.startsWith("@")) {
-                    rule = `${definition}{*{--${name}-0: ;--${name}-1:initial;}}`;
-                }
+          }
+
+          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("");
             }
-            return rule === undefined ? [] : [{ init, rule }];
-        })(hookId(name), definition))
-            .reduce((acc, { init = "", rule = "" }) => ({
-            init: acc.init + init,
-            rule: acc.rule + rule,
-        }), {
-            init: "",
-            rule: "",
-        });
-        function cssImpl(properties, fallback = propertyName => stringifyImpl(propertyName, properties[propertyName])) {
-            const sort = options === null || options === void 0 ? void 0 : options.sort;
-            const keys = sort ? Object.keys(properties) : [];
-            for (const k in properties) {
-                const key = k;
-                const value = properties[key];
-                if (key in config) {
-                    const hookName = key;
-                    const innerProperties = value;
-                    cssImpl(innerProperties, propertyName => {
-                        let v = stringifyImpl(propertyName, innerProperties[propertyName]);
-                        if (v === null) {
-                            v = fallback(propertyName);
-                        }
-                        if (v === null) {
-                            v = fallbackKeyword;
-                        }
-                        return v;
-                    });
-                    for (const propertyNameStr in innerProperties) {
-                        if (keys.indexOf(propertyNameStr) > keys.indexOf(hookName)) {
-                            continue;
-                        }
-                        const propertyName = propertyNameStr;
-                        const v1 = stringifyImpl(propertyName, innerProperties[propertyName]);
-                        if (v1 !== null) {
-                            let v0 = fallback(propertyName);
-                            if (v0 === null) {
-                                v0 = fallbackKeyword;
-                            }
-                            if (sort) {
-                                delete properties[propertyName];
-                            }
-                            properties[propertyName] = `var(--${hookId(hookName)}-1, ${v1}) var(--${hookId(hookName)}-0, ${v0})`;
-                        }
-                    }
-                    delete properties[hookName];
-                }
-                else if (sort) {
-                    delete properties[key];
-                    properties[key] =
-                        value;
-                }
+          }
+        })(hookNameToId(hookName), hookCondition);
+      }
+
+      return sheet;
+    }
+
+    function css(...args) {
+      const style = {};
+      let conditionCount = 0;
+      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 properties;
+            delete rule.on;
+            return [baseStyles, conditionalStyles];
+          },
+          [[], []],
+        )
+        .reduce((a, b) => {
+          return a.concat(b);
+        }, []);
+      for (const rule of rules) {
+        if (!rule || typeof rule !== "object") {
+          continue;
         }
-        function css(...styles) {
-            do {
-                const current = styles[0];
-                const next = styles[1] || {};
-                for (const k in next) {
-                    if (options === null || options === void 0 ? void 0 : options.sort) {
-                        if (k in current) {
-                            delete current[k];
-                        }
-                    }
-                    current[k] = next[k];
+        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)`;
                 }
-                styles.splice(1, 1);
-            } while (styles[1]);
-            return cssImpl(styles[0]);
+              }
+              return name;
+            })(`cond${conditionCount++}`, 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;
         }
-        return [`*{${hooks.init}}${hooks.rule}`, css];
-    };
+        for (const [property, value] of Object.entries(rule)) {
+          if (sortProperties) {
+            delete style[property];
+          }
+          style[property] = value;
+        }
+      }
+      return style;
+    }
+
+    return { styleSheet, css };
+  };
 }
-/**
- * A list of hooks offered as a "sensible default" to solve the most common use cases.
- *
- * @deprecated Use the `@css-hooks/recommended` package instead.
- */
-export const recommended = {
-    active: ":active",
-    autofill: { or: [":autofill", ":-webkit-autofill"] },
-    checked: ":checked",
-    default: ":default",
-    disabled: ":disabled",
-    empty: ":empty",
-    enabled: ":enabled",
-    evenChild: ":nth-child(even)",
-    firstChild: ":first-child",
-    firstOfType: ":first-of-type",
-    focus: ":focus",
-    focusVisible: ":focus-visible",
-    focusWithin: ":focus-within",
-    hover: ":hover",
-    inRange: ":in-range",
-    indeterminate: ":indeterminate",
-    invalid: ":invalid",
-    lastChild: ":last-child",
-    lastOfType: ":last-of-type",
-    oddChild: ":nth-child(odd)",
-    onlyChild: ":only-child",
-    onlyOfType: ":only-of-type",
-    outOfRange: ":out-of-range",
-    placeholderShown: { or: [":placeholder-shown", ":-moz-placeholder-shown"] },
-    readOnly: { or: [":read-only", ":-moz-read-only"] },
-    readWrite: { or: [":read-write", ":-moz-read-write"] },
-    required: ":required",
-    target: ":target",
-    valid: ":valid",
-    visited: ":visited",
-};

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@css-hooks/core",
   "description": "CSS Hooks core library",
-  "version": "1.8.1",
+  "version": "2.0.0",
   "author": "Nick Saunders",
   "devDependencies": {
+    "@microsoft/api-extractor": "^7.39.4",
     "@tsconfig/strictest": "^2.0.1",
-    "@types/css-tree": "^2.3.2",
+    "@types/color": "^3.0.6",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
-    "css-tree": "^2.3.1",
+    "ascjs": "^6.0.3",
+    "color": "^4.2.3",
+    "csstype": "^3.1.3",
     "eslint": "^8.47.0",
+    "eslint-plugin-compat": "^4.2.0",
+    "lightningcss": "^1.23.0",
+    "puppeteer": "^21.7.0",
     "rimraf": "^5.0.1",
     "tsc-watch": "^6.0.4",
     "typescript": "^5.1.6"
@@ -17,7 +23,8 @@
   "files": [
     "cjs",
     "esm",
-    "types"
+    "types",
+    "tsdoc-metadata.json"
   ],
   "license": "MIT",
   "main": "cjs",
@@ -30,9 +37,10 @@
     "directory": "packages/core"
   },
   "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",
-    "prepublishOnly": "tsc -p tsconfig.dist.json --outDir esm --module es6 && tsc -p tsconfig.dist.json --outDir cjs --module commonjs && tsc -p tsconfig.dist.json --outDir types --declaration --emitDeclarationOnly",
+    "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",
     "test": "tsc && node --test",
     "test.watch": "tsc-watch --onSuccess 'node --test'"
   },
@@ -43,5 +51,8 @@
       "require": "./cjs/index.js",
       "types": "./types/index.d.ts"
     }
-  }
+  },
+  "browserslist": [
+    "supports css-variables and supports object-entries"
+  ]
 }