aberdeen 1.18.0 → 1.18.2

package/dist/src/aberdeen.d.ts

@@ -449,6 +449,8 @@ export declare function disableCreateDestroy(): void;
  *
  * Also, when the value is a string starting with `$`, it is treated as a reference to a CSS variable, expanding to `var(--variableName)`. For numeric variable names (which can't be used directly as CSS custom property names), Aberdeen prefixes them with `m`, so `$3` expands to `var(--m3)`. This is primarily intended for use with {@link setSpacingCssVars}, which initializes spacing variables named `0` through `12` with an exponential spacing scale.
  *
+ * To *set* a CSS custom property inline on an element, use a `--name` or (symmetrically with the `$`-reference syntax above) a `$name` key. For example `A('div --primary:red')` and `A('div $primary:red')` both set `--primary` to `red`.
+ *
  * @returns The most inner DOM element that was created (not counting text nodes nor elements created by content functions), or the current element if no new element was created. You should normally not need to use the return value - use this function's DOM manipulation abilities instead. One valid use case is when integrating with non-Aberdeen code that requires a reference to a DOM element.
  *
  * @example Create Element

package/dist/src/aberdeen.js

@@ -115,7 +115,10 @@ function undoSideEffects(el, se) {
         value ? el.classList.add(key) : el.classList.remove(key);
         break;
       case 1 /* Style */:
-        el.style[key] = value == null ? "" : value;
+        if (key[0] === "-" && key[1] === "-")
+          value ? el.style.setProperty(key, value) : el.style.removeProperty(key);
+        else
+          el.style[key] = value == null ? "" : value;
         break;
       case 2 /* Prop */:
         el[key] = value;
@@ -704,8 +707,10 @@ function isEmpty(proxied) {
   subscribe(target, ANY_SYMBOL, (index, newData, oldData) => {
     if (newData === EMPTY !== (oldData === EMPTY)) {
       const newEmpty = isObjEmpty(target);
-      scope.onChange(target, EMPTY, newEmpty, oldEmpty);
-      oldEmpty = newEmpty;
+      if (newEmpty !== oldEmpty) {
+        scope.onChange(target, EMPTY, newEmpty, oldEmpty);
+        oldEmpty = newEmpty;
+      }
     }
   });
   return oldEmpty;
@@ -1248,7 +1253,7 @@ function setSpacingCssVars(base = 1, unit = "rem") {
     cssVars[i] = 2 ** (i - 3) * base + unit;
   }
 }
-var CSS_VAR_PATTERN = /(\burl\([^)]*\))|("[^"]*")|(^| )\$([\w-]+)/g;
+var CSS_VAR_PATTERN = /(\burl\([^)]*\))|("[^"]*")|(^|[\s(,])\$([\w-]+)/g;
 var DIGIT_FIRST = /^\d/;
 function cssVarRef(value) {
   if (value.indexOf("$") < 0)
@@ -1685,16 +1690,27 @@ function applyArg(el, key, value) {
       list.remove(...classes);
   } else if (key[0] === "$") {
     key = key.substring(1);
+    if (key[0] === "$")
+      key = "--" + key.substring(1);
     const val = value == null || value === false ? "" : typeof value === "string" ? cssVarRef(value) : String(value);
     const expanded = CSS_SHORT[key] || key;
     const style = el.style;
     const setOwn = el === currentScope.el;
     const props = typeof expanded === "string" ? [expanded] : expanded;
     for (const prop of props) {
-      const cm = toCamel(prop);
-      if (setOwn)
-        recordSideEffect(currentScope, 1 /* Style */, cm, style[cm]);
-      style[cm] = val;
+      if (prop[0] === "-" && prop[1] === "-") {
+        if (setOwn)
+          recordSideEffect(currentScope, 1 /* Style */, prop, style.getPropertyValue(prop));
+        if (val === "")
+          style.removeProperty(prop);
+        else
+          style.setProperty(prop, val);
+      } else {
+        const cm = toCamel(prop);
+        if (setOwn)
+          recordSideEffect(currentScope, 1 /* Style */, cm, style[cm]);
+        style[cm] = val;
+      }
     }
   } else if (value == null) {} else if (key in SPECIAL_PROPS) {
     SPECIAL_PROPS[key](el, value);
@@ -1983,5 +1999,5 @@ export {
   A
 };
 
-//# debugId=F455E457CF1E8D7364756E2164756E21
+//# debugId=3B000DCA54AF8FFA64756E2164756E21
 //# sourceMappingURL=aberdeen.js.map