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

package/dist/jsx/extractor/createExtractor.js

@@ -6,6 +6,7 @@ import * as t from "@babel/types";
 import {
   expandStyles,
   getSplitStyles,
+  getStylesAtomic,
   mediaQueryConfig,
   normalizeStyleObject,
   proxyThemeVariables,
@@ -55,6 +56,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]) || !!pseudos[name] || loadedTamaguiConfig.shorthands[name] || (name[0] === "$" ? !!mediaQueryConfig[name.slice(1)] : false));
+  }
+  __name(isValidStyleKey, "isValidStyleKey");
   return {
     getTamagui() {
       return loadedTamaguiConfig;
@@ -66,12 +72,14 @@ function createExtractor() {
       shouldPrintDebug = false,
       sourcePath = "",
       onExtractTag,
+      onStyleRule,
       getFlattenedNode,
       disable,
       disableExtraction,
       disableExtractInlineMedia,
       disableExtractVariables,
       disableDebugAttr,
+      extractStyledDefinitions,
       prefixLogs,
       excludeProps,
       target,
@@ -129,6 +137,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) => {
@@ -159,6 +177,7 @@ function createExtractor() {
       }, "callTraverse");
       let programPath;
       const res = {
+        styled: 0,
         flattened: 0,
         optimized: 0,
         modified: 0,
@@ -170,8 +189,90 @@ 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 = 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) || 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 === 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 = {
+            ...out.classNames
+          };
+          const atomics = 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 _a, _b, _c, _d, _e;
+          var _a, _b, _c, _d, _e, _f, _g;
           tm.mark("jsx-element", shouldPrintDebug === "verbose");
           const node = traversePath.node.openingElement;
           const ogAttributes = node.attributes;
@@ -213,10 +314,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)) {
@@ -339,36 +437,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 = 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 = 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
                     };
                   }
@@ -394,7 +491,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);
                   }
@@ -411,6 +508,9 @@ function createExtractor() {
                     attr: path.node
                   };
                 } else {
+                  if (variants[name]) {
+                    variantValues.set(name, styleValue);
+                  }
                   inlined.set(name, true);
                   return attr;
                 }
@@ -535,7 +635,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);
                   }
@@ -638,7 +738,6 @@ function createExtractor() {
                 }
               }
             };
-            __name(isValidStyleKey, "isValidStyleKey");
             __name(evaluateAttribute, "evaluateAttribute");
             __name(isExtractable, "isExtractable");
             __name(createTernariesFromObjectProperties, "createTernariesFromObjectProperties");
@@ -656,14 +755,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 = (_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";
@@ -746,26 +847,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) => {
@@ -839,10 +924,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] || ((_d = staticConfig.variants) == null ? void 0 : _d[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;
@@ -852,11 +941,11 @@ function createExtractor() {
               });
             }
             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) {
@@ -869,7 +958,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];
@@ -899,10 +988,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 = !!((_e = staticConfig.ensureOverriddenProp) == null ? void 0 : _e[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 = !!((_f = staticConfig.variants) == null ? void 0 : _f[cur.name || ""]);
                       if (isVariant || shouldEnsureOverridden) {
                         ensureOverridden[key] = true;
                       }
@@ -915,13 +1004,88 @@ 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") {
+                normalizeStyleObject(cur.value);
+                foundStaticProps = {
+                  ...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 = {
+                    ...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, { ...state, resolveVariablesAs: "auto" }, void 0, shouldPrintDebug) || []);
+                      if (out && isTargetingHTML) {
+                        const cn = out.className;
+                        out = 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) : literalToAst(value2)))
+                          });
+                        }
+                      }
+                    }
                   }
                 }
               }
@@ -988,51 +1152,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") {
-                normalizeStyleObject(cur.value);
-                foundStaticProps = {
-                  ...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 = {
-                    ...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", logLines(attrs.map(attrStr).join(", ")));
               console.log("  - defaultProps: \n", logLines(objToStr(staticConfig.defaultProps)));
@@ -1063,15 +1182,6 @@ function createExtractor() {
                   ...out.style,
                   ...out.pseudos
                 };
-                omitInvalidStyles(outStyle);
-                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));
-                }
                 return outStyle;
               } catch (err) {
                 console.log("error", err.message, err.stack);
@@ -1097,8 +1207,8 @@ function createExtractor() {
               }
             }
             if (shouldPrintDebug) {
-              console.log("   -- addInitialStyleKeys", addInitialStyleKeys.join(", "), { shouldFlatten });
-              console.log("   -- completeStyles:\n", logLines(objToStr(completeStyles)));
+              if (shouldFlatten)
+                console.log("   -- addInitialStyleKeys", addInitialStyleKeys.join(", "));
             }
             let getStyleError = null;
             for (const attr of attrs) {
@@ -1115,14 +1225,14 @@ function createExtractor() {
                       console.log("     => tern ", 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", logLines(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)", logLines(objToStr(attr.value)));
+                    if (shouldPrintDebug)
+                      console.log("  * styles (out)", logLines(objToStr(styles)));
                     continue;
                 }
               } catch (err) {
@@ -1141,7 +1251,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)) {
@@ -1149,6 +1259,9 @@ function createExtractor() {
                       if (INLINE_EXTRACTABLE[name]) {
                         attr.value.name.name = INLINE_EXTRACTABLE[name];
                       }
+                      if ((_g = staticConfig.variants) == null ? void 0 : _g[name]) {
+                        const expanded = getStyles({});
+                      }
                     }
                   }
                 }

