@css-hooks/core 1.8.1 → 2.0.0

package/README.md

@@ -15,55 +15,87 @@
 
 ## 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:
+Hooks add CSS features to native inline styles, enabling you to apply styles
+conditionally based on pseudo-classes, custom selectors, media queries, and
+more—all without leaving the `style` prop. By exploiting the hidden
+programmability of CSS Variables, CSS Hooks delivers a flexible CSS-in-JS
+experience without runtime style injection or build steps.
+
+## Feature highlights
+
+### Pseudo-classes
 
 ```jsx
-<a
-  href="https://css-hooks.com/"
+<button
   style={css({
-    color: "#03f",
-    fontSize: "1rem",
-    "&:hover": {
-      color: "#09f",
-    },
-    "&:active": {
-      color: "#e33",
-    },
-    "@media (1000px <= width)": {
-      fontSize: "1.25rem",
-    },
+    background: "#004982",
+    color: "#eeeff0",
+    on: $ => [
+      $("&:hover", {
+        background: "#1b659c",
+      }),
+      $("&:active", {
+        background: "#9f3131",
+      }),
+    ],
   })}
 >
-  Hooks
-</a>
+  Save changes
+</button>
+```
+
+### Selectors
+
+```jsx
+<label>
+  <input type="checkbox" checked />
+  <span
+    style={css({
+      on: $ => [
+        $(":checked + &", {
+          textDecoration: "line-through",
+        }),
+      ],
+    })}
+  >
+    Simplify CSS architecture
+  </span>
+</label>
 ```
 
-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.
+### Responsive design
+
+```jsx
+<>
+  <span
+    style={css({
+      on: ($, { not }) => [
+        $(not("@container sm"), {
+          display: "none",
+        }),
+      ],
+    })}
+  >
+    sm
+  </span>
+  <span
+    style={css({
+      on: ($, { not }) => [
+        $(not("@container lg"), {
+          display: "none",
+        }),
+      ],
+    })}
+  >
+    lg
+  </span>
+</>
+```
 
 ## 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](https://github.com/css-hooks/css-hooks/tree/master/packages/react):
-  React framework integration
-- [@css-hooks/preact](https://github.com/css-hooks/css-hooks/tree/master/packages/preact):
-  Preact framework integration
-- [@css-hooks/solid](https://github.com/css-hooks/css-hooks/tree/master/packages/solid):
-  Solid framework integration
-- [@css-hooks/qwik](https://github.com/css-hooks/css-hooks/tree/master/packages/qwik):
-  Qwik framework integration
-- [@css-hooks/core](https://github.com/css-hooks/css-hooks/tree/master/packages/core):
-  Core package (internal / advanced use cases)
-
 ## Contributing
 
 Contributions are welcome. Please see the

package/cjs/index.js

@@ -1,273 +1,289 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.recommended = exports.buildHooksSystem = exports.genericStringify = void 0;
-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 */
+'use strict';
+// @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;
+  if (typeof value === "string") {
+    return value;
+  }
+
+  if (typeof value === "number") {
+    return `${value}`;
+  }
+
+  return null;
 }
-exports.genericStringify = genericStringify;
+
 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 })] };
 }
+
 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 };
+  };
 }
-exports.buildHooksSystem = buildHooksSystem;
-/**
- * A list of hooks offered as a "sensible default" to solve the most common use cases.
- *
- * @deprecated Use the `@css-hooks/recommended` package instead.
- */
-exports.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",
-};
+exports.buildHooksSystem = buildHooksSystem