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

package/dist/cjs/extractor/createExtractor.js

@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -85,12 +84,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"');
@@ -99,6 +98,10 @@ 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]) || !!import_core_node.pseudoDescriptors[name] || ((_b = staticConfig.variants) == null ? void 0 : _b[name]) || loadedTamaguiConfig.shorthands[name] || (name[0] === "$" ? !!import_core_node.mediaQueryConfig[name.slice(1)] : false));
+  }
   return {
     getTamagui() {
       return loadedTamaguiConfig;
@@ -111,14 +114,17 @@ function createExtractor() {
         shouldPrintDebug = false,
         sourcePath = "",
         onExtractTag,
+        onStyleRule,
         getFlattenedNode,
         disable,
         disableExtraction,
         disableExtractInlineMedia,
         disableExtractVariables,
         disableDebugAttr,
+        extractStyledDefinitions = false,
         prefixLogs,
-        excludeProps
+        excludeProps,
+        target
       } = _b, props = __objRest(_b, [
         "config",
         "importsWhitelist",
@@ -126,14 +132,17 @@ function createExtractor() {
         "shouldPrintDebug",
         "sourcePath",
         "onExtractTag",
+        "onStyleRule",
         "getFlattenedNode",
         "disable",
         "disableExtraction",
         "disableExtractInlineMedia",
         "disableExtractVariables",
         "disableDebugAttr",
+        "extractStyledDefinitions",
         "prefixLogs",
-        "excludeProps"
+        "excludeProps",
+        "target"
       ]);
       if (disable) {
         return null;
@@ -144,6 +153,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 = (0, import_timer.timer)();
       const { components, tamaguiConfig } = (0, import_loadTamagui.loadTamagui)({
@@ -155,11 +165,20 @@ function createExtractor() {
       }
       tm.mark("load-tamagui", shouldPrintDebug === "verbose");
       loadedTamaguiConfig = tamaguiConfig;
-      const defaultTheme = (0, import_core_node.proxyThemeVariables)(tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]);
+      const proxiedTheme = (0, import_core_node.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 (0, import_extractHelpers.isInsideTamagui)(sourcePath) && importStr[0] === ".";
-      }, "isInternalImport");
+      };
       const validComponents = Object.keys(components).filter((key) => {
         var _a2;
         return key[0].toUpperCase() === key[0] && !!((_a2 = components[key]) == null ? void 0 : _a2.staticConfig);
@@ -177,11 +196,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 });
@@ -202,11 +231,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" ? (0, import_traverse.default)(fileOrPath, a) : fileOrPath.traverse(a);
-      }, "callTraverse");
+      };
       let programPath;
       const res = {
+        styled: 0,
         flattened: 0,
         optimized: 0,
         modified: 0,
@@ -218,8 +248,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 = (0, import_getStaticBindingsForScope.getStaticBindingsForScope)(path.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug);
+          const attemptEval = !evaluateVars ? import_evaluateAstNode.evaluateAstNode : (0, import_createEvaluator.createEvaluator)({
+            tamaguiConfig,
+            staticNamespace,
+            sourcePath,
+            shouldPrintDebug
+          });
+          const attemptEvalSafe = (0, import_createEvaluator.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 === import_constants.FAILED_EVAL) {
+              skipped.push(property);
+            } else {
+              styles[property.key.name] = out2;
+            }
+          }
+          const out = (0, import_core_node.getSplitStyles)(styles, Component.staticConfig, defaultTheme, {
+            focus: false,
+            hover: false,
+            mounted: false,
+            press: false,
+            pressIn: false,
+            resolveVariablesAs: "variable"
+          });
+          const classNames = __spreadValues({}, out.classNames);
+          const atomics = (0, import_core_node.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 _a2, _b2, _c;
+          var _a2, _b2, _c, _d;
           tm.mark("jsx-element", shouldPrintDebug === "verbose");
           const node = traversePath.node.openingElement;
           const ogAttributes = node.attributes;
@@ -261,10 +380,7 @@ function createExtractor() {
             shouldPrintDebug = debugPropValue;
           }
           try {
-            let isValidStyleKey = function(name) {
-              var _a3;
-              return !!(!!validStyles[name] || !!import_core_node.pseudos[name] || ((_a3 = staticConfig.variants) == null ? void 0 : _a3[name]) || tamaguiConfig.shorthands[name] || (name[0] === "$" ? !!import_core_node.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)) {
@@ -355,9 +471,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);
@@ -387,29 +503,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 = import_core_node.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 = (0, import_core_node.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 (import_validHTMLAttributes.validHTMLAttributes[key]) {
+                  if (import_validHTMLAttributes.validHTMLAttributes[key] || key.startsWith("aria-") || key.startsWith("data-")) {
                     return attr;
                   }
                   if (shouldPrintDebug) {
@@ -428,7 +554,10 @@ function createExtractor() {
                 return attributes;
               }
               if (styleValue !== import_constants.FAILED_EVAL) {
-                if (isValidStyleKey(name)) {
+                if (inlineWhenUnflattened.has(name)) {
+                  inlineWhenUnflattenedOGVals[name] = { styleValue, attr };
+                }
+                if (isValidStyleKey(name, staticConfig)) {
                   if (shouldPrintDebug) {
                     console.log(`  style: ${name} =`, styleValue);
                   }
@@ -445,6 +574,9 @@ function createExtractor() {
                     attr: path.node
                   };
                 } else {
+                  if (variants[name]) {
+                    variantValues.set(name, styleValue);
+                  }
                   inlined.set(name, true);
                   return attr;
                 }
@@ -513,7 +645,6 @@ function createExtractor() {
                 }
                 return null;
               }
-              __name(addBinaryConditional, "addBinaryConditional");
               function getStaticConditional(value2) {
                 if (t.isConditionalExpression(value2)) {
                   try {
@@ -537,7 +668,6 @@ function createExtractor() {
                 }
                 return null;
               }
-              __name(getStaticConditional, "getStaticConditional");
               function getStaticLogical(value2) {
                 if (t.isLogicalExpression(value2)) {
                   if (value2.operator === "&&") {
@@ -561,7 +691,6 @@ function createExtractor() {
                 }
                 return null;
               }
-              __name(getStaticLogical, "getStaticLogical");
             }, isExtractable = function(obj) {
               return t.isObjectExpression(obj) && obj.properties.every((prop) => {
                 if (!t.isObjectProperty(prop)) {
@@ -569,7 +698,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);
                   }
@@ -643,10 +772,10 @@ function createExtractor() {
                   alternate: null
                 }));
               });
-            }, mergeStyles = function(prev2, next) {
-              (0, import_core_node.normalizeStyleObject)(next);
+            }, mergeStyles = function(prev2, nextIn) {
+              const next = (0, import_core_node.expandStyles)(nextIn);
               for (const key in next) {
-                if (import_core_node.pseudos[key]) {
+                if (import_core_node.pseudoDescriptors[key]) {
                   prev2[key] = prev2[key] || {};
                   if (shouldPrintDebug) {
                     if (!next[key] || !prev2[key]) {
@@ -658,12 +787,17 @@ function createExtractor() {
                   prev2[key] = next[key];
                 }
               }
+            }, omitInvalidStyles = function(style) {
+              if (staticConfig.validStyles) {
+                for (const key in style) {
+                  if (import_core_node.stylePropsTransform[key] || !staticConfig.validStyles[key] && !import_core_node.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");
@@ -676,17 +810,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 = (staticConfig == null ? void 0 : staticConfig.validStyles) ?? {};
-            let tagName = ((_a2 = staticConfig.defaultProps) == null ? void 0 : _a2.tag) ?? (isTextView ? "span" : "div");
+            let tagName = staticConfig.defaultProps.tag ?? (isTextView ? "span" : "div");
             traversePath.get("openingElement").get("attributes").forEach((path) => {
               const attr = path.node;
               if (t.isJSXSpreadAttribute(attr))
@@ -708,6 +844,7 @@ function createExtractor() {
               ...props.deoptProps || [],
               ...staticConfig.deoptProps || []
             ]);
+            const inlineWhenUnflattened = /* @__PURE__ */ new Set([...staticConfig.inlineWhenUnflattened || []]);
             const staticNamespace = (0, import_getStaticBindingsForScope.getStaticBindingsForScope)(traversePath.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug);
             const attemptEval = !evaluateVars ? import_evaluateAstNode.evaluateAstNode : (0, import_createEvaluator.createEvaluator)({
               tamaguiConfig,
@@ -765,27 +902,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);
@@ -799,6 +921,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
@@ -854,18 +977,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?", (0, import_extractHelpers.objToStr)({ hasSpread, shouldDeopt, shouldFlatten, canFlattenProps, shouldWrapThme, allOtherPropsExtractable, hasOnlyStringChildren }));
+              console.log(" - flatten?", (0, import_extractHelpers.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) {
@@ -876,9 +1011,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];
@@ -924,14 +1059,83 @@ function createExtractor() {
               console.log("  - attrs (flattened): \n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.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), (0, import_core_node.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 !== import_constants.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 = (0, import_core_node.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) : (0, import_literalToAst.literalToAst)(value2)))
+                          });
+                        }
+                      }
+                    }
                   }
                 }
               }
@@ -970,7 +1174,7 @@ function createExtractor() {
               if (cur.type === "style") {
                 const key = Object.keys(cur.value)[0];
                 const value = cur.value[key];
-                const shouldKeepOriginalAttr = !shouldFlatten && !validStyles[key] && !import_core_node.pseudos[key] && !key.startsWith("data-");
+                const shouldKeepOriginalAttr = !shouldFlatten && !validStyles[key] && !import_core_node.pseudoDescriptors[key] && !key.startsWith("data-");
                 if (shouldKeepOriginalAttr) {
                   if (shouldPrintDebug) {
                     console.log("     - keeping as non-style", key);
@@ -998,43 +1202,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") {
-                (0, import_core_node.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 === import_constants.FAILED_EVAL) {
-                  return acc;
-                }
-                acc[key] = value;
-              }
-              return acc;
-            }, {});
-            const completeProps = __spreadValues(__spreadValues({}, staticConfig.defaultProps), completeStaticProps);
             if (shouldPrintDebug) {
               console.log("  - attrs (combined \u{1F500}): \n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", ")));
               console.log("  - defaultProps: \n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(staticConfig.defaultProps)));
-              console.log("  - completeStaticProps: \n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(completeStaticProps)));
+              console.log("  - foundStaticProps: \n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(foundStaticProps)));
+              console.log("  - completeProps: \n", (0, import_logLines.logLines)((0, import_extractHelpers.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");
@@ -1052,38 +1226,21 @@ function createExtractor() {
               try {
                 const out = (0, import_core_node.getSplitStyles)(props2, staticConfig, defaultTheme, __spreadProps(__spreadValues({}, state), {
                   fallbackProps: completeProps
-                }));
+                }), void 0, props2["debug"]);
                 const outStyle = __spreadValues(__spreadValues({}, out.style), out.pseudos);
-                if (staticConfig.validStyles) {
-                  for (const key in outStyle) {
-                    if (!staticConfig.validStyles[key] && !import_core_node.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):
-`, (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(props2)));
-                  console.log(`       getStyles ${debugName} (out.viewProps):
-`, (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(out.viewProps)));
-                  console.log(`       getStyles ${debugName} (out.style):
-`, (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(outStyle || {}), true));
-                }
                 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 ? (0, import_lodash.difference)(Object.keys(completeStylesProcessed), Object.keys(completeStaticProps)) : [];
-            if (stylesToAddToInitialGroup.length) {
-              const toAdd = (0, import_lodash.pick)(completeStylesProcessed, ...stylesToAddToInitialGroup);
+            const addInitialStyleKeys = shouldFlatten ? (0, import_lodash.difference)(Object.keys(completeStyles), Object.keys(foundStaticProps)) : [];
+            if (addInitialStyleKeys.length) {
+              const toAdd = (0, import_lodash.pick)(completeStyles, ...addInitialStyleKeys);
               const firstGroup = attrs.find((x) => x.type === "style");
               if (shouldPrintDebug) {
                 console.log("    toAdd", (0, import_extractHelpers.objToStr)(toAdd));
@@ -1091,19 +1248,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", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(completeStaticProps)));
-              console.log("   -- completeStylesProcessed:\n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(completeStylesProcessed)));
+              if (shouldFlatten)
+                console.log("   -- addInitialStyleKeys", addInitialStyleKeys.join(", "));
             }
             let getStyleError = null;
             for (const attr of attrs) {
               try {
-                if (shouldPrintDebug)
-                  console.log("  *", (0, import_extractHelpers.attrStr)(attr));
                 switch (attr.type) {
                   case "ternary":
                     const a = getStyles(attr.value.alternate, "ternary.alternate");
@@ -1116,20 +1271,23 @@ function createExtractor() {
                       console.log("     => tern ", (0, import_extractHelpers.attrStr)(attr));
                     continue;
                   case "style":
-                    if (shouldPrintDebug)
-                      console.log("  * styles in", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(attr.value)));
                     const styles = getStyles(attr.value, "style");
-                    if (shouldPrintDebug)
-                      console.log("  * styles out", (0, import_logLines.logLines)((0, import_extractHelpers.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)", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(attr.value)));
+                    if (shouldPrintDebug)
+                      console.log("  * styles (out)", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(styles)));
                     continue;
                 }
               } catch (err) {
                 getStyleError = err;
               }
             }
+            if (shouldPrintDebug) {
+              console.log("  - attrs (ternaries/combined):\n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", ")));
+            }
             tm.mark("jsx-element-styles", shouldPrintDebug === "verbose");
             if (getStyleError) {
               console.log(" \u26A0\uFE0F postprocessing error, deopt", getStyleError);
@@ -1139,7 +1297,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)) {
@@ -1147,6 +1305,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({});
+                      }
                     }
                   }
                 }
@@ -1164,6 +1325,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);
@@ -1189,8 +1365,6 @@ function createExtractor() {
               isFlattened: shouldFlatten,
               programPath
             });
-          } catch (err) {
-            throw err;
           } finally {
             if (debugPropValue) {
               shouldPrintDebug = ogDebug;
@@ -1213,7 +1387,6 @@ function createExtractor() {
     }
   };
 }
-__name(createExtractor, "createExtractor");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createExtractor