@tamagui/web 2.4.5 → 2.5.0

package/dist/esm/helpers/getSplitStyles.native.js

@@ -20,12 +20,14 @@ import { defaultMediaImportance, pseudoDescriptors, pseudoPriorities } from "./p
 import { skipProps } from "./skipProps.native.js";
 import { sortString } from "./sortString.native.js";
 import { styleOriginalValues } from "./styleOriginalValues.native.js";
+import { STYLE_TOKEN_PROVENANCE_KEY, getStyleTokenProvenance, setStyleTokenProvenance } from "./styleProvenance.native.js";
 import { transformsToString } from "./transformsToString.native.js";
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
   return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
+var shouldTrackStyleTokenProvenance = process.env.NODE_ENV === "development" && process.env.TAMAGUI_ENABLE_STYLE_TOKEN_PROVENANCE === "1";
 var conf;
 var PROP_SPLIT = "-";
 function normalizeGroupKey(key, groupContext) {
@@ -78,9 +80,12 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       }
     }
     if (keyInit in skipProps && !noSkip && !isHOC) {
-      var _driver_animations;
       if (keyInit === "group") ;
-      if (keyInit === "transition" && typeof valInit === "string" && !(driver === null || driver === void 0 ? void 0 : (_driver_animations = driver.animations) === null || _driver_animations === void 0 ? void 0 : _driver_animations[valInit])) {} else return "continue";
+      if (keyInit === "transition" && typeof valInit === "string") {
+        var _driver_animations;
+        var animationConfig = driver === null || driver === void 0 ? void 0 : (_driver_animations = driver.animations) === null || _driver_animations === void 0 ? void 0 : _driver_animations[valInit];
+        if (animationConfig && (driver === null || driver === void 0 ? void 0 : driver.outputStyle) === "css" && process.env.IS_STATIC === "is_static") valInit = `all ${animationConfig}`;else if (animationConfig) return "continue";
+      } else return "continue";
     }
     var isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles$1, accept);
     if (!isValidStyleKeyInit) {
@@ -139,45 +144,45 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed) styleState.fontFamily = valInit;
     }
     var disablePropMap = isMediaOrPseudo || !isStyleLikeKey;
