@tamagui/static 1.0.1-beta.68 → 1.0.1-beta.71

package/dist/cjs/extractor/createEvaluator.js

@@ -41,7 +41,7 @@ function createEvaluator({
   shouldPrintDebug
 }) {
   const evalFn = /* @__PURE__ */ __name((n) => {
-    if (t.isMemberExpression(n) && t.isIdentifier(n.property) && (0, import_extractHelpers.isValidThemeHook)(traversePath, n, sourcePath)) {
+    if (t.isMemberExpression(n) && t.isIdentifier(n.property) && traversePath && (0, import_extractHelpers.isValidThemeHook)(traversePath, n, sourcePath)) {
       const key = n.property.name;
       if (shouldPrintDebug) {
         console.log("    > found theme prop", key);

package/dist/cjs/extractor/createEvaluator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/extractor/createEvaluator.ts"],
-  "sourcesContent": ["import vm from 'vm'\n\nimport generate from '@babel/generator'\nimport { NodePath } from '@babel/traverse'\nimport * as t from '@babel/types'\nimport type { TamaguiConfig } from '@tamagui/core'\nimport { createCSSVariable } from '@tamagui/core-node'\nimport esbuild from 'esbuild'\n\nimport { FAILED_EVAL } from '../constants'\nimport { evaluateAstNode } from './evaluateAstNode'\nimport { isValidThemeHook } from './extractHelpers'\n\nexport function createEvaluator({\n  tamaguiConfig,\n  staticNamespace,\n  sourcePath,\n  traversePath,\n  shouldPrintDebug,\n}: {\n  tamaguiConfig: TamaguiConfig\n  staticNamespace: Record<string, any>\n  sourcePath: string\n  traversePath: NodePath<t.JSXElement>\n  shouldPrintDebug: boolean | 'verbose'\n}) {\n  // called when evaluateAstNode encounters a dynamic-looking prop\n  const evalFn = (n: t.Node) => {\n    // themes\n    if (\n      t.isMemberExpression(n) &&\n      t.isIdentifier(n.property) &&\n      isValidThemeHook(traversePath, n, sourcePath)\n    ) {\n      const key = n.property.name\n      if (shouldPrintDebug) {\n        console.log('    > found theme prop', key)\n      }\n      console.log('SHOULD FIND THEME (NESTED NOW)', key) // tamaguiConfig.themes)\n      // if (!themeKeys.has(key)) {\n      //   throw new Error(`    > accessing non-existent theme key: ${key}`)\n      // }\n      return createCSSVariable(key)\n    }\n    // variable\n    if (t.isIdentifier(n) && staticNamespace.hasOwnProperty(n.name)) {\n      return staticNamespace[n.name]\n    }\n    const evalContext = vm.createContext(staticNamespace)\n    const codeWithTypescriptAnnotations = `(${generate(n as any).code})`\n    const code = esbuild\n      .transformSync(codeWithTypescriptAnnotations, { loader: 'tsx' })\n      .code.replace(/;\\n$/, '')\n\n    if (shouldPrintDebug) {\n      console.log('evaluating', code)\n    }\n    return vm.runInContext(code, evalContext)\n  }\n\n  return (n: t.Node) => {\n    return evaluateAstNode(n, evalFn)\n  }\n}\n\nexport function createSafeEvaluator(attemptEval: (n: t.Node) => any) {\n  return (n: t.Node) => {\n    try {\n      return attemptEval(n)\n    } catch (err) {\n      return FAILED_EVAL\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAe;AAEf,uBAAqB;AAErB,QAAmB;AAEnB,uBAAkC;AAClC,qBAAoB;AAEpB,uBAA4B;AAC5B,6BAAgC;AAChC,4BAAiC;AAE1B,yBAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAOC;AAED,QAAM,SAAS,wBAAC,MAAc;AAE5B,QACE,EAAE,mBAAmB,CAAC,KACtB,EAAE,aAAa,EAAE,QAAQ,KACzB,4CAAiB,cAAc,GAAG,UAAU,GAC5C;AACA,YAAM,MAAM,EAAE,SAAS;AACvB,UAAI,kBAAkB;AACpB,gBAAQ,IAAI,0BAA0B,GAAG;AAAA,MAC3C;AACA,cAAQ,IAAI,kCAAkC,GAAG;AAIjD,aAAO,wCAAkB,GAAG;AAAA,IAC9B;AAEA,QAAI,EAAE,aAAa,CAAC,KAAK,gBAAgB,eAAe,EAAE,IAAI,GAAG;AAC/D,aAAO,gBAAgB,EAAE;AAAA,IAC3B;AACA,UAAM,cAAc,kBAAG,cAAc,eAAe;AACpD,UAAM,gCAAgC,IAAI,8BAAS,CAAQ,EAAE;AAC7D,UAAM,OAAO,uBACV,cAAc,+BAA+B,EAAE,QAAQ,MAAM,CAAC,EAC9D,KAAK,QAAQ,QAAQ,EAAE;AAE1B,QAAI,kBAAkB;AACpB,cAAQ,IAAI,cAAc,IAAI;AAAA,IAChC;AACA,WAAO,kBAAG,aAAa,MAAM,WAAW;AAAA,EAC1C,GA/Be;AAiCf,SAAO,CAAC,MAAc;AACpB,WAAO,4CAAgB,GAAG,MAAM;AAAA,EAClC;AACF;AAlDgB;AAoDT,6BAA6B,aAAiC;AACnE,SAAO,CAAC,MAAc;AACpB,QAAI;AACF,aAAO,YAAY,CAAC;AAAA,IACtB,SAAS,KAAP;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;AARgB;",
+  "sourcesContent": ["import vm from 'vm'\n\nimport generate from '@babel/generator'\nimport { NodePath } from '@babel/traverse'\nimport * as t from '@babel/types'\nimport type { TamaguiConfig } from '@tamagui/core'\nimport { createCSSVariable } from '@tamagui/core-node'\nimport esbuild from 'esbuild'\n\nimport { FAILED_EVAL } from '../constants'\nimport { evaluateAstNode } from './evaluateAstNode'\nimport { isValidThemeHook } from './extractHelpers'\n\nexport function createEvaluator({\n  tamaguiConfig,\n  staticNamespace,\n  sourcePath,\n  traversePath,\n  shouldPrintDebug,\n}: {\n  tamaguiConfig: TamaguiConfig\n  staticNamespace: Record<string, any>\n  sourcePath: string\n  traversePath?: NodePath<t.JSXElement>\n  shouldPrintDebug: boolean | 'verbose'\n}) {\n  // called when evaluateAstNode encounters a dynamic-looking prop\n  const evalFn = (n: t.Node) => {\n    // themes\n    if (\n      t.isMemberExpression(n) &&\n      t.isIdentifier(n.property) &&\n      traversePath &&\n      isValidThemeHook(traversePath, n, sourcePath)\n    ) {\n      const key = n.property.name\n      if (shouldPrintDebug) {\n        console.log('    > found theme prop', key)\n      }\n      console.log('SHOULD FIND THEME (NESTED NOW)', key) // tamaguiConfig.themes)\n      // if (!themeKeys.has(key)) {\n      //   throw new Error(`    > accessing non-existent theme key: ${key}`)\n      // }\n      return createCSSVariable(key)\n    }\n    // variable\n    if (t.isIdentifier(n) && staticNamespace.hasOwnProperty(n.name)) {\n      return staticNamespace[n.name]\n    }\n    const evalContext = vm.createContext(staticNamespace)\n    const codeWithTypescriptAnnotations = `(${generate(n as any).code})`\n    const code = esbuild\n      .transformSync(codeWithTypescriptAnnotations, { loader: 'tsx' })\n      .code.replace(/;\\n$/, '')\n\n    if (shouldPrintDebug) {\n      console.log('evaluating', code)\n    }\n    return vm.runInContext(code, evalContext)\n  }\n\n  return (n: t.Node) => {\n    return evaluateAstNode(n, evalFn)\n  }\n}\n\nexport function createSafeEvaluator(attemptEval: (n: t.Node) => any) {\n  return (n: t.Node) => {\n    try {\n      return attemptEval(n)\n    } catch (err) {\n      return FAILED_EVAL\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAe;AAEf,uBAAqB;AAErB,QAAmB;AAEnB,uBAAkC;AAClC,qBAAoB;AAEpB,uBAA4B;AAC5B,6BAAgC;AAChC,4BAAiC;AAE1B,yBAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAOC;AAED,QAAM,SAAS,wBAAC,MAAc;AAE5B,QACE,EAAE,mBAAmB,CAAC,KACtB,EAAE,aAAa,EAAE,QAAQ,KACzB,gBACA,4CAAiB,cAAc,GAAG,UAAU,GAC5C;AACA,YAAM,MAAM,EAAE,SAAS;AACvB,UAAI,kBAAkB;AACpB,gBAAQ,IAAI,0BAA0B,GAAG;AAAA,MAC3C;AACA,cAAQ,IAAI,kCAAkC,GAAG;AAIjD,aAAO,wCAAkB,GAAG;AAAA,IAC9B;AAEA,QAAI,EAAE,aAAa,CAAC,KAAK,gBAAgB,eAAe,EAAE,IAAI,GAAG;AAC/D,aAAO,gBAAgB,EAAE;AAAA,IAC3B;AACA,UAAM,cAAc,kBAAG,cAAc,eAAe;AACpD,UAAM,gCAAgC,IAAI,8BAAS,CAAQ,EAAE;AAC7D,UAAM,OAAO,uBACV,cAAc,+BAA+B,EAAE,QAAQ,MAAM,CAAC,EAC9D,KAAK,QAAQ,QAAQ,EAAE;AAE1B,QAAI,kBAAkB;AACpB,cAAQ,IAAI,cAAc,IAAI;AAAA,IAChC;AACA,WAAO,kBAAG,aAAa,MAAM,WAAW;AAAA,EAC1C,GAhCe;AAkCf,SAAO,CAAC,MAAc;AACpB,WAAO,4CAAgB,GAAG,MAAM;AAAA,EAClC;AACF;AAnDgB;AAqDT,6BAA6B,aAAiC;AACnE,SAAO,CAAC,MAAc;AACpB,QAAI;AACF,aAAO,YAAY,CAAC;AAAA,IACtB,SAAS,KAAP;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;AARgB;",
   "names": []
 }

package/dist/cjs/extractor/createExtractor.js

@@ -99,6 +99,11 @@ 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;
+    return !!(!!((_a = staticConfig.validStyles) == null ? void 0 : _a[name]) || !!import_core_node.pseudos[name] || loadedTamaguiConfig.shorthands[name] || (name[0] === "$" ? !!import_core_node.mediaQueryConfig[name.slice(1)] : false));
+  }
+  __name(isValidStyleKey, "isValidStyleKey");
   return {
     getTamagui() {
       return loadedTamaguiConfig;
@@ -111,12 +116,14 @@ function createExtractor() {
         shouldPrintDebug = false,
         sourcePath = "",
         onExtractTag,
+        onStyleRule,
         getFlattenedNode,
         disable,
         disableExtraction,
         disableExtractInlineMedia,
         disableExtractVariables,
         disableDebugAttr,
+        extractStyledDefinitions,
         prefixLogs,
         excludeProps,
         target
@@ -127,12 +134,14 @@ function createExtractor() {
         "shouldPrintDebug",
         "sourcePath",
         "onExtractTag",
+        "onStyleRule",
         "getFlattenedNode",
         "disable",
         "disableExtraction",
         "disableExtractInlineMedia",
         "disableExtractVariables",
         "disableDebugAttr",
+        "extractStyledDefinitions",
         "prefixLogs",
         "excludeProps",
         "target"
@@ -189,6 +198,16 @@ 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) => {
@@ -219,6 +238,7 @@ function createExtractor() {
       }, "callTraverse");
       let programPath;
       const res = {
+        styled: 0,
         flattened: 0,
         optimized: 0,
         modified: 0,
@@ -230,8 +250,88 @@ function createExtractor() {
             programPath = path;
           }
         },
+        CallExpression(path) {
+          if (disable || disableExtraction) {
+            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 || []
+          ]);
+          const skipped = [];
+          const styles = {};
+          const skipProps = {
+            variants: true,
+            defaultVariants: true,
+            name: true
+          };
+          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) || skipProps[property.key.name] || !isValidStyleKey(property.key.name, Component.staticConfig) || 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);
+          for (const atomic of atomics) {
+            for (const rule of atomic.rules) {
+              out.rulesToInsert.push([atomic.identifier, rule]);
+            }
+            classNames[atomic.property] = atomic.identifier;
+          }
+          definition.properties = skipped;
+          for (const cn in classNames) {
+            const val = classNames[cn];
+            definition.properties.push(t.objectProperty(t.stringLiteral(cn), t.stringLiteral(val)));
+          }
+          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, _e;
           tm.mark("jsx-element", shouldPrintDebug === "verbose");
           const node = traversePath.node.openingElement;
           const ogAttributes = node.attributes;
@@ -273,10 +373,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)) {
@@ -399,36 +496,35 @@ 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, { 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);
-                    }
-                  }
-                  if (out) {
-                    if (isTargetingHTML) {
-                      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 = import_core_node.rnw.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
                     };
                   }
@@ -454,7 +550,7 @@ function createExtractor() {
                 if (inlineWhenUnflattened.has(name)) {
                   inlineWhenUnflattenedOGVals[name] = { styleValue, attr };
                 }
-                if (isValidStyleKey(name)) {
+                if (isValidStyleKey(name, staticConfig)) {
                   if (shouldPrintDebug) {
                     console.log(`  style: ${name} =`, styleValue);
                   }
@@ -471,6 +567,9 @@ function createExtractor() {
                     attr: path.node
                   };
                 } else {
+                  if (variants[name]) {
+                    variantValues.set(name, styleValue);
+                  }
                   inlined.set(name, true);
                   return attr;
                 }
@@ -595,7 +694,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);
                   }
@@ -695,7 +794,6 @@ function createExtractor() {
                 }
               }
             };
-            __name(isValidStyleKey, "isValidStyleKey");
             __name(evaluateAttribute, "evaluateAttribute");
             __name(isExtractable, "isExtractable");
             __name(createTernariesFromObjectProperties, "createTernariesFromObjectProperties");
@@ -713,14 +811,16 @@ 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");
@@ -803,26 +903,10 @@ 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) => {
@@ -896,10 +980,14 @@ function createExtractor() {
             const hasOnlyStringChildren = !hasSpread && (node.selfClosing || traversePath.node.children && traversePath.node.children.every((x) => x.type === "JSXText"));
             let 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] || ((_b2 = staticConfig.variants) == null ? void 0 : _b2[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;
@@ -909,11 +997,11 @@ function createExtractor() {
               });
             }
             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) {
@@ -926,7 +1014,7 @@ function createExtractor() {
             }
             if (shouldFlatten && staticConfig.defaultProps) {
               const defaultStyleAttrs = Object.keys(staticConfig.defaultProps).flatMap((key) => {
-                if (!isValidStyleKey(key)) {
+                if (!isValidStyleKey(key, staticConfig)) {
                   return [];
                 }
                 const value = staticConfig.defaultProps[key];
@@ -956,10 +1044,10 @@ function createExtractor() {
               for (const cur of attrs) {
                 if (cur.type === "style") {
                   for (const key in cur.value) {
-                    const shouldEnsureOverridden = !!((_b2 = staticConfig.ensureOverriddenProp) == null ? void 0 : _b2[key]);
+                    const shouldEnsureOverridden = !!((_c = staticConfig.ensureOverriddenProp) == null ? void 0 : _c[key]);
                     const isSetInAttrsAlready = attrs.some((x) => x.type === "attr" && x.value.type === "JSXAttribute" && x.value.name.name === key);
                     if (!isSetInAttrsAlready) {
-                      const isVariant = !!((_c = staticConfig.variants) == null ? void 0 : _c[cur.name || ""]);
+                      const isVariant = !!((_d = staticConfig.variants) == null ? void 0 : _d[cur.name || ""]);
                       if (isVariant || shouldEnsureOverridden) {
                         ensureOverridden[key] = true;
                       }
@@ -972,13 +1060,84 @@ 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") {
+                (0, import_core_node.normalizeStyleObject)(cur.value);
+                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)
                 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 = import_core_node.rnw.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)))
+                          });
+                        }
+                      }
+                    }
                   }
                 }
               }
