@tamagui/static 1.0.0-beta.9 → 1.0.1-beta.101

package/dist/esm/extractor/createExtractor.js

@@ -1,15 +1,46 @@
 var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { relative } from "path";
 import traverse from "@babel/traverse";
 import * as t from "@babel/types";
 import {
+  createDOMProps,
+  expandStyles,
   getSplitStyles,
+  getStylesAtomic,
   mediaQueryConfig,
-  normalizeStyleObject,
   proxyThemeVariables,
-  pseudos,
-  rnw
+  pseudoDescriptors,
+  stylePropsTransform
 } from "@tamagui/core-node";
 import { difference, pick } from "lodash";
 import { FAILED_EVAL } from "../constants";
@@ -39,12 +70,12 @@ const INLINE_EXTRACTABLE = {
   onPressIn: "onMouseDown",
   onPressOut: "onMouseUp"
 };
-const isAttr = /* @__PURE__ */ __name((x) => x.type === "attr", "isAttr");
+const isAttr = (x) => x.type === "attr";
 const validHooks = {
   useMedia: true,
   useTheme: true
 };
-const createTernary = /* @__PURE__ */ __name((x) => x, "createTernary");
+const createTernary = (x) => x;
 function createExtractor() {
   if (!process.env.TAMAGUI_TARGET) {
     console.log('\u26A0\uFE0F Please set process.env.TAMAGUI_TARGET to either "web" or "native"');
@@ -53,27 +84,52 @@ function createExtractor() {
   const shouldAddDebugProp = !process.env.npm_package_dependencies_next && process.env.TAMAGUI_TARGET !== "native" && process.env.IDENTIFY_TAGS !== "false" && (process.env.NODE_ENV === "development" || process.env.DEBUG || process.env.IDENTIFY_TAGS);
   let loadedTamaguiConfig;
   let hasLogged = false;
+  function isValidStyleKey(name, staticConfig) {
+    var _a, _b;
+    return !!(!!((_a = staticConfig.validStyles) == null ? void 0 : _a[name]) || !!pseudoDescriptors[name] || ((_b = staticConfig.variants) == null ? void 0 : _b[name]) || loadedTamaguiConfig.shorthands[name] || (name[0] === "$" ? !!mediaQueryConfig[name.slice(1)] : false));
+  }
   return {
     getTamagui() {
       return loadedTamaguiConfig;
     },
-    parse: (fileOrPath, {
-      config = "tamagui.config.ts",
-      importsWhitelist = ["constants.js"],
-      evaluateVars = true,
-      shouldPrintDebug = false,
-      sourcePath = "",
-      onExtractTag,
-      getFlattenedNode,
-      disable,
-      disableExtraction,
-      disableExtractInlineMedia,
-      disableExtractVariables,
-      disableDebugAttr,
-      prefixLogs,
-      excludeProps,
-      ...props
-    }) => {
+    parse: (fileOrPath, _a) => {
+      var _b = _a, {
+        config = "tamagui.config.ts",
+        importsWhitelist = ["constants.js"],
+        evaluateVars = true,
+        shouldPrintDebug = false,
+        sourcePath = "",
+        onExtractTag,
+        onStyleRule,
+        getFlattenedNode,
+        disable,
+        disableExtraction,
+        disableExtractInlineMedia,
+        disableExtractVariables,
+        disableDebugAttr,
+        extractStyledDefinitions = false,
+        prefixLogs,
+        excludeProps,
+        target
+      } = _b, props = __objRest(_b, [
+        "config",
+        "importsWhitelist",
+        "evaluateVars",
+        "shouldPrintDebug",
+        "sourcePath",
+        "onExtractTag",
+        "onStyleRule",
+        "getFlattenedNode",
+        "disable",
+        "disableExtraction",
+        "disableExtractInlineMedia",
+        "disableExtractVariables",
+        "disableDebugAttr",
+        "extractStyledDefinitions",
+        "prefixLogs",
+        "excludeProps",
+        "target"
+      ]);
       if (disable) {
         return null;
       }
@@ -83,6 +139,7 @@ function createExtractor() {
       if (!Array.isArray(props.components)) {
         throw new Error(`Must provide components array with list of Tamagui component modules`);
       }
+      const isTargetingHTML = target === "html";
       const ogDebug = shouldPrintDebug;
       const tm = timer();
       const { components, tamaguiConfig } = loadTamagui({
@@ -94,14 +151,23 @@ function createExtractor() {
       }
       tm.mark("load-tamagui", shouldPrintDebug === "verbose");
       loadedTamaguiConfig = tamaguiConfig;
-      const defaultTheme = proxyThemeVariables(tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]);
+      const proxiedTheme = proxyThemeVariables(tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]);
+      const themeAccessListeners = /* @__PURE__ */ new Set();
+      const defaultTheme = new Proxy(proxiedTheme, {
+        get(target2, key) {
+          if (key[0] === "$") {
+            themeAccessListeners.forEach((cb) => cb(String(key)));
+          }
+          return Reflect.get(target2, key);
+        }
+      });
       const body = fileOrPath.type === "Program" ? fileOrPath.get("body") : fileOrPath.program.body;
-      const isInternalImport = /* @__PURE__ */ __name((importStr) => {
+      const isInternalImport = (importStr) => {
         return isInsideTamagui(sourcePath) && importStr[0] === ".";
-      }, "isInternalImport");
+      };
       const validComponents = Object.keys(components).filter((key) => {
-        var _a;
-        return key[0].toUpperCase() === key[0] && !!((_a = components[key]) == null ? void 0 : _a.staticConfig);
+        var _a2;
+        return key[0].toUpperCase() === key[0] && !!((_a2 = components[key]) == null ? void 0 : _a2.staticConfig);
       }).reduce((obj, name) => {
         obj[name] = components[name];
         return obj;
@@ -116,11 +182,21 @@ function createExtractor() {
           continue;
         const node = "node" in bodyPath ? bodyPath.node : bodyPath;
         const from = node.source.value;
+        if (extractStyledDefinitions) {
+          if (from === "@tamagui/core" || from === "tamagui") {
+            if (node.specifiers.some((specifier) => {
+              return specifier.local.name === "styled";
+            })) {
+              doesUseValidImport = true;
+              break;
+            }
+          }
+        }
         const isValidImport = props.components.includes(from) || isInternalImport(from);
         if (isValidImport) {
           const isValidComponent = node.specifiers.some((specifier) => {
             const name = specifier.local.name;
-            return validComponents[name] || validHooks[name];
+            return !!(validComponents[name] || validHooks[name]);
           });
           if (shouldPrintDebug === "verbose") {
             console.log("import from", from, { isValidComponent });
@@ -141,11 +217,12 @@ function createExtractor() {
       let couldntParse = false;
       const modifiedComponents = /* @__PURE__ */ new Set();
       const bindingCache = {};
-      const callTraverse = /* @__PURE__ */ __name((a) => {
+      const callTraverse = (a) => {
         return fileOrPath.type === "File" ? traverse(fileOrPath, a) : fileOrPath.traverse(a);
-      }, "callTraverse");
+      };
       let programPath;
       const res = {
+        styled: 0,
         flattened: 0,
         optimized: 0,
         modified: 0,
@@ -157,8 +234,97 @@ function createExtractor() {
             programPath = path;
           }
         },
+        CallExpression(path) {
+          var _a2;
+          if (disable || disableExtraction || extractStyledDefinitions === false) {
+            return;
+          }
+          if (!t.isIdentifier(path.node.callee) || path.node.callee.name !== "styled") {
+            return;
+          }
+          const name = t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id) ? path.parent.id.name : "unknown";
+          const definition = path.node.arguments[1];
+          if (!name || !definition || !t.isObjectExpression(definition)) {
+            return;
+          }
+          const Component = validComponents[name];
+          if (!Component) {
+            if (shouldPrintDebug) {
+              console.log(`Didn't recognize styled(${name}), ${name} isn't in design system provided to tamagui.config.ts`);
+            }
+            return;
+          }
+          const componentSkipProps = /* @__PURE__ */ new Set([
+            ...Component.staticConfig.inlineWhenUnflattened || [],
+            ...Component.staticConfig.inlineProps || [],
+            ...Component.staticConfig.deoptProps || [],
+            "variants",
+            "defaultVariants",
+            "fontFamily",
+            "name"
+          ]);
+          const skipped = [];
+          const styles = {};
+          const staticNamespace = getStaticBindingsForScope(path.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug);
+          const attemptEval = !evaluateVars ? evaluateAstNode : createEvaluator({
+            tamaguiConfig,
+            staticNamespace,
+            sourcePath,
+            shouldPrintDebug
+          });
+          const attemptEvalSafe = createSafeEvaluator(attemptEval);
+          for (const property of definition.properties) {
+            if (!t.isObjectProperty(property) || !t.isIdentifier(property.key) || !isValidStyleKey(property.key.name, Component.staticConfig) || ((_a2 = Component.staticConfig.variants) == null ? void 0 : _a2[property.key.name]) || componentSkipProps.has(property.key.name)) {
+              skipped.push(property);
+              continue;
+            }
+            const out2 = attemptEvalSafe(property.value);
+            if (out2 === FAILED_EVAL) {
+              skipped.push(property);
+            } else {
+              styles[property.key.name] = out2;
+            }
+          }
+          const out = getSplitStyles(styles, Component.staticConfig, defaultTheme, {
+            focus: false,
+            hover: false,
+            mounted: false,
+            press: false,
+            pressIn: false,
+            resolveVariablesAs: "variable"
+          });
+          const classNames = __spreadValues({}, out.classNames);
+          const atomics = getStylesAtomic(out.style);
+          if (shouldPrintDebug) {
+            console.log("Exctacting styled()", styles, out, "to", atomics);
+          }
+          for (const atomic of atomics) {
+            for (const rule of atomic.rules) {
+              out.rulesToInsert = out.rulesToInsert || [];
+              out.rulesToInsert.push([atomic.identifier, rule]);
+            }
+            classNames[atomic.property] = atomic.identifier;
+          }
+          definition.properties = skipped;
+          for (const cn in classNames) {
+            if (componentSkipProps.has(cn)) {
+              continue;
+            }
+            const val = classNames[cn];
+            definition.properties.push(t.objectProperty(t.stringLiteral(cn), t.stringLiteral(val)));
+          }
+          if (out.rulesToInsert) {
+            for (const [identifier, rule] of out.rulesToInsert) {
+              onStyleRule == null ? void 0 : onStyleRule(identifier, [rule]);
+            }
+          }
+          res.styled++;
+          if (shouldPrintDebug) {
+            console.log(`Extracted styled(${name}) props:`, styles);
+          }
+        },
         JSXElement(traversePath) {
-          var _a, _b, _c, _d, _e;
+          var _a2, _b2, _c, _d;
           tm.mark("jsx-element", shouldPrintDebug === "verbose");
           const node = traversePath.node.openingElement;
           const ogAttributes = node.attributes;
@@ -200,10 +366,7 @@ function createExtractor() {
             shouldPrintDebug = debugPropValue;
           }
           try {
-            let isValidStyleKey = function(name) {
-              var _a2;
-              return !!(!!validStyles[name] || !!pseudos[name] || ((_a2 = staticConfig.variants) == null ? void 0 : _a2[name]) || tamaguiConfig.shorthands[name] || (name[0] === "$" ? !!mediaQueryConfig[name.slice(1)] : false));
-            }, evaluateAttribute = function(path) {
+            let evaluateAttribute = function(path) {
               const attribute = path.node;
               const attr = { type: "attr", value: attribute };
               if (t.isJSXSpreadAttribute(attribute)) {
@@ -294,9 +457,9 @@ function createExtractor() {
                   return [attribute.value, path.get("value")];
                 }
               })();
-              const remove = /* @__PURE__ */ __name(() => {
+              const remove = () => {
                 Array.isArray(valuePath) ? valuePath.map((p) => p.remove()) : valuePath.remove();
-              }, "remove");
+              };
               if (name === "ref") {
                 if (shouldPrintDebug) {
                   console.log("  ! inlining, ref", name);
@@ -326,29 +489,39 @@ function createExtractor() {
                 return attr;
               }
               const styleValue = attemptEvalSafe(value);
-              if (!isValidStyleKey(name)) {
+              if (!variants[name] && !isValidStyleKey(name, staticConfig)) {
                 let keys = [name];
                 let out = null;
-                if (staticConfig.propMapper) {
-                  out = staticConfig.propMapper(name, styleValue, defaultTheme, staticConfig.defaultProps, "auto");
-                  if (out) {
-                    out = rnw.createDOMProps(isTextView ? "span" : "div", out);
-                    delete out.className;
+                out = staticConfig.propMapper(name, styleValue, defaultTheme, staticConfig.defaultProps, { resolveVariablesAs: "auto" }, void 0, shouldPrintDebug);
+                if (out) {
+                  if (!Array.isArray(out)) {
+                    console.warn(`Error expected array but got`, out);
+                    couldntParse = true;
+                    shouldDeopt = true;
+                  } else {
+                    out = Object.fromEntries(out);
                     keys = Object.keys(out);
                   }
                 }
+                if (out) {
+                  if (isTargetingHTML) {
+                    out = createDOMProps(isTextView ? "span" : "div", out);
+                    delete out.className;
+                  }
+                  keys = Object.keys(out);
+                }
                 let didInline = false;
                 const attributes = keys.map((key) => {
                   const val = out[key];
-                  if (isValidStyleKey(key)) {
+                  if (isValidStyleKey(key, staticConfig)) {
                     return {
                       type: "style",
-                      value: { [name]: styleValue },
-                      name,
+                      value: { [key]: styleValue },
+                      name: key,
                       attr: path.node
                     };
                   }
-                  if (validHTMLAttributes[key]) {
+                  if (validHTMLAttributes[key] || key.startsWith("aria-") || key.startsWith("data-")) {
                     return attr;
                   }
                   if (shouldPrintDebug) {
@@ -367,7 +540,10 @@ function createExtractor() {
                 return attributes;
               }
               if (styleValue !== FAILED_EVAL) {
-                if (isValidStyleKey(name)) {
+                if (inlineWhenUnflattened.has(name)) {
+                  inlineWhenUnflattenedOGVals[name] = { styleValue, attr };
+                }
+                if (isValidStyleKey(name, staticConfig)) {
                   if (shouldPrintDebug) {
                     console.log(`  style: ${name} =`, styleValue);
                   }
@@ -384,6 +560,9 @@ function createExtractor() {
                     attr: path.node
                   };
                 } else {
+                  if (variants[name]) {
+                    variantValues.set(name, styleValue);
+                  }
                   inlined.set(name, true);
                   return attr;
                 }
@@ -452,7 +631,6 @@ function createExtractor() {
                 }
                 return null;
               }
-              __name(addBinaryConditional, "addBinaryConditional");
               function getStaticConditional(value2) {
                 if (t.isConditionalExpression(value2)) {
                   try {
@@ -476,7 +654,6 @@ function createExtractor() {
                 }
                 return null;
               }
-              __name(getStaticConditional, "getStaticConditional");
               function getStaticLogical(value2) {
                 if (t.isLogicalExpression(value2)) {
                   if (value2.operator === "&&") {
@@ -500,7 +677,6 @@ function createExtractor() {
                 }
                 return null;
               }
-              __name(getStaticLogical, "getStaticLogical");
             }, isExtractable = function(obj) {
               return t.isObjectExpression(obj) && obj.properties.every((prop) => {
                 if (!t.isObjectProperty(prop)) {
@@ -508,7 +684,7 @@ function createExtractor() {
                   return false;
                 }
                 const propName = prop.key["name"];
-                if (!isValidStyleKey(propName) && propName !== "tag") {
+                if (!isValidStyleKey(propName, staticConfig) && propName !== "tag") {
                   if (shouldPrintDebug) {
                     console.log("  not a valid style prop!", propName);
                   }
@@ -537,9 +713,7 @@ function createExtractor() {
                         inlineMediaQuery: mediaQueryKey
                       });
                       if (ternaries2) {
-                        return ternaries2.map((value) => ({
-                          ...ternaryPartial,
-                          ...value,
+                        return ternaries2.map((value) => __spreadProps(__spreadValues(__spreadValues({}, ternaryPartial), value), {
                           test: t.logicalExpression("&&", value.test, test)
                         }));
                       } else {
@@ -556,39 +730,38 @@ function createExtractor() {
                     t.objectExpression([t.objectProperty(property.key, property.value.alternate)])
                   ].map((x) => attemptEval(x));
                   return [
-                    createTernary({
+                    createTernary(__spreadProps(__spreadValues({
                       remove() {
-                      },
-                      ...ternaryPartial,
+                      }
+                    }, ternaryPartial), {
                       test: t.logicalExpression("&&", test, property.value.test),
                       consequent: truthy,
                       alternate: null
-                    }),
-                    createTernary({
-                      ...ternaryPartial,
+                    })),
+                    createTernary(__spreadProps(__spreadValues({}, ternaryPartial), {
                       test: t.logicalExpression("&&", test, t.unaryExpression("!", property.value.test)),
                       consequent: falsy,
                       alternate: null,
                       remove() {
                       }
-                    })
+                    }))
                   ];
                 }
                 const obj = t.objectExpression([t.objectProperty(property.key, property.value)]);
                 const consequent = attemptEval(obj);
-                return createTernary({
+                return createTernary(__spreadProps(__spreadValues({
                   remove() {
-                  },
-                  ...ternaryPartial,
+                  }
+                }, ternaryPartial), {
                   test,
                   consequent,
                   alternate: null
-                });
+                }));
               });
-            }, mergeStyles = function(prev2, next) {
-              normalizeStyleObject(next);
+            }, mergeStyles = function(prev2, nextIn) {
+              const next = expandStyles(nextIn);
               for (const key in next) {
-                if (pseudos[key]) {
+                if (pseudoDescriptors[key]) {
                   prev2[key] = prev2[key] || {};
                   if (shouldPrintDebug) {
                     if (!next[key] || !prev2[key]) {
@@ -600,12 +773,17 @@ function createExtractor() {
                   prev2[key] = next[key];
                 }
               }
+            }, omitInvalidStyles = function(style) {
+              if (staticConfig.validStyles) {
+                for (const key in style) {
+                  if (stylePropsTransform[key] || !staticConfig.validStyles[key] && !pseudoDescriptors[key] && !/(hoverStyle|focusStyle|pressStyle)$/.test(key)) {
+                    if (shouldPrintDebug)
+                      console.log(" delete invalid style", key);
+                    delete style[key];
+                  }
+                }
+              }
             };
-            __name(isValidStyleKey, "isValidStyleKey");
-            __name(evaluateAttribute, "evaluateAttribute");
-            __name(isExtractable, "isExtractable");
-            __name(createTernariesFromObjectProperties, "createTernariesFromObjectProperties");
-            __name(mergeStyles, "mergeStyles");
             node.attributes.find((n) => t.isJSXAttribute(n) && t.isJSXIdentifier(n.name) && n.name.name === "debug" && n.value === null);
             if (shouldPrintDebug) {
               console.log("\n");
@@ -618,17 +796,19 @@ function createExtractor() {
             }
             const shouldLog = !hasLogged;
             if (shouldLog) {
+              console.log(`  1\uFE0F\u20E3  Inline optimized  2\uFE0F\u20E3  Inline flattened  3\uFE0F\u20E3  styled() extracted`);
               const prefix = "      |";
-              console.log(prefixLogs || prefix, "                          total \xB7 optimized \xB7 flattened ");
+              console.log(prefixLogs || prefix, "                         total \xB7  1\uFE0F\u20E3  \xB7  2\uFE0F\u20E3  \xB7  3\uFE0F\u20E3");
               hasLogged = true;
             }
             if (disableExtraction) {
               return;
             }
             const { staticConfig } = component;
+            const variants = staticConfig.variants || {};
             const isTextView = staticConfig.isText || false;
-            const validStyles = (_a = staticConfig == null ? void 0 : staticConfig.validStyles) != null ? _a : {};
-            let tagName = (_c = (_b = staticConfig.defaultProps) == null ? void 0 : _b.tag) != null ? _c : isTextView ? "span" : "div";
+            const validStyles = (staticConfig == null ? void 0 : staticConfig.validStyles) ?? {};
+            let tagName = staticConfig.defaultProps.tag ?? (isTextView ? "span" : "div");
             traversePath.get("openingElement").get("attributes").forEach((path) => {
               const attr = path.node;
               if (t.isJSXSpreadAttribute(attr))
@@ -650,6 +830,7 @@ function createExtractor() {
               ...props.deoptProps || [],
               ...staticConfig.deoptProps || []
             ]);
+            const inlineWhenUnflattened = /* @__PURE__ */ new Set([...staticConfig.inlineWhenUnflattened || []]);
             const staticNamespace = getStaticBindingsForScope(traversePath.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug);
             const attemptEval = !evaluateVars ? evaluateAstNode : createEvaluator({
               tamaguiConfig,
@@ -707,27 +888,12 @@ function createExtractor() {
             }
             tm.mark("jsx-element-flattened", shouldPrintDebug === "verbose");
             node.attributes = flattenedAttrs;
-            if (staticConfig.defaultProps) {
-              for (const key in staticConfig.defaultProps) {
-                if (isValidStyleKey(key)) {
-                  continue;
-                }
-                const serialize = require("babel-literal-to-ast");
-                const val = staticConfig.defaultProps[key];
-                try {
-                  const serializedDefaultProp = serialize(val);
-                  node.attributes.unshift(t.jsxAttribute(t.jsxIdentifier(key), typeof val === "string" ? t.stringLiteral(val) : t.jsxExpressionContainer(serializedDefaultProp)));
-                } catch (err) {
-                  console.warn(`\u26A0\uFE0F Error evaluating default prop for component ${node.name.name}, prop ${key}
- error: ${err}
- value:`, val, "\n defaultProps:", staticConfig.defaultProps);
-                }
-              }
-            }
             let attrs = [];
             let shouldDeopt = false;
             const inlined = /* @__PURE__ */ new Map();
+            const variantValues = /* @__PURE__ */ new Map();
             let hasSetOptimized = false;
+            const inlineWhenUnflattenedOGVals = {};
             attrs = traversePath.get("openingElement").get("attributes").flatMap((path) => {
               try {
                 const res2 = evaluateAttribute(path);
@@ -741,6 +907,7 @@ function createExtractor() {
                   console.log("Error extracting attribute", err.message, err.stack);
                   console.log("node", path.node);
                 }
+                inlined.set(`${Math.random()}`, "spread");
                 return {
                   type: "attr",
                   value: path.node
@@ -769,14 +936,14 @@ function createExtractor() {
                 ternaries.push(cur.value);
               }
               if ((!next || next.type !== "ternary") && ternaries.length) {
-                const normalized = normalizeTernaries(ternaries).map(({ alternate, consequent, ...rest }) => {
+                const normalized = normalizeTernaries(ternaries).map((_a3) => {
+                  var _b3 = _a3, { alternate, consequent } = _b3, rest = __objRest(_b3, ["alternate", "consequent"]);
                   return {
                     type: "ternary",
-                    value: {
-                      ...rest,
+                    value: __spreadProps(__spreadValues({}, rest), {
                       alternate: alternate || null,
                       consequent: consequent || null
-                    }
+                    })
                   };
                 });
                 try {
@@ -796,18 +963,30 @@ function createExtractor() {
             }, []).flat();
             const hasSpread = node.attributes.some((x) => t.isJSXSpreadAttribute(x));
             const hasOnlyStringChildren = !hasSpread && (node.selfClosing || traversePath.node.children && traversePath.node.children.every((x) => x.type === "JSXText"));
-            let themeVal = inlined.get("theme");
+            const themeVal = inlined.get("theme");
             inlined.delete("theme");
-            const allOtherPropsExtractable = [...inlined].every(([k, v]) => INLINE_EXTRACTABLE[k]);
-            const shouldWrapThme = allOtherPropsExtractable && !!themeVal;
-            const canFlattenProps = inlined.size === 0 || shouldWrapThme || allOtherPropsExtractable;
+            for (const [key] of [...inlined]) {
+              if (INLINE_EXTRACTABLE[key] || ((_a2 = staticConfig.variants) == null ? void 0 : _a2[key])) {
+                inlined.delete(key);
+              }
+            }
+            const canFlattenProps = inlined.size === 0;
             let shouldFlatten = !shouldDeopt && canFlattenProps && !hasSpread && staticConfig.neverFlatten !== true && (staticConfig.neverFlatten === "jsx" ? hasOnlyStringChildren : true);
+            const shouldWrapTheme = shouldFlatten && themeVal;
+            if (disableExtractVariables) {
+              themeAccessListeners.add((key) => {
+                shouldFlatten = false;
+                if (shouldPrintDebug) {
+                  console.log(" ! accessing theme key, avoid flatten", key);
+                }
+              });
+            }
             if (shouldPrintDebug) {
-              console.log(" - flatten?", objToStr({ hasSpread, shouldDeopt, shouldFlatten, canFlattenProps, shouldWrapThme, allOtherPropsExtractable, hasOnlyStringChildren }));
+              console.log(" - flatten?", objToStr({ hasSpread, shouldDeopt, shouldFlatten, canFlattenProps, shouldWrapTheme, hasOnlyStringChildren }), "inlined", [...inlined]);
             }
-            if (shouldFlatten && shouldWrapThme) {
+            if (shouldFlatten && shouldWrapTheme) {
               if (shouldPrintDebug) {
-                console.log("  - wrapping theme", allOtherPropsExtractable, themeVal);
+                console.log("  - wrapping theme", themeVal);
               }
               attrs = attrs.filter((x) => x.type === "attr" && t.isJSXAttribute(x.value) && x.value.name.name === "theme" ? false : true);
               if (!hasImportedTheme) {
@@ -818,9 +997,9 @@ function createExtractor() {
                 t.jsxAttribute(t.jsxIdentifier("name"), themeVal.value)
               ]), t.jsxClosingElement(t.jsxIdentifier("_TamaguiTheme")), [traversePath.node]));
             }
-            if (shouldFlatten && staticConfig.defaultProps) {
+            if (shouldFlatten) {
               const defaultStyleAttrs = Object.keys(staticConfig.defaultProps).flatMap((key) => {
-                if (!isValidStyleKey(key)) {
+                if (!isValidStyleKey(key, staticConfig)) {
                   return [];
                 }
                 const value = staticConfig.defaultProps[key];
@@ -850,10 +1029,10 @@ function createExtractor() {
               for (const cur of attrs) {
                 if (cur.type === "style") {
                   for (const key in cur.value) {
-                    const shouldEnsureOverridden = !!((_d = staticConfig.ensureOverriddenProp) == null ? void 0 : _d[key]);
+                    const shouldEnsureOverridden = !!((_b2 = staticConfig.ensureOverriddenProp) == null ? void 0 : _b2[key]);
                     const isSetInAttrsAlready = attrs.some((x) => x.type === "attr" && x.value.type === "JSXAttribute" && x.value.name.name === key);
                     if (!isSetInAttrsAlready) {
-                      const isVariant = !!((_e = staticConfig.variants) == null ? void 0 : _e[cur.name || ""]);
+                      const isVariant = !!((_c = staticConfig.variants) == null ? void 0 : _c[cur.name || ""]);
                       if (isVariant || shouldEnsureOverridden) {
                         ensureOverridden[key] = true;
                       }
@@ -866,14 +1045,83 @@ function createExtractor() {
               console.log("  - attrs (flattened): \n", logLines(attrs.map(attrStr).join(", ")));
               console.log("  - ensureOverriden:", Object.keys(ensureOverridden).join(", "));
             }
+            const state = {
+              noClassNames: false,
+              focus: false,
+              hover: false,
+              mounted: true,
+              press: false,
+              pressIn: false
+            };
+            let foundStaticProps = {};
+            for (const key in attrs) {
+              const cur = attrs[key];
+              if (cur.type === "style") {
+                foundStaticProps = __spreadValues(__spreadValues({}, foundStaticProps), expandStyles(cur.value));
+                continue;
+              }
+              if (cur.type === "attr") {
+                if (t.isJSXSpreadAttribute(cur.value)) {
+                  continue;
+                }
+                if (!t.isJSXIdentifier(cur.value.name)) {
+                  continue;
+                }
+                const key2 = cur.value.name.name;
+                const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true));
+                if (value !== FAILED_EVAL) {
+                  foundStaticProps = __spreadProps(__spreadValues({}, foundStaticProps), {
+                    [key2]: value
+                  });
+                }
+              }
+            }
+            const completeProps = {};
+            for (const key in staticConfig.defaultProps) {
+              if (!(key in foundStaticProps)) {
+                completeProps[key] = staticConfig.defaultProps[key];
+              }
+            }
+            for (const key in foundStaticProps) {
+              completeProps[key] = foundStaticProps[key];
+            }
             attrs = attrs.reduce((acc, cur) => {
-              if (!cur) {
+              if (!cur)
                 return acc;
-              }
               if (cur.type === "attr" && !t.isJSXSpreadAttribute(cur.value)) {
                 if (shouldFlatten) {
-                  if (cur.value.name.name === "tag") {
-                    return acc;
+                  const name = cur.value.name.name;
+                  if (typeof name === "string") {
+                    if (name === "tag") {
+                      return acc;
+                    }
+                    if (variants[name] && variantValues.has(name)) {
+                      let out = Object.fromEntries(staticConfig.propMapper(name, variantValues.get(name), defaultTheme, completeProps, __spreadProps(__spreadValues({}, state), { resolveVariablesAs: "auto" }), void 0, shouldPrintDebug) || []);
+                      if (out && isTargetingHTML) {
+                        const cn = out.className;
+                        out = createDOMProps(isTextView ? "span" : "div", out);
+                        out.className = cn;
+                      }
+                      if (shouldPrintDebug) {
+                        console.log(" - expanded variant", name, out);
+                      }
+                      for (const key2 in out) {
+                        const value2 = out[key2];
+                        if (isValidStyleKey(key2, staticConfig)) {
+                          acc.push({
+                            type: "style",
+                            value: { [key2]: value2 },
+                            name: key2,
+                            attr: cur.value
+                          });
+                        } else {
+                          acc.push({
+                            type: "attr",
+                            value: t.jsxAttribute(t.jsxIdentifier(key2), t.jsxExpressionContainer(typeof value2 === "string" ? t.stringLiteral(value2) : literalToAst(value2)))
+                          });
+                        }
+                      }
+                    }
                   }
                 }
               }
@@ -912,7 +1160,7 @@ function createExtractor() {
               if (cur.type === "style") {
                 const key = Object.keys(cur.value)[0];
                 const value = cur.value[key];
-                const shouldKeepOriginalAttr = !shouldFlatten && !validStyles[key] && !pseudos[key] && !key.startsWith("data-");
+                const shouldKeepOriginalAttr = !shouldFlatten && !validStyles[key] && !pseudoDescriptors[key] && !key.startsWith("data-");
                 if (shouldKeepOriginalAttr) {
                   if (shouldPrintDebug) {
                     console.log("     - keeping as non-style", key);
@@ -940,46 +1188,13 @@ function createExtractor() {
               acc.push(cur);
               return acc;
             }, []);
-            const state = {
-              noClassNames: true,
-              focus: false,
-              hover: false,
-              mounted: true,
-              press: false,
-              pressIn: false
-            };
-            const completeStaticProps = Object.keys(attrs).reduce((acc, index) => {
-              const cur = attrs[index];
-              if (cur.type === "style") {
-                normalizeStyleObject(cur.value);
-                Object.assign(acc, cur.value);
-              }
-              if (cur.type === "attr") {
-                if (t.isJSXSpreadAttribute(cur.value)) {
-                  return acc;
-                }
-                if (!t.isJSXIdentifier(cur.value.name)) {
-                  return acc;
-                }
-                const key = cur.value.name.name;
-                const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true));
-                if (value === FAILED_EVAL) {
-                  return acc;
-                }
-                acc[key] = value;
-              }
-              return acc;
-            }, {});
-            const completeProps = {
-              ...staticConfig.defaultProps,
-              ...completeStaticProps
-            };
             if (shouldPrintDebug) {
               console.log("  - attrs (combined \u{1F500}): \n", logLines(attrs.map(attrStr).join(", ")));
               console.log("  - defaultProps: \n", logLines(objToStr(staticConfig.defaultProps)));
-              console.log("  - completeStaticProps: \n", logLines(objToStr(completeStaticProps)));
+              console.log("  - foundStaticProps: \n", logLines(objToStr(foundStaticProps)));
+              console.log("  - completeProps: \n", logLines(objToStr(completeProps)));
             }
-            const getStyles = /* @__PURE__ */ __name((props2, debugName = "") => {
+            const getStyles = (props2, debugName = "") => {
               if (!props2 || !Object.keys(props2).length) {
                 if (shouldPrintDebug)
                   console.log(" getStyles() no props");
@@ -995,44 +1210,23 @@ function createExtractor() {
                 }
               }
               try {
-                const out = getSplitStyles(props2, staticConfig, defaultTheme, {
-                  ...state,
+                const out = getSplitStyles(props2, staticConfig, defaultTheme, __spreadProps(__spreadValues({}, state), {
                   fallbackProps: completeProps
-                });
-                const outStyle = {
-                  ...out.style,
-                  ...out.pseudos
-                };
-                if (staticConfig.validStyles) {
-                  for (const key in outStyle) {
-                    if (!staticConfig.validStyles[key] && !pseudos[key] && !/(hover|focus|press)Style$/.test(key)) {
-                      if (shouldPrintDebug)
-                        console.log(" delete invalid style", key);
-                      delete outStyle[key];
-                    }
-                  }
-                }
-                if (shouldPrintDebug) {
-                  console.log(`       getStyles ${debugName} (props):
-`, logLines(objToStr(props2)));
-                  console.log(`       getStyles ${debugName} (out.viewProps):
-`, logLines(objToStr(out.viewProps)));
-                  console.log(`       getStyles ${debugName} (out.style):
-`, logLines(objToStr(outStyle || {}), true));
-                }
+                }), void 0, props2["debug"]);
+                const outStyle = __spreadValues(__spreadValues({}, out.style), out.pseudos);
                 return outStyle;
               } catch (err) {
                 console.log("error", err.message, err.stack);
                 return {};
               }
-            }, "getStyles");
-            const completeStylesProcessed = getStyles(completeProps, "completeStylesProcessed");
-            if (!completeStylesProcessed) {
+            };
+            const completeStyles = getStyles(completeProps, "completeStyles");
+            if (!completeStyles) {
               throw new Error(`Impossible, no styles`);
             }
-            const stylesToAddToInitialGroup = shouldFlatten ? difference(Object.keys(completeStylesProcessed), Object.keys(completeStaticProps)) : [];
-            if (stylesToAddToInitialGroup.length) {
-              const toAdd = pick(completeStylesProcessed, ...stylesToAddToInitialGroup);
+            const addInitialStyleKeys = shouldFlatten ? difference(Object.keys(completeStyles), Object.keys(foundStaticProps)) : [];
+            if (addInitialStyleKeys.length) {
+              const toAdd = pick(completeStyles, ...addInitialStyleKeys);
               const firstGroup = attrs.find((x) => x.type === "style");
               if (shouldPrintDebug) {
                 console.log("    toAdd", objToStr(toAdd));
@@ -1040,19 +1234,17 @@ function createExtractor() {
               if (!firstGroup) {
                 attrs.unshift({ type: "style", value: toAdd });
               } else {
+                omitInvalidStyles(firstGroup.value);
                 Object.assign(firstGroup.value, toAdd);
               }
             }
             if (shouldPrintDebug) {
-              console.log("   -- stylesToAddToInitialGroup", stylesToAddToInitialGroup.join(", "), { shouldFlatten });
-              console.log("   -- completeStaticProps:\n", logLines(objToStr(completeStaticProps)));
-              console.log("   -- completeStylesProcessed:\n", logLines(objToStr(completeStylesProcessed)));
+              if (shouldFlatten)
+                console.log("   -- addInitialStyleKeys", addInitialStyleKeys.join(", "));
             }
             let getStyleError = null;
             for (const attr of attrs) {
               try {
-                if (shouldPrintDebug)
-                  console.log("  *", attrStr(attr));
                 switch (attr.type) {
                   case "ternary":
                     const a = getStyles(attr.value.alternate, "ternary.alternate");
@@ -1065,20 +1257,23 @@ function createExtractor() {
                       console.log("     => tern ", attrStr(attr));
                     continue;
                   case "style":
-                    if (shouldPrintDebug)
-                      console.log("  * styles in", logLines(objToStr(attr.value)));
                     const styles = getStyles(attr.value, "style");
-                    if (shouldPrintDebug)
-                      console.log("  * styles out", logLines(objToStr(styles)));
                     if (styles) {
-                      attr.value = Object.fromEntries(Object.keys(styles).map((k) => [k, completeStylesProcessed[k]]));
+                      attr.value = styles;
                     }
+                    if (shouldPrintDebug)
+                      console.log("  * styles (in)", logLines(objToStr(attr.value)));
+                    if (shouldPrintDebug)
+                      console.log("  * styles (out)", logLines(objToStr(styles)));
                     continue;
                 }
               } catch (err) {
                 getStyleError = err;
               }
             }
+            if (shouldPrintDebug) {
+              console.log("  - attrs (ternaries/combined):\n", logLines(attrs.map(attrStr).join(", ")));
+            }
             tm.mark("jsx-element-styles", shouldPrintDebug === "verbose");
             if (getStyleError) {
               console.log(" \u26A0\uFE0F postprocessing error, deopt", getStyleError);
@@ -1088,7 +1283,7 @@ function createExtractor() {
             const existingStyleKeys = /* @__PURE__ */ new Set();
             for (let i = attrs.length - 1; i >= 0; i--) {
               const attr = attrs[i];
-              if (shouldFlatten && canFlattenProps) {
+              if (shouldFlatten) {
                 if (attr.type === "attr") {
                   if (t.isJSXAttribute(attr.value)) {
                     if (t.isJSXIdentifier(attr.value.name)) {
@@ -1096,6 +1291,9 @@ function createExtractor() {
                       if (INLINE_EXTRACTABLE[name]) {
                         attr.value.name.name = INLINE_EXTRACTABLE[name];
                       }
+                      if ((_d = staticConfig.variants) == null ? void 0 : _d[name]) {
+                        const expanded = getStyles({});
+                      }
                     }
                   }
                 }
@@ -1113,6 +1311,21 @@ function createExtractor() {
                 }
               }
             }
+            if (!shouldFlatten) {
+              if (Object.keys(inlineWhenUnflattenedOGVals).length) {
+                for (const [index, attr] of attrs.entries()) {
+                  if (attr.type === "style") {
+                    for (const key in attr.value) {
+                      const val = inlineWhenUnflattenedOGVals[key];
+                      if (val) {
+                        delete attr.value[key];
+                        attrs.splice(index - 1, 0, val.attr);
+                      }
+                    }
+                  }
+                }
+              }
+            }
             if (shouldFlatten) {
               if (shouldPrintDebug) {
                 console.log("  [\u2705] flattening", originalNodeName, flatNode);
@@ -1138,8 +1351,6 @@ function createExtractor() {
               isFlattened: shouldFlatten,
               programPath
             });
-          } catch (err) {
-            throw err;
           } finally {
             if (debugPropValue) {
               shouldPrintDebug = ogDebug;
@@ -1162,7 +1373,6 @@ function createExtractor() {
     }
   };
 }
-__name(createExtractor, "createExtractor");
 export {
   createExtractor
 };