package/dist/jsx/extractor/extractToClassNames.js

@@ -16,7 +16,6 @@ import { isSimpleSpread } from "./extractHelpers";
 import { extractMediaStyle } from "./extractMediaStyle";
 import { getPrefixLogs } from "./getPrefixLogs";
 import { hoistClassNames } from "./hoistClassNames";
-import { literalToAst } from "./literalToAst";
 import { logLines } from "./logLines";
 import { timer } from "./timer";
 const mergeStyleGroups = {
@@ -61,6 +60,10 @@ function extractToClassNames({
     shouldPrintDebug,
     ...options,
     target: "html",
+    extractStyledDefinitions: true,
+    onStyleRule(identifier, rules) {
+      cssMap.set(`.${identifier}`, { css: rules.join(";"), commentTexts: [] });
+    },
     getFlattenedNode: ({ tag }) => {
       hasFlattened = true;
       return tag;
@@ -77,6 +80,8 @@ function extractToClassNames({
       isFlattened
     }) => {
       var _a2, _b;
+      const didFlattenThisTag = hasFlattened;
+      hasFlattened = false;
       let finalClassNames = [];
       let finalAttrs = [];
       let finalStyles = [];
@@ -117,26 +122,13 @@ function extractToClassNames({
         switch (attr.type) {
           case "style":
             if (!isFlattened) {
-              const { hoverStyle, pressStyle, focusStyle } = attr.value;
-              const pseudos = [
-                ["hoverStyle", hoverStyle],
-                ["pressStyle", pressStyle],
-                ["focusStyle", focusStyle]
-              ];
               const styles2 = getStylesAtomic(attr.value, {
                 splitTransforms: true
               });
               finalStyles = [...finalStyles, ...styles2];
-              for (const [key, value] of pseudos) {
-                if (value && Object.keys(value).length) {
-                  finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(literalToAst(value))));
-                }
-              }
               for (const style of styles2) {
-                if (style.pseudo) {
-                  continue;
-                }
-                finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(style.property), t.stringLiteral(style.identifier)));
+                const prop = style.pseudo ? `${style.property}-${style.pseudo}` : style.property;
+                finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(prop), t.stringLiteral(style.identifier)));
               }
             } else {
               const styles2 = addStyles(attr.value);
@@ -217,7 +209,7 @@ function extractToClassNames({
         const nameExpr = names ? hoistClassNames(jsxPath, existingHoists, names) : null;
         let expr = nameExpr;
         if (nameExpr && !t.isIdentifier(nameExpr)) {
-          if (!hasFlattened) {
+          if (!didFlattenThisTag) {
           } else {
             ensureImportingConcat(programPath);
             const simpleSpreads = attrs.filter((x) => t.isJSXSpreadAttribute(x.value) && isSimpleSpread(x.value));
@@ -230,7 +222,8 @@ function extractToClassNames({
         node.attributes.push(t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(expr)));
       }
       const comment = util.format("/* %s:%s (%s) */", filePath, lineNumbers, originalNodeName);
-      for (const { className, rules } of finalStyles) {
+      for (const { identifier, rules } of finalStyles) {
+        const className = `.${identifier}`;
         if (cssMap.has(className)) {
           if (comment) {
             const val = cssMap.get(className);
@@ -250,7 +243,7 @@ function extractToClassNames({
       }
     }
   });
-  if (!res || !res.modified && !res.optimized && !res.flattened) {
+  if (!res || !res.modified && !res.optimized && !res.flattened && !res.styled) {
     if (shouldPrintDebug) {
       console.log("no res or none modified", res);
     }
@@ -277,6 +270,7 @@ function extractToClassNames({
   if (shouldLogTiming) {
     const memUsed = mem ? Math.round((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204 * 10) / 10 : 0;
     const path2 = basename(sourcePath).replace(/\.[jt]sx?$/, "").slice(0, 22).trim().padStart(24);
+    const numStyled = `${res.styled}`.padStart(3);
     const numOptimized = `${res.optimized}`.padStart(3);
     const numFound = `${res.found}`.padStart(3);
     const numFlattened = `${res.flattened}`.padStart(3);
@@ -284,7 +278,9 @@ function extractToClassNames({
     const timing = Date.now() - start;
     const timingWarning = timing > 50 ? "\u26A0\uFE0F" : timing > 150 ? "\u2622\uFE0F" : "";
     const timingStr = `${timing}ms${timingWarning}`.padStart(6);
-    console.log(`${getPrefixLogs(options)} ${path2}  ${numFound}   \xB7 ${numOptimized}   \xB7 ${numFlattened}  ${timingStr} ${memory ? `(${memory})` : ""}`);
+    const pre = getPrefixLogs(options);
+    const memStr = memory ? `(${memory})` : "";
+    console.log(`${pre} ${path2}  ${numFound} \xB7 ${numOptimized} \xB7 ${numFlattened} \xB7 ${numStyled}  ${timingStr} ${memStr}`);
   }
   return {
     ast,