@tamagui/static 1.0.1-beta.19 → 1.0.1-beta.190

package/dist/{cjs/extractor → extractor}/extractMediaStyle.js

@@ -1,27 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var extractMediaStyle_exports = {};
 __export(extractMediaStyle_exports, {
@@ -44,8 +30,8 @@ __export(extractMediaStyle_exports, {
 module.exports = __toCommonJS(extractMediaStyle_exports);
 var t = __toESM(require("@babel/types"));
 var import_core_node = require("@tamagui/core-node");
-var import_constants = require("../constants");
-var import_extractHelpers = require("./extractHelpers");
+var import_constants = require("../constants.js");
+var import_extractHelpers = require("./extractHelpers.js");
 function extractMediaStyle(ternary, jsxPath, tamaguiConfig, sourcePath, importance = 0, shouldPrintDebug = false) {
   const mt = getMediaQueryTernary(ternary, jsxPath, sourcePath);
   if (!mt) {
@@ -57,9 +43,9 @@ function extractMediaStyle(ternary, jsxPath, tamaguiConfig, sourcePath, importan
     console.error(`Media query "${key}" not found: ${Object.keys(tamaguiConfig.media)}`);
     return null;
   }
-  const getStyleObj = /* @__PURE__ */ __name((styleObj, negate = false) => {
+  const getStyleObj = (styleObj, negate = false) => {
     return styleObj ? { styleObj, negate } : null;
-  }, "getStyleObj");
+  };
   const styleOpts = [
     getStyleObj(ternary.consequent, false),
     getStyleObj(ternary.alternate, true)
@@ -79,24 +65,28 @@ function extractMediaStyle(ternary, jsxPath, tamaguiConfig, sourcePath, importan
     const singleMediaStyles = styles.map((style) => {
       const negKey = negate ? "0" : "";
       const ogPrefix = style.identifier.slice(0, style.identifier.indexOf("-") + 1);
-      const identifier = `${style.identifier.replace(ogPrefix, `${ogPrefix}${import_constants.MEDIA_SEP}${key}${negKey}${import_constants.MEDIA_SEP}`)}`;
+      const identifier = `${style.identifier.replace(
+        ogPrefix,
+        `${ogPrefix}${import_constants.MEDIA_SEP}${key}${negKey}${import_constants.MEDIA_SEP}`
+      )}`;
       const className = `.${identifier}`;
       const mediaSelector = (0, import_core_node.mediaObjectToString)(tamaguiConfig.media[key]);
       const screenStr = negate ? "not all" : "screen";
       const mediaQuery = `${screenStr} and ${mediaSelector}`;
       const precendencePrefix = mediaKeyPrecendence[key];
-      const styleInner = style.rules[0].replace(style.identifier, identifier);
+      const styleInner = style.rules.map((rule) => rule.replace(style.identifier, identifier)).join(";");
       let styleRule = "";
       if (styleInner.includes("@media")) {
         styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);
       } else {
         styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`;
       }
-      return __spreadProps(__spreadValues({}, style), {
+      return {
+        ...style,
         identifier,
         className,
         rules: [styleRule]
-      });
+      };
     });
     if (shouldPrintDebug === "verbose") {
       console.log("  media styles:", importance, styleObj, singleMediaStyles.map((x) => x.identifier).join(", "));
@@ -106,27 +96,38 @@ function extractMediaStyle(ternary, jsxPath, tamaguiConfig, sourcePath, importan
   ternary.remove();
   return { mediaStyles, ternaryWithoutMedia: mt.ternaryWithoutMedia };
 }
-__name(extractMediaStyle, "extractMediaStyle");
 function getMediaQueryTernary(ternary, jsxPath, sourcePath) {
   if (t.isLogicalExpression(ternary.test) && ternary.test.operator === "&&") {
-    const mediaLeft = getMediaInfoFromExpression(ternary.test.left, jsxPath, sourcePath, ternary.inlineMediaQuery);
+    const mediaLeft = getMediaInfoFromExpression(
+      ternary.test.left,
+      jsxPath,
+      sourcePath,
+      ternary.inlineMediaQuery
+    );
     if (mediaLeft) {
-      return __spreadProps(__spreadValues({}, mediaLeft), {
-        ternaryWithoutMedia: __spreadProps(__spreadValues({}, ternary), {
+      return {
+        ...mediaLeft,
+        ternaryWithoutMedia: {
+          ...ternary,
           test: ternary.test.right
-        })
-      });
+        }
+      };
     }
   }
-  const result = getMediaInfoFromExpression(ternary.test, jsxPath, sourcePath, ternary.inlineMediaQuery);
+  const result = getMediaInfoFromExpression(
+    ternary.test,
+    jsxPath,
+    sourcePath,
+    ternary.inlineMediaQuery
+  );
   if (result) {
-    return __spreadProps(__spreadValues({}, result), {
+    return {
+      ...result,
       ternaryWithoutMedia: null
-    });
+    };
   }
   return null;
 }
-__name(getMediaQueryTernary, "getMediaQueryTernary");
 function getMediaInfoFromExpression(test, jsxPath, sourcePath, inlineMediaQuery) {
   var _a, _b, _c;
   if (inlineMediaQuery) {
@@ -160,7 +161,6 @@ function getMediaInfoFromExpression(test, jsxPath, sourcePath, inlineMediaQuery)
   }
   return null;
 }
-__name(getMediaInfoFromExpression, "getMediaInfoFromExpression");
 function isValidMediaCall(jsxPath, init, sourcePath) {
   if (!t.isCallExpression(init))
     return false;
@@ -182,7 +182,6 @@ function isValidMediaCall(jsxPath, init, sourcePath) {
   }
   return true;
 }
-__name(isValidMediaCall, "isValidMediaCall");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   extractMediaStyle,

package/dist/extractor/extractMediaStyle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/extractor/extractMediaStyle.ts"],
+  "sourcesContent": ["import { NodePath } from '@babel/traverse'\nimport * as t from '@babel/types'\nimport { TamaguiInternalConfig, getStylesAtomic, mediaObjectToString } from '@tamagui/core-node'\nimport { ViewStyle } from 'react-native'\n\nimport { MEDIA_SEP } from '../constants.js'\nimport type { StyleObject, Ternary } from '../types.js'\nimport { isInsideTamagui, isPresent } from './extractHelpers.js'\n\nexport function extractMediaStyle(\n  ternary: Ternary,\n  jsxPath: NodePath<t.JSXElement>,\n  tamaguiConfig: TamaguiInternalConfig,\n  sourcePath: string,\n  importance = 0,\n  shouldPrintDebug: boolean | 'verbose' = false\n) {\n  const mt = getMediaQueryTernary(ternary, jsxPath, sourcePath)\n  if (!mt) {\n    return null\n  }\n  const { key } = mt\n  const mq = tamaguiConfig.media[key]\n  if (!mq) {\n    console.error(`Media query \"${key}\" not found: ${Object.keys(tamaguiConfig.media)}`)\n    return null\n  }\n  const getStyleObj = (styleObj: ViewStyle | null, negate = false) => {\n    return styleObj ? { styleObj, negate } : null\n  }\n  const styleOpts = [\n    getStyleObj(ternary.consequent, false),\n    getStyleObj(ternary.alternate, true),\n  ].filter(isPresent)\n  if (shouldPrintDebug && !styleOpts.length) {\n    console.log('  media query, no styles?')\n    return null\n  }\n  // for now order first strongest\n  const mediaKeys = Object.keys(tamaguiConfig.media)\n  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {\n    acc[cur] = new Array(importance + 1).fill(':root').join('')\n    return acc\n  }, {})\n  let mediaStyles: StyleObject[] = []\n  for (const { styleObj, negate } of styleOpts) {\n    const styles = getStylesAtomic(styleObj)\n    const singleMediaStyles = styles.map((style) => {\n      const negKey = negate ? '0' : ''\n      const ogPrefix = style.identifier.slice(0, style.identifier.indexOf('-') + 1)\n      // adds an extra separator before and after to detect later in concatClassName\n      // so it goes from: \"_f-[hash]\"\n      // to: \"_f-_sm0_[hash]\" or \"_f-_sm_[hash]\"\n      const identifier = `${style.identifier.replace(\n        ogPrefix,\n        `${ogPrefix}${MEDIA_SEP}${key}${negKey}${MEDIA_SEP}`\n      )}`\n      const className = `.${identifier}`\n      const mediaSelector = mediaObjectToString(tamaguiConfig.media[key])\n      const screenStr = negate ? 'not all' : 'screen'\n      const mediaQuery = `${screenStr} and ${mediaSelector}`\n      const precendencePrefix = mediaKeyPrecendence[key]\n      const styleInner = style.rules\n        .map((rule) => rule.replace(style.identifier, identifier))\n        .join(';')\n      // combines media queries if they already exist\n      let styleRule = ''\n      if (styleInner.includes('@media')) {\n        // combine\n        styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n      } else {\n        styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n      }\n      return {\n        ...style,\n        identifier,\n        className,\n        rules: [styleRule],\n      }\n    })\n    if (shouldPrintDebug === 'verbose') {\n      // prettier-ignore\n      console.log('  media styles:', importance, styleObj, singleMediaStyles.map(x => x.identifier).join(', '))\n    }\n    // add to output\n    mediaStyles = [...mediaStyles, ...singleMediaStyles]\n  }\n  // filter out\n  ternary.remove()\n  return { mediaStyles, ternaryWithoutMedia: mt.ternaryWithoutMedia }\n}\n\nfunction getMediaQueryTernary(\n  ternary: Ternary,\n  jsxPath: NodePath<t.JSXElement>,\n  sourcePath: string\n): null | {\n  key: string\n  bindingName: string\n  ternaryWithoutMedia: Ternary | null\n} {\n  // this handles unwrapping logical && media query ternarys\n  // first, unwrap if it has media logicalExpression\n  if (t.isLogicalExpression(ternary.test) && ternary.test.operator === '&&') {\n    // *should* be normalized to always be on left side\n    const mediaLeft = getMediaInfoFromExpression(\n      ternary.test.left,\n      jsxPath,\n      sourcePath,\n      ternary.inlineMediaQuery\n    )\n    if (mediaLeft) {\n      return {\n        ...mediaLeft,\n        ternaryWithoutMedia: {\n          ...ternary,\n          test: ternary.test.right,\n        },\n      }\n    }\n  }\n  // const media = useMedia()\n  // ... media.sm\n  const result = getMediaInfoFromExpression(\n    ternary.test,\n    jsxPath,\n    sourcePath,\n    ternary.inlineMediaQuery\n  )\n  if (result) {\n    return {\n      ...result,\n      ternaryWithoutMedia: null,\n    }\n  }\n  return null\n}\n\nfunction getMediaInfoFromExpression(\n  test: t.Expression,\n  jsxPath: NodePath<t.JSXElement>,\n  sourcePath: string,\n  inlineMediaQuery?: string\n) {\n  if (inlineMediaQuery) {\n    return {\n      key: inlineMediaQuery,\n      bindingName: inlineMediaQuery,\n    }\n  }\n  if (t.isMemberExpression(test) && t.isIdentifier(test.object) && t.isIdentifier(test.property)) {\n    const name = test.object['name']\n    const key = test.property['name']\n    const bindings = jsxPath.scope.getAllBindings()\n    const binding = bindings[name]\n    if (!binding) return false\n    const bindingNode = binding.path?.node\n    if (!t.isVariableDeclarator(bindingNode) || !bindingNode.init) return false\n    if (!isValidMediaCall(jsxPath, bindingNode.init, sourcePath)) return false\n    return { key, bindingName: name }\n  }\n  if (t.isIdentifier(test)) {\n    const key = test.name\n    const node = jsxPath.scope.getBinding(test.name)?.path?.node\n    if (!t.isVariableDeclarator(node)) return false\n    if (!node.init || !isValidMediaCall(jsxPath, node.init, sourcePath)) return false\n    return { key, bindingName: key }\n  }\n  return null\n}\n\nexport function isValidMediaCall(\n  jsxPath: NodePath<t.JSXElement>,\n  init: t.Expression,\n  sourcePath: string\n) {\n  if (!t.isCallExpression(init)) return false\n  if (!t.isIdentifier(init.callee)) return false\n  // TODO could support renaming useMedia by looking up import first\n  if (init.callee.name !== 'useMedia') return false\n  const bindings = jsxPath.scope.getAllBindings()\n  const mediaBinding = bindings['useMedia']\n  if (!mediaBinding) return false\n  const useMediaImport = mediaBinding.path.parent\n  if (!t.isImportDeclaration(useMediaImport)) return false\n  if (useMediaImport.source.value !== 'tamagui') {\n    if (!isInsideTamagui(sourcePath)) {\n      return false\n    }\n  }\n  return true\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/{cjs/extractor → extractor}/extractToClassNames.js

@@ -1,27 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var extractToClassNames_exports = {};
 __export(extractToClassNames_exports, {
@@ -49,39 +35,38 @@ var t = __toESM(require("@babel/types"));
 var import_core_node = require("@tamagui/core-node");
 var import_helpers = require("@tamagui/helpers");
 var import_invariant = __toESM(require("invariant"));
-var import_constants = require("../constants");
-var import_babelParse = require("./babelParse");
-var import_buildClassName = require("./buildClassName");
-var import_ensureImportingConcat = require("./ensureImportingConcat");
-var import_extractHelpers = require("./extractHelpers");
-var import_extractMediaStyle = require("./extractMediaStyle");
-var import_getPrefixLogs = require("./getPrefixLogs");
-var import_hoistClassNames = require("./hoistClassNames");
-var import_literalToAst = require("./literalToAst");
-var import_logLines = require("./logLines");
-var import_timer = require("./timer");
+var import_constants = require("../constants.js");
+var import_babelParse = require("./babelParse.js");
+var import_buildClassName = require("./buildClassName.js");
+var import_ensureImportingConcat = require("./ensureImportingConcat.js");
+var import_extractHelpers = require("./extractHelpers.js");
+var import_extractMediaStyle = require("./extractMediaStyle.js");
+var import_getPrefixLogs = require("./getPrefixLogs.js");
+var import_hoistClassNames = require("./hoistClassNames.js");
+var import_logLines = require("./logLines.js");
+var import_timer = require("./timer.js");
 const mergeStyleGroups = {
   shadowOpacity: true,
   shadowRadius: true,
   shadowColor: true,
   shadowOffset: true
 };
-function extractToClassNames({
-  loader,
+async function extractToClassNames({
   extractor,
   source,
   sourcePath,
   options,
-  shouldPrintDebug,
-  cssLoaderPath,
-  threaded,
-  cssPath
+  shouldPrintDebug
 }) {
   const tm = (0, import_timer.timer)();
   if (typeof source !== "string") {
     throw new Error("`source` must be a string of javascript");
   }
-  (0, import_invariant.default)(typeof sourcePath === "string" && path.isAbsolute(sourcePath), "`sourcePath` must be an absolute path to a .js file");
+  (0, import_invariant.default)(
+    typeof sourcePath === "string" && path.isAbsolute(sourcePath),
+    "`sourcePath` must be an absolute path to a .js file"
+  );
+  await extractor.loadTamagui(options);
   const shouldLogTiming = options.logTimings ?? true;
   const start = Date.now();
   const mem = shouldLogTiming ? process.memoryUsage() : null;
@@ -96,10 +81,15 @@ function extractToClassNames({
   const cssMap = /* @__PURE__ */ new Map();
   const existingHoists = {};
   let hasFlattened = false;
-  const res = extractor.parse(ast, __spreadProps(__spreadValues({
+  const res = await extractor.parse(ast, {
     sourcePath,
-    shouldPrintDebug
-  }, options), {
+    shouldPrintDebug,
+    ...options,
+    target: "html",
+    extractStyledDefinitions: true,
+    onStyleRule(identifier, rules) {
+      cssMap.set(`.${identifier}`, { css: rules.join(";"), commentTexts: [] });
+    },
     getFlattenedNode: ({ tag }) => {
       hasFlattened = true;
       return tag;
@@ -113,19 +103,32 @@ function extractToClassNames({
       filePath,
       lineNumbers,
       programPath,
-      isFlattened
+      isFlattened,
+      completeProps,
+      staticConfig
     }) => {
       var _a;
+      if (staticConfig.acceptsClassName === false) {
+        if (shouldPrintDebug) {
+          console.log(`bail, acceptsClassName is false`);
+        }
+        return;
+      }
+      const didFlattenThisTag = hasFlattened;
+      hasFlattened = false;
       let finalClassNames = [];
-      let finalAttrs = [];
+      const finalAttrs = [];
       let finalStyles = [];
-      const viewStyles = {};
+      let viewStyles = {};
       for (const attr of attrs) {
         if (attr.type === "style") {
-          Object.assign(viewStyles, attr.value);
+          viewStyles = {
+            ...viewStyles,
+            ...attr.value
+          };
         }
       }
-      const ensureNeededPrevStyle = /* @__PURE__ */ __name((style) => {
+      const ensureNeededPrevStyle = (style) => {
         const keys = Object.keys(style);
         if (!keys.some((key) => mergeStyleGroups[key])) {
           return style;
@@ -136,8 +139,8 @@ function extractToClassNames({
           }
         }
         return style;
-      }, "ensureNeededPrevStyle");
-      const addStyles = /* @__PURE__ */ __name((style) => {
+      };
+      const addStyles = (style) => {
         if (!style)
           return [];
         const styleWithPrev = ensureNeededPrevStyle(style);
@@ -146,34 +149,26 @@ function extractToClassNames({
           finalStyles = [...finalStyles, ...res2];
         }
         return res2;
-      }, "addStyles");
+      };
       let lastMediaImportance = 1;
       for (const attr of attrs) {
         switch (attr.type) {
-          case "style":
+          case "style": {
             if (!isFlattened) {
-              const { hoverStyle, pressStyle, focusStyle } = attr.value;
-              const pseudos = [
-                ["hoverStyle", hoverStyle],
-                ["pressStyle", pressStyle],
-                ["focusStyle", focusStyle]
-              ];
-              const styles2 = (0, import_core_node.getStylesAtomic)(attr.value, {
-                splitTransforms: true
-              });
+              const styles2 = (0, import_core_node.getStylesAtomic)(attr.value);
               finalStyles = [...finalStyles, ...styles2];
-              for (const [key, value] of pseudos) {
-                if (value && Object.keys(value).length) {
-                  finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer((0, import_literalToAst.literalToAst)(value))));
-                }
-              }
               for (const style of styles2) {
-                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);
               const newClassNames = (0, import_helpers.concatClassName)(styles2.map((x) => x.identifier).join(" "));
-              const existing = finalClassNames.find((x) => x.type == "StringLiteral");
+              const existing = finalClassNames.find(
+                (x) => x.type == "StringLiteral"
+              );
               if (existing) {
                 existing.value = `${existing.value} ${newClassNames}`;
               } else {
@@ -181,11 +176,18 @@ function extractToClassNames({
               }
             }
             break;
-          case "attr":
+          }
+          case "attr": {
             const val = attr.value;
             if (t.isJSXSpreadAttribute(val)) {
               if ((0, import_extractHelpers.isSimpleSpread)(val)) {
-                finalClassNames.push(t.logicalExpression("&&", val.argument, t.memberExpression(val.argument, t.identifier("className"))));
+                finalClassNames.push(
+                  t.logicalExpression(
+                    "&&",
+                    val.argument,
+                    t.memberExpression(val.argument, t.identifier("className"))
+                  )
+                );
               }
             } else if (val.name.name === "className") {
               const value = val.value;
@@ -201,15 +203,31 @@ function extractToClassNames({
             }
             finalAttrs.push(val);
             break;
-          case "ternary":
-            const mediaExtraction = (0, import_extractMediaStyle.extractMediaStyle)(attr.value, jsxPath, extractor.getTamagui(), sourcePath, lastMediaImportance, shouldPrintDebug);
+          }
+          case "ternary": {
+            const mediaExtraction = (0, import_extractMediaStyle.extractMediaStyle)(
+              attr.value,
+              jsxPath,
+              extractor.getTamagui(),
+              sourcePath,
+              lastMediaImportance,
+              shouldPrintDebug
+            );
             if (shouldPrintDebug) {
               if (mediaExtraction) {
-                console.log("ternary (mediaStyles)", ((_a = mediaExtraction.ternaryWithoutMedia) == null ? void 0 : _a.inlineMediaQuery) ?? "", mediaExtraction.mediaStyles.map((x) => x.identifier).join("."));
+                console.log(
+                  "ternary (mediaStyles)",
+                  ((_a = mediaExtraction.ternaryWithoutMedia) == null ? void 0 : _a.inlineMediaQuery) ?? "",
+                  mediaExtraction.mediaStyles.map((x) => x.identifier).join(".")
+                );
               }
             }
             if (!mediaExtraction) {
-              addTernaryStyle(attr.value, addStyles(attr.value.consequent), addStyles(attr.value.alternate));
+              addTernaryStyle(
+                attr.value,
+                addStyles(attr.value.consequent),
+                addStyles(attr.value.alternate)
+              );
               continue;
             }
             lastMediaImportance++;
@@ -225,44 +243,85 @@ function extractToClassNames({
               ];
             }
             break;
+          }
         }
       }
       function addTernaryStyle(ternary, a, b) {
         const cCN = a.map((x) => x.identifier).join(" ");
         const aCN = b.map((x) => x.identifier).join(" ");
         if (a.length && b.length) {
-          finalClassNames.push(t.conditionalExpression(ternary.test, t.stringLiteral(cCN), t.stringLiteral(aCN)));
+          finalClassNames.push(
+            t.conditionalExpression(ternary.test, t.stringLiteral(cCN), t.stringLiteral(aCN))
+          );
         } else {
-          finalClassNames.push(t.conditionalExpression(ternary.test, t.stringLiteral(" " + cCN), t.stringLiteral(" " + aCN)));
+          finalClassNames.push(
+            t.conditionalExpression(
+              ternary.test,
+              t.stringLiteral(" " + cCN),
+              t.stringLiteral(" " + aCN)
+            )
+          );
         }
       }
-      __name(addTernaryStyle, "addTernaryStyle");
       if (shouldPrintDebug) {
-        console.log("  finalClassNames\n", (0, import_logLines.logLines)(finalClassNames.map((x) => x["value"]).join(" ")));
+        console.log(
+          "  finalClassNames\n",
+          (0, import_logLines.logLines)(finalClassNames.map((x) => x["value"]).join(" "))
+        );
       }
       node.attributes = finalAttrs;
       if (finalClassNames.length) {
+        const extraClassNames = (() => {
+          let value = "";
+          if (!isFlattened) {
+            return value;
+          }
+          if (process.env.TAMAGUI_DEBUG_OPTIMIZATIONS) {
+            value += `is_tamagui_flattened`;
+          }
+          if (staticConfig.componentName) {
+            value += ` is_${staticConfig.componentName}`;
+          }
+          if (staticConfig.isText) {
+            let family = completeProps.fontFamily;
+            if (family[0] === "$") {
+              family = family.slice(1);
+            }
+            value += ` font_${family}`;
+          }
+          return value;
+        })();
         let names = (0, import_buildClassName.buildClassName)(finalClassNames);
-        if (t.isStringLiteral(names)) {
-          names.value = (0, import_helpers.concatClassName)(names.value);
+        if (names) {
+          if (t.isStringLiteral(names)) {
+            names.value = (0, import_helpers.concatClassName)(names.value);
+            names.value = `${extraClassNames} ${names.value}`;
+          } else {
+            names = t.binaryExpression("+", t.stringLiteral(extraClassNames), names);
+          }
         }
         const nameExpr = names ? (0, import_hoistClassNames.hoistClassNames)(jsxPath, existingHoists, names) : null;
         let expr = nameExpr;
         if (nameExpr && !t.isIdentifier(nameExpr)) {
-          if (!hasFlattened) {
+          if (!didFlattenThisTag) {
           } else {
             (0, import_ensureImportingConcat.ensureImportingConcat)(programPath);
-            const simpleSpreads = attrs.filter((x) => t.isJSXSpreadAttribute(x.value) && (0, import_extractHelpers.isSimpleSpread)(x.value));
+            const simpleSpreads = attrs.filter(
+              (x) => t.isJSXSpreadAttribute(x.value) && (0, import_extractHelpers.isSimpleSpread)(x.value)
+            );
             expr = t.callExpression(t.identifier(import_constants.CONCAT_CLASSNAME_IMPORT), [
               expr,
               ...simpleSpreads.map((val) => val.value["argument"])
             ]);
           }
         }
-        node.attributes.push(t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(expr)));
+        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, identifier, value } of finalStyles) {
+      for (const { identifier, rules } of finalStyles) {
+        const className = `.${identifier}`;
         if (cssMap.has(className)) {
           if (comment) {
             const val = cssMap.get(className);
@@ -281,42 +340,47 @@ 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);
     }
     return null;
   }
   const styles = Array.from(cssMap.values()).map((x) => x.css).join("\n").trim();
-  if (styles) {
-    const cssQuery = threaded ? `cssData=${Buffer.from(styles).toString("base64")}` : `cssPath=${cssPath}`;
-    const remReq = loader.remainingRequest;
-    const importPath = `${cssPath}!=!${cssLoaderPath}?${cssQuery}!${remReq}`;
-    ast.program.body.unshift(t.importDeclaration([], t.stringLiteral(importPath)));
-  }
-  const result = (0, import_generator.default)(ast, {
-    concise: false,
-    filename: sourcePath,
-    retainLines: false,
-    sourceFileName: sourcePath,
-    sourceMaps: true
-  }, source);
+  const result = (0, import_generator.default)(
+    ast,
+    {
+      concise: false,
+      filename: sourcePath,
+      retainLines: false,
+      sourceFileName: sourcePath,
+      sourceMaps: true
+    },
+    source
+  );
   if (shouldPrintDebug) {
-    console.log("\n -------- output code ------- \n\n", result.code.split("\n").filter((x) => !x.startsWith("//")).join("\n"));
+    console.log(
+      "\n -------- output code ------- \n\n",
+      result.code.split("\n").filter((x) => !x.startsWith("//")).join("\n")
+    );
     console.log("\n -------- output style -------- \n\n", styles);
   }
   if (shouldLogTiming) {
     const memUsed = mem ? Math.round((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204 * 10) / 10 : 0;
     const path2 = (0, import_path.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);
     const memory = process.env.DEBUG && memUsed > 10 ? ` ${memUsed}MB` : "";
     const timing = Date.now() - start;
-    const timingWarning = timing > 50 ? "\u26A0\uFE0F" : timing > 150 ? "\u2622\uFE0F" : "";
-    const timingStr = `${timing}ms${timingWarning}`.padStart(6);
-    console.log(`${(0, import_getPrefixLogs.getPrefixLogs)(options)} ${path2}  ${numFound}   \xB7 ${numOptimized}   \xB7 ${numFlattened}  ${timingStr} ${memory ? `(${memory})` : ""}`);
+    const timingStr = `${timing}ms`.padStart(6);
+    const pre = (0, import_getPrefixLogs.getPrefixLogs)(options);
+    const memStr = memory ? `(${memory})` : "";
+    console.log(
+      `${pre} ${path2}  ${numFound} \xB7 ${numOptimized} \xB7 ${numFlattened} \xB7 ${numStyled}  ${timingStr} ${memStr}`
+    );
   }
   return {
     ast,
@@ -325,7 +389,6 @@ function extractToClassNames({
     map: result.map
   };
 }
-__name(extractToClassNames, "extractToClassNames");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   extractToClassNames