-    propMapper(keyInit, valInit, styleState, disablePropMap, function (key5, val2, originalVal) {
+    propMapper(keyInit, valInit, styleState, disablePropMap, function (key6, val2, originalVal) {
       var _parentStaticConfig_variants;
-      var isStyledContextProp = styledContext && key5 in styledContext;
+      var isStyledContextProp = styledContext && key6 in styledContext;
       if (!isHOC && disablePropMap && !isStyledContextProp && !isMediaOrPseudo) {
-        viewProps[key5] = val2;
+        viewProps[key6] = val2;
         return;
       }
       if (process.env.NODE_ENV === "development" && debug === "verbose") {
-        console.groupCollapsed("  💠 expanded", keyInit, "=>", key5);
+        console.groupCollapsed("  💠 expanded", keyInit, "=>", key6);
         log(val2);
         console.groupEnd();
       }
       if (val2 == null) return;
-      if (key5 === "pointerEvents") {
-        viewProps[key5] = val2;
+      if (key6 === "pointerEvents") {
+        viewProps[key6] = val2;
         return;
       }
-      if (!isHOC && isValidStyleKey(key5, validStyles$1, accept) || isAndroid && key5 === "elevation") {
-        mergeStyle(styleState, key5, val2, 1, false, originalVal);
+      if (!isHOC && isValidStyleKey(key6, validStyles$1, accept) || isAndroid && key6 === "elevation") {
+        mergeStyle(styleState, key6, val2, 1, false, originalVal);
         return;
       }
-      isPseudo = key5 in validPseudoKeys;
-      isMedia = isPseudo ? false : getMediaKey(key5);
+      isPseudo = key6 in validPseudoKeys;
+      isMedia = isPseudo ? false : getMediaKey(key6);
       isMediaOrPseudo = Boolean(isMedia || isPseudo);
-      isVariant = variants && key5 in variants;
-      if (isMedia === "group") key5 = normalizeGroupKey(key5, groupContext);
-      if (shouldSkipNativeHoverProp(key5, isMedia)) return;
-      if ((inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(key5)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened === null || inlineWhenUnflattened === void 0 ? void 0 : inlineWhenUnflattened.has(key5))) {
+      isVariant = variants && key6 in variants;
+      if (isMedia === "group") key6 = normalizeGroupKey(key6, groupContext);
+      if (shouldSkipNativeHoverProp(key6, isMedia)) return;
+      if ((inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(key6)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened === null || inlineWhenUnflattened === void 0 ? void 0 : inlineWhenUnflattened.has(key6))) {
         var _props_key;
-        viewProps[key5] = (_props_key = props[key5]) !== null && _props_key !== void 0 ? _props_key : val2;
+        viewProps[key6] = (_props_key = props[key6]) !== null && _props_key !== void 0 ? _props_key : val2;
       }
       if (styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || (parentStaticConfig === null || parentStaticConfig === void 0 ? void 0 : (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit]))) {
-        passDownProp(viewProps, key5, val2, isMediaOrPseudo);
+        passDownProp(viewProps, key6, val2, isMediaOrPseudo);
         if (process.env.NODE_ENV === "development" && debug === "verbose") {
-          console.groupCollapsed(` - passing down prop ${key5}`);
+          console.groupCollapsed(` - passing down prop ${key6}`);
           log({
             val: val2,
             after: {
-              ...viewProps[key5]
+              ...viewProps[key6]
             }
           });
           console.groupEnd();
@@ -186,23 +191,23 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       }
       if (isPseudo) {
         if (!val2) return;
-        var pseudoStyleObject = getSubStyle(styleState, key5, val2, styleProps.noClass && !(process.env.IS_STATIC === "is_static"));
+        var pseudoStyleObject = getSubStyle(styleState, key6, val2, styleProps.noClass && !(process.env.IS_STATIC === "is_static"));
         if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
           var _pseudos, _key;
           pseudos || (pseudos = {});
-          (_pseudos = pseudos)[_key = key5] || (_pseudos[_key] = {});
+          (_pseudos = pseudos)[_key = key6] || (_pseudos[_key] = {});
           if (process.env.IS_STATIC === "is_static") {
-            Object.assign(pseudos[key5], pseudoStyleObject);
+            Object.assign(pseudos[key6], pseudoStyleObject);
             return;
           }
         }
-        var descriptor = pseudoDescriptors[key5];
-        var isEnter = key5 === "enterStyle";
-        var isExit = key5 === "exitStyle";
+        var descriptor = pseudoDescriptors[key6];
+        var isEnter = key6 === "enterStyle";
+        var isExit = key6 === "exitStyle";
         if (!descriptor) return;
         if (shouldDoClasses && !isExit) {
           var pseudoStyles = getStyleAtomic(pseudoStyleObject, descriptor);
-          if (process.env.NODE_ENV === "development" && debug === "verbose") console.info("pseudo:", key5, pseudoStyleObject, pseudoStyles);
+          if (process.env.NODE_ENV === "development" && debug === "verbose") console.info("pseudo:", key6, pseudoStyleObject, pseudoStyles);
           var _iteratorNormalCompletion3 = true,
             _didIteratorError3 = false,
             _iteratorError3 = void 0;
@@ -228,7 +233,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
           if (isExit) isDisabled = !styleProps.isExiting;
           if (isEnter && componentState.unmounted === false) isDisabled = true;
           if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.groupCollapsed("pseudo", key5, {
+            console.groupCollapsed("pseudo", key6, {
               isDisabled
             });
             log({
@@ -250,8 +255,8 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
                 if (process.env.IS_STATIC === "is_static") {
                   var _pseudos1, _key1;
                   pseudos || (pseudos = {});
-                  (_pseudos1 = pseudos)[_key1 = key5] || (_pseudos1[_key1] = {});
-                  pseudos[key5][pkey] = _$val;
+                  (_pseudos1 = pseudos)[_key1 = key6] || (_pseudos1[_key1] = {});
+                  pseudos[key6][pkey] = _$val;
                 }
                 mergeStyle(styleState, pkey, _$val, importance, false, pseudoOriginalValues === null || pseudoOriginalValues === void 0 ? void 0 : pseudoOriginalValues[pkey]);
               }
@@ -264,25 +269,25 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
             }
           }
           if (!isDisabled) for (var _$key in val2) {
-            var k = shorthands[_$key] || _$key;
-            styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
+            var k2 = shorthands[_$key] || _$key;
+            styleState.usedKeys[k2] = Math.max(importance, styleState.usedKeys[k2] || 0);
           }
         }
         return;
       }
       if (isMedia) {
         if (!val2) return;
-        var mediaKeyShort = key5.slice(isMedia == "theme" ? 7 : 1);
+        var mediaKeyShort = key6.slice(isMedia == "theme" ? 7 : 1);
         hasMedia || (hasMedia = true);
         if (val2["space"] || !shouldDoClasses || styleProps.willBeAnimated) {
           if (!hasMedia || typeof hasMedia === "boolean") hasMedia = /* @__PURE__ */new Set();
           hasMedia.add(mediaKeyShort);
         }
         if (isMedia === "platform") {
-          if (!isActivePlatform(key5)) return;
+          if (!isActivePlatform(key6)) return;
         }
-        if (process.env.NODE_ENV === "development" && debug === "verbose") log(`  \u{1F4FA} ${key5}`, {
-          key: key5,
+        if (process.env.NODE_ENV === "development" && debug === "verbose") log(`  \u{1F4FA} ${key6}`, {
+          key: key6,
           val: val2,
           props,
           shouldDoClasses,
@@ -293,7 +298,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
         var priority = mediaStylesSeen;
         mediaStylesSeen += 1;
         if (shouldDoClasses) {
-          var mediaStyles = getCSSStylesAtomic(getSubStyle(styleState, key5, val2, false));
+          var mediaStyles = getCSSStylesAtomic(getSubStyle(styleState, key6, val2, false));
           var _iteratorNormalCompletion12 = true,
             _didIteratorError12 = false,
             _iteratorError12 = void 0;
@@ -320,14 +325,14 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
             }
           }
         } else {
-          let mergeMediaStyle2 = function (key6, val3, originalVal2) {
+          let mergeMediaStyle2 = function (key7, val3, originalVal2) {
             var _styleState4;
-            if (!isValidStyleKey(key6, validStyles$1, accept)) {
-              viewProps[key6] = val3;
+            if (!isValidStyleKey(key7, validStyles$1, accept)) {
+              viewProps[key7] = val3;
               return;
             }
             (_styleState4 = styleState).style || (_styleState4.style = {});
-            if (mergeMediaByImportance(styleState, mediaKeyShort, key6, val3, mediaState$1[mediaKeyShort], importanceBump, debug, originalVal2) && key6 === "fontFamily") styleState.fontFamily = mediaStyle1.fontFamily;
+            if (mergeMediaByImportance(styleState, mediaKeyShort, key7, val3, mediaState$1[mediaKeyShort], importanceBump, debug, originalVal2) && key7 === "fontFamily") styleState.fontFamily = mediaStyle1.fontFamily;
           };
           var isThemeMedia = isMedia === "theme";
           var isGroupMedia = isMedia === "group";
@@ -339,7 +344,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
             }
             if (process.env.NODE_ENV === "development" && debug === "verbose") log(`  \u{1F4FA} \u2705 ENABLED ${mediaKeyShort}`);
           }
-          var mediaStyle1 = getSubStyle(styleState, key5, val2, true);
+          var mediaStyle1 = getSubStyle(styleState, key6, val2, true);
           var importanceBump = 0;
           if (isThemeMedia) {
             if (supportsDynamicColorIOS && getSetting("fastSchemeChange")) {
@@ -468,7 +473,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       }
       if (!isVariant) {
         if (isStyledContextProp) return;
-        viewProps[key5] = val2;
+        viewProps[key6] = val2;
       }
     });
     if (process.env.NODE_ENV === "development" && debug === "verbose") {
@@ -540,9 +545,9 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       fallbackProps
     } = styleProps;
     if (fallbackProps) styleState.props = new Proxy(props, {
-      get(_, key5, val2) {
-        if (!Reflect.has(props, key5)) return Reflect.get(fallbackProps, key5);
-        return Reflect.get(props, key5);
+      get(_, key6, val2) {
+        if (!Reflect.has(props, key6)) return Reflect.get(fallbackProps, key6);
+        return Reflect.get(props, key6);
       }
     });
   }
@@ -612,7 +617,12 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       if (style) if (style["$$css"]) Object.assign(styleState.classNames, style);else {
         var _styleState2;
         (_styleState2 = styleState).style || (_styleState2.style = {});
-        Object.assign(styleState.style, normalizeStyle(style));
+        var normalized = normalizeStyle(style);
+        Object.assign(styleState.style, normalized);
+        if (shouldTrackStyleTokenProvenance) {
+          var styleOriginals = styleOriginalValues.get(normalized);
+          for (var k in normalized) recordStyleTokenProvenance(styleState, k, styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[k]);
+        }
       }
     }
   }
@@ -638,6 +648,18 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
     if (process.env.NODE_ENV === "development" && debug && debug !== "profile") log(`Found fontFamily native: ${style1.fontFamily}`, faceInfo);
   }
   if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
+  if (shouldTrackStyleTokenProvenance && styleState.style && styleState.tokenProvenance) {
+    var provenance = {};
+    var hasProvenance = false;
+    for (var key4 in styleState.tokenProvenance) {
+      provenance[key4] = {
+        token: styleState.tokenProvenance[key4],
+        theme: themeName
+      };
+      hasProvenance = true;
+    }
+    if (hasProvenance) setStyleTokenProvenance(styleState.style, provenance);
+  }
   var result = {
     hasMedia,
     fontFamily: styleState.fontFamily,
@@ -672,7 +694,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
           rulesToInsert,
           parentSplitStyles
         };
-        for (var key4 in logs) log(key4, logs[key4]);
+        for (var key5 in logs) log(key5, logs[key5]);
       } catch (e) {}
       console.groupEnd();
     }
@@ -722,9 +744,16 @@ function mergeStyle(styleState, key, val, importance) {
       (_styleState2 = styleState).style || (_styleState2.style = {});
       usedKeys[key] = importance;
       styleState.style[key] = key === "transform" && Array.isArray(out) ? [...out] : out;
+      if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
     }
   }
 }
+function recordStyleTokenProvenance(styleState, key, originalVal) {
+  if (typeof originalVal === "string" && originalVal[0] === "$") {
+    var _styleState;
+    ((_styleState = styleState).tokenProvenance || (_styleState.tokenProvenance = {}))[key] = originalVal;
+  } else if (styleState.tokenProvenance && key in styleState.tokenProvenance) delete styleState.tokenProvenance[key];
+}
 var getSubStyle = function (styleState, subKey, styleIn, avoidMergeTransform) {
   var {
     staticConfig,
@@ -892,5 +921,5 @@ function applyDefaultStyle(pkey, styleState) {
   var defaultValues = animatableDefaults[pkey];
   if (defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style))) mergeStyle(styleState, pkey, defaultValues, 1);
 }
-export { PROP_SPLIT, getSplitStyles, getSubStyle, styleOriginalValues, useSplitStyles };
+export { PROP_SPLIT, STYLE_TOKEN_PROVENANCE_KEY, getSplitStyles, getStyleTokenProvenance, getSubStyle, styleOriginalValues, useSplitStyles };
 //# sourceMappingURL=getSplitStyles.native.js.map