@@ -1045,47 +1204,6 @@ function createExtractor() {
               acc.push(cur);
               return acc;
             }, []);
-            const state = {
-              noClassNames: true,
-              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") {
-                (0, import_core_node.normalizeStyleObject)(cur.value);
-                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];
-            }
             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)));
@@ -1112,15 +1230,6 @@ function createExtractor() {
                   fallbackProps: completeProps
                 }), void 0, props2["debug"]);
                 const outStyle = __spreadValues(__spreadValues({}, out.style), out.pseudos);
-                omitInvalidStyles(outStyle);
-                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);
@@ -1146,8 +1255,8 @@ function createExtractor() {
               }
             }
             if (shouldPrintDebug) {
-              console.log("   -- addInitialStyleKeys", addInitialStyleKeys.join(", "), { shouldFlatten });
-              console.log("   -- completeStyles:\n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(completeStyles)));
+              if (shouldFlatten)
+                console.log("   -- addInitialStyleKeys", addInitialStyleKeys.join(", "));
             }
             let getStyleError = null;
             for (const attr of attrs) {
@@ -1164,14 +1273,14 @@ function createExtractor() {
                       console.log("     => tern ", (0, import_extractHelpers.attrStr)(attr));
                     continue;
                   case "style":
-                    if (shouldPrintDebug)
-                      console.log("  * styles in", 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, completeStyles[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) {
@@ -1190,7 +1299,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)) {
@@ -1198,6 +1307,9 @@ function createExtractor() {
                       if (INLINE_EXTRACTABLE[name]) {
                         attr.value.name.name = INLINE_EXTRACTABLE[name];
                       }
+                      if ((_e = staticConfig.variants) == null ? void 0 : _e[name]) {
+                        const expanded = getStyles({});
+                      }
                     }
                   }
                 }