@tamagui/static 1.0.0-alpha.7 → 1.0.0-beta.0

package/dist/jsx/extractor/ensureImportingConcat.js

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as t from "@babel/types";
+import { CONCAT_CLASSNAME_IMPORT } from "../constants";
+const importConcatPkg = "@tamagui/helpers";
+function ensureImportingConcat(path) {
+  const bodyPath = path.get("body");
+  const imported = bodyPath.find((x) => x.isImportDeclaration() && x.node.source.value === importConcatPkg);
+  const importSpecifier = t.importSpecifier(t.identifier(CONCAT_CLASSNAME_IMPORT), t.identifier(CONCAT_CLASSNAME_IMPORT));
+  if (!imported) {
+    path.node.body.push(t.importDeclaration([importSpecifier], t.stringLiteral(importConcatPkg)));
+    return;
+  }
+  const specifiers = imported.node.specifiers;
+  const alreadyImported = specifiers.some((x) => t.isImportSpecifier(x) && t.isIdentifier(x.imported) && x.imported.name === CONCAT_CLASSNAME_IMPORT);
+  if (!alreadyImported) {
+    specifiers.push(t.importSpecifier(t.identifier(CONCAT_CLASSNAME_IMPORT), t.identifier(CONCAT_CLASSNAME_IMPORT)));
+  }
+}
+__name(ensureImportingConcat, "ensureImportingConcat");
+export {
+  ensureImportingConcat
+};

package/dist/jsx/extractor/evaluateAstNode.js

@@ -0,0 +1,93 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as t from "@babel/types";
+function evaluateAstNode(exprNode, evalFn, shouldPrintDebug) {
+  if (exprNode === void 0) {
+    return void 0;
+  }
+  if (exprNode === null) {
+    return true;
+  }
+  if (t.isJSXExpressionContainer(exprNode)) {
+    return evaluateAstNode(exprNode.expression);
+  }
+  if (t.isObjectExpression(exprNode)) {
+    const ret = {};
+    for (let idx = -1, len = exprNode.properties.length; ++idx < len; ) {
+      const value = exprNode.properties[idx];
+      if (!t.isObjectProperty(value)) {
+        throw new Error("evaluateAstNode can only evaluate object properties");
+      }
+      let key;
+      if (value.computed) {
+        if (typeof evalFn !== "function") {
+          throw new Error("evaluateAstNode does not support computed keys unless an eval function is provided");
+        }
+        key = evaluateAstNode(value.key, evalFn);
+      } else if (t.isIdentifier(value.key)) {
+        key = value.key.name;
+      } else if (t.isStringLiteral(value.key) || t.isNumericLiteral(value.key)) {
+        key = value.key.value;
+      } else {
+        throw new Error("Unsupported key type: " + value.key.type);
+      }
+      if (typeof key !== "string" && typeof key !== "number") {
+        throw new Error("key must be either a string or a number");
+      }
+      ret[key] = evaluateAstNode(value.value, evalFn);
+    }
+    return ret;
+  }
+  if (t.isArrayExpression(exprNode)) {
+    return exprNode.elements.map((x) => {
+      return evaluateAstNode(x, evalFn);
+    });
+  }
+  if (t.isUnaryExpression(exprNode) && exprNode.operator === "-") {
+    const ret = evaluateAstNode(exprNode.argument, evalFn);
+    if (ret == null) {
+      return null;
+    }
+    return -ret;
+  }
+  if (t.isTemplateLiteral(exprNode)) {
+    if (typeof evalFn !== "function") {
+      throw new Error("evaluateAstNode does not support template literals unless an eval function is provided");
+    }
+    let ret = "";
+    for (let idx = -1, len = exprNode.quasis.length; ++idx < len; ) {
+      const quasi = exprNode.quasis[idx];
+      const expr = exprNode.expressions[idx];
+      ret += quasi.value.raw;
+      if (expr) {
+        ret += evaluateAstNode(expr, evalFn);
+      }
+    }
+    return ret;
+  }
+  if (t.isNullLiteral(exprNode)) {
+    return null;
+  }
+  if (t.isNumericLiteral(exprNode) || t.isStringLiteral(exprNode) || t.isBooleanLiteral(exprNode)) {
+    return exprNode.value;
+  }
+  if (t.isBinaryExpression(exprNode)) {
+    if (exprNode.operator === "+") {
+      return evaluateAstNode(exprNode.left, evalFn) + evaluateAstNode(exprNode.right, evalFn);
+    } else if (exprNode.operator === "-") {
+      return evaluateAstNode(exprNode.left, evalFn) - evaluateAstNode(exprNode.right, evalFn);
+    } else if (exprNode.operator === "*") {
+      return evaluateAstNode(exprNode.left, evalFn) * evaluateAstNode(exprNode.right, evalFn);
+    } else if (exprNode.operator === "/") {
+      return evaluateAstNode(exprNode.left, evalFn) / evaluateAstNode(exprNode.right, evalFn);
+    }
+  }
+  if (typeof evalFn !== "function") {
+    throw new Error("evaluateAstNode does not support non-literal values unless an eval function is provided");
+  }
+  return evalFn(exprNode);
+}
+__name(evaluateAstNode, "evaluateAstNode");
+export {
+  evaluateAstNode
+};

package/dist/jsx/extractor/extractHelpers.js

@@ -0,0 +1,102 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import generate from "@babel/generator";
+import * as t from "@babel/types";
+function isPresent(input) {
+  return input != null;
+}
+__name(isPresent, "isPresent");
+function isSimpleSpread(node) {
+  return t.isIdentifier(node.argument) || t.isMemberExpression(node.argument);
+}
+__name(isSimpleSpread, "isSimpleSpread");
+const attrStr = /* @__PURE__ */ __name((attr) => {
+  return !attr ? "" : attr.type === "attr" ? getNameAttr(attr.value) : attr.type === "ternary" ? `...${ternaryStr(attr.value)}` : `${attr.type}(${objToStr(attr.value)})`;
+}, "attrStr");
+const objToStr = /* @__PURE__ */ __name((obj, spacer = ", ") => {
+  if (!obj) {
+    return `${obj}`;
+  }
+  return `{${Object.entries(obj).map(([k, v]) => `${k}:${Array.isArray(v) ? `[...]` : v && typeof v === "object" ? `${objToStr(v, ",")}` : JSON.stringify(v)}`).join(spacer)}}`;
+}, "objToStr");
+const getNameAttr = /* @__PURE__ */ __name((attr) => {
+  if (t.isJSXSpreadAttribute(attr)) {
+    return `...${attr.argument["name"]}`;
+  }
+  return "name" in attr ? attr.name.name : `unknown-${attr["type"]}`;
+}, "getNameAttr");
+const ternaryStr = /* @__PURE__ */ __name((x) => {
+  const conditional = t.isIdentifier(x.test) ? x.test.name : t.isMemberExpression(x.test) ? [x.test.object["name"], x.test.property["name"]] : generate(x.test).code;
+  return [
+    "ternary(",
+    conditional,
+    isFilledObj(x.consequent) ? ` ? ${objToStr(x.consequent)}` : " ? \u{1F6AB}",
+    isFilledObj(x.alternate) ? ` : ${objToStr(x.alternate)}` : " : \u{1F6AB}",
+    ")"
+  ].flat().join("");
+}, "ternaryStr");
+const isFilledObj = /* @__PURE__ */ __name((obj) => obj && Object.keys(obj).length, "isFilledObj");
+function findComponentName(scope) {
+  var _a;
+  let componentName = "";
+  let cur = scope.path;
+  while (cur.parentPath && !t.isProgram(cur.parentPath.parent)) {
+    cur = cur.parentPath;
+  }
+  let node = cur.parent;
+  if (t.isExportNamedDeclaration(node)) {
+    node = node.declaration;
+  }
+  if (t.isVariableDeclaration(node)) {
+    const [dec] = node.declarations;
+    if (t.isVariableDeclarator(dec) && t.isIdentifier(dec.id)) {
+      return dec.id.name;
+    }
+  }
+  if (t.isFunctionDeclaration(node)) {
+    return (_a = node.id) == null ? void 0 : _a.name;
+  }
+  return componentName;
+}
+__name(findComponentName, "findComponentName");
+function isValidThemeHook(jsxPath, n, sourcePath) {
+  var _a;
+  if (!t.isIdentifier(n.object) || !t.isIdentifier(n.property))
+    return false;
+  const bindings = jsxPath.scope.getAllBindings();
+  const binding = bindings[n.object.name];
+  if (!(binding == null ? void 0 : binding.path))
+    return false;
+  if (!binding.path.isVariableDeclarator())
+    return false;
+  const init = binding.path.node.init;
+  if (!t.isCallExpression(init))
+    return false;
+  if (!t.isIdentifier(init.callee))
+    return false;
+  if (init.callee.name !== "useTheme")
+    return false;
+  const importNode = (_a = binding.scope.getBinding("useTheme")) == null ? void 0 : _a.path.parent;
+  if (!t.isImportDeclaration(importNode))
+    return false;
+  if (importNode.source.value !== "tamagui") {
+    if (!isInsideTamagui(sourcePath)) {
+      return false;
+    }
+  }
+  return true;
+}
+__name(isValidThemeHook, "isValidThemeHook");
+const isInsideTamagui = /* @__PURE__ */ __name((srcName) => {
+  return srcName.includes("/dist/jsx") || srcName.includes("/core/src");
+}, "isInsideTamagui");
+export {
+  attrStr,
+  findComponentName,
+  isInsideTamagui,
+  isPresent,
+  isSimpleSpread,
+  isValidThemeHook,
+  objToStr,
+  ternaryStr
+};

package/dist/jsx/extractor/extractMediaStyle.js

@@ -0,0 +1,151 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as t from "@babel/types";
+import { getStylesAtomic, mediaObjectToString } from "@tamagui/core-node";
+import { MEDIA_SEP } from "../constants";
+import { isInsideTamagui, isPresent } from "./extractHelpers";
+function extractMediaStyle(ternary, jsxPath, tamaguiConfig, sourcePath, importance = 0, shouldPrintDebug = false) {
+  const mt = getMediaQueryTernary(ternary, jsxPath, sourcePath);
+  if (!mt) {
+    return null;
+  }
+  const { key } = mt;
+  const mq = tamaguiConfig.media[key];
+  if (!mq) {
+    console.error(`Media query "${key}" not found: ${Object.keys(tamaguiConfig.media)}`);
+    return null;
+  }
+  const getStyleObj = /* @__PURE__ */ __name((styleObj, negate = false) => {
+    return styleObj ? { styleObj, negate } : null;
+  }, "getStyleObj");
+  const styleOpts = [
+    getStyleObj(ternary.consequent, false),
+    getStyleObj(ternary.alternate, true)
+  ].filter(isPresent);
+  if (shouldPrintDebug && !styleOpts.length) {
+    console.log("  media query, no styles?");
+    return null;
+  }
+  const mediaKeys = Object.keys(tamaguiConfig.media);
+  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
+    acc[cur] = new Array(importance + 1).fill(":root").join("");
+    return acc;
+  }, {});
+  let mediaStyles = [];
+  for (const { styleObj, negate } of styleOpts) {
+    const styles = getStylesAtomic(styleObj);
+    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}${MEDIA_SEP}${key}${negKey}${MEDIA_SEP}`)}`;
+      const className = `.${identifier}`;
+      const mediaSelector = 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);
+      let styleRule = "";
+      if (styleInner.includes("@media")) {
+        styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);
+      } else {
+        styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`;
+      }
+      return {
+        ...style,
+        identifier,
+        className,
+        rules: [styleRule]
+      };
+    });
+    if (shouldPrintDebug === "verbose") {
+      console.log("  media styles:", importance, styleObj, singleMediaStyles.map((x) => x.identifier).join(", "));
+    }
+    mediaStyles = [...mediaStyles, ...singleMediaStyles];
+  }
+  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);
+    if (mediaLeft) {
+      return {
+        ...mediaLeft,
+        ternaryWithoutMedia: {
+          ...ternary,
+          test: ternary.test.right
+        }
+      };
+    }
+  }
+  const result = getMediaInfoFromExpression(ternary.test, jsxPath, sourcePath, ternary.inlineMediaQuery);
+  if (result) {
+    return {
+      ...result,
+      ternaryWithoutMedia: null
+    };
+  }
+  return null;
+}
+__name(getMediaQueryTernary, "getMediaQueryTernary");
+function getMediaInfoFromExpression(test, jsxPath, sourcePath, inlineMediaQuery) {
+  var _a, _b, _c;
+  if (inlineMediaQuery) {
+    return {
+      key: inlineMediaQuery,
+      bindingName: inlineMediaQuery
+    };
+  }
+  if (t.isMemberExpression(test) && t.isIdentifier(test.object) && t.isIdentifier(test.property)) {
+    const name = test.object["name"];
+    const key = test.property["name"];
+    const bindings = jsxPath.scope.getAllBindings();
+    const binding = bindings[name];
+    if (!binding)
+      return false;
+    const bindingNode = (_a = binding.path) == null ? void 0 : _a.node;
+    if (!t.isVariableDeclarator(bindingNode) || !bindingNode.init)
+      return false;
+    if (!isValidMediaCall(jsxPath, bindingNode.init, sourcePath))
+      return false;
+    return { key, bindingName: name };
+  }
+  if (t.isIdentifier(test)) {
+    const key = test.name;
+    const node = (_c = (_b = jsxPath.scope.getBinding(test.name)) == null ? void 0 : _b.path) == null ? void 0 : _c.node;
+    if (!t.isVariableDeclarator(node))
+      return false;
+    if (!node.init || !isValidMediaCall(jsxPath, node.init, sourcePath))
+      return false;
+    return { key, bindingName: key };
+  }
+  return null;
+}
+__name(getMediaInfoFromExpression, "getMediaInfoFromExpression");
+function isValidMediaCall(jsxPath, init, sourcePath) {
+  if (!t.isCallExpression(init))
+    return false;
+  if (!t.isIdentifier(init.callee))
+    return false;
+  if (init.callee.name !== "useMedia")
+    return false;
+  const bindings = jsxPath.scope.getAllBindings();
+  const mediaBinding = bindings["useMedia"];
+  if (!mediaBinding)
+    return false;
+  const useMediaImport = mediaBinding.path.parent;
+  if (!t.isImportDeclaration(useMediaImport))
+    return false;
+  if (useMediaImport.source.value !== "tamagui") {
+    if (!isInsideTamagui(sourcePath)) {
+      return false;
+    }
+  }
+  return true;
+}
+__name(isValidMediaCall, "isValidMediaCall");
+export {
+  extractMediaStyle,
+  isValidMediaCall
+};

package/dist/jsx/extractor/extractToClassNames.js

@@ -0,0 +1,292 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as path from "path";
+import { basename } from "path";
+import * as util from "util";
+import generate from "@babel/generator";
+import * as t from "@babel/types";
+import { getStylesAtomic } from "@tamagui/core-node";
+import { concatClassName } from "@tamagui/helpers";
+import invariant from "invariant";
+import { CONCAT_CLASSNAME_IMPORT } from "../constants";
+import { babelParse } from "./babelParse";
+import { buildClassName } from "./buildClassName";
+import { ensureImportingConcat } from "./ensureImportingConcat";
+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 = {
+  shadowOpacity: true,
+  shadowRadius: true,
+  shadowColor: true,
+  shadowOffset: true
+};
+function extractToClassNames({
+  loader,
+  extractor,
+  source,
+  sourcePath,
+  options,
+  shouldPrintDebug,
+  cssLoaderPath,
+  threaded,
+  cssPath
+}) {
+  var _a;
+  const tm = timer();
+  if (typeof source !== "string") {
+    throw new Error("`source` must be a string of javascript");
+  }
+  invariant(typeof sourcePath === "string" && path.isAbsolute(sourcePath), "`sourcePath` must be an absolute path to a .js file");
+  const shouldLogTiming = (_a = options.logTimings) != null ? _a : true;
+  const start = Date.now();
+  const mem = shouldLogTiming ? process.memoryUsage() : null;
+  let ast;
+  try {
+    ast = babelParse(source);
+  } catch (err) {
+    console.error("babel parse error:", sourcePath);
+    throw err;
+  }
+  tm.mark(`babel-parse`, shouldPrintDebug === "verbose");
+  const cssMap = /* @__PURE__ */ new Map();
+  const existingHoists = {};
+  let hasFlattened = false;
+  const res = extractor.parse(ast, {
+    sourcePath,
+    shouldPrintDebug,
+    ...options,
+    getFlattenedNode: ({ tag }) => {
+      hasFlattened = true;
+      return tag;
+    },
+    onExtractTag: ({
+      attrs,
+      node,
+      attemptEval,
+      jsxPath,
+      originalNodeName,
+      filePath,
+      lineNumbers,
+      programPath,
+      isFlattened
+    }) => {
+      var _a2, _b;
+      let finalClassNames = [];
+      let finalAttrs = [];
+      let finalStyles = [];
+      const viewStyles = {};
+      for (const attr of attrs) {
+        if (attr.type === "style") {
+          Object.assign(viewStyles, attr.value);
+        }
+      }
+      const ensureNeededPrevStyle = /* @__PURE__ */ __name((style) => {
+        var _a3;
+        const keys = Object.keys(style);
+        if (!keys.some((key) => mergeStyleGroups[key])) {
+          return style;
+        }
+        for (const k in mergeStyleGroups) {
+          if (k in viewStyles) {
+            style[k] = (_a3 = style[k]) != null ? _a3 : viewStyles[k];
+          }
+        }
+        return style;
+      }, "ensureNeededPrevStyle");
+      const addStyles = /* @__PURE__ */ __name((style) => {
+        if (!style)
+          return [];
+        const styleWithPrev = ensureNeededPrevStyle(style);
+        const res2 = getStylesAtomic(styleWithPrev);
+        if (res2.length) {
+          finalStyles = [...finalStyles, ...res2];
+        }
+        return res2;
+      }, "addStyles");
+      let lastMediaImportance = 1;
+      for (const attr of attrs) {
+        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) {
+                finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(style.property), t.stringLiteral(style.identifier)));
+              }
+            } else {
+              const styles2 = addStyles(attr.value);
+              const newClassNames = concatClassName(styles2.map((x) => x.identifier).join(" "));
+              const existing = finalClassNames.find((x) => x.type == "StringLiteral");
+              if (existing) {
+                existing.value = `${existing.value} ${newClassNames}`;
+              } else {
+                finalClassNames = [...finalClassNames, t.stringLiteral(newClassNames)];
+              }
+            }
+            break;
+          case "attr":
+            const val = attr.value;
+            if (t.isJSXSpreadAttribute(val)) {
+              if (isSimpleSpread(val)) {
+                finalClassNames.push(t.logicalExpression("&&", val.argument, t.memberExpression(val.argument, t.identifier("className"))));
+              }
+            } else if (val.name.name === "className") {
+              const value = val.value;
+              if (value) {
+                try {
+                  const evaluatedValue = attemptEval(value);
+                  finalClassNames.push(t.stringLiteral(evaluatedValue));
+                } catch (e) {
+                  finalClassNames.push(value["expression"]);
+                }
+              }
+              continue;
+            }
+            finalAttrs.push(val);
+            break;
+          case "ternary":
+            const mediaExtraction = extractMediaStyle(attr.value, jsxPath, extractor.getTamagui(), sourcePath, lastMediaImportance, shouldPrintDebug);
+            if (shouldPrintDebug) {
+              if (mediaExtraction) {
+                console.log("ternary (mediaStyles)", (_b = (_a2 = mediaExtraction.ternaryWithoutMedia) == null ? void 0 : _a2.inlineMediaQuery) != null ? _b : "", mediaExtraction.mediaStyles.map((x) => x.identifier).join("."));
+              }
+            }
+            if (!mediaExtraction) {
+              addTernaryStyle(attr.value, addStyles(attr.value.consequent), addStyles(attr.value.alternate));
+              continue;
+            }
+            lastMediaImportance++;
+            if (mediaExtraction.mediaStyles) {
+              finalStyles = [...finalStyles, ...mediaExtraction.mediaStyles];
+            }
+            if (mediaExtraction.ternaryWithoutMedia) {
+              addTernaryStyle(mediaExtraction.ternaryWithoutMedia, mediaExtraction.mediaStyles, []);
+            } else {
+              finalClassNames = [
+                ...finalClassNames,
+                ...mediaExtraction.mediaStyles.map((x) => t.stringLiteral(x.identifier))
+              ];
+            }
+            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)));
+        } else {
+          finalClassNames.push(t.conditionalExpression(ternary.test, t.stringLiteral(" " + cCN), t.stringLiteral(" " + aCN)));
+        }
+      }
+      __name(addTernaryStyle, "addTernaryStyle");
+      if (shouldPrintDebug) {
+        console.log("  finalClassNames\n", logLines(finalClassNames.map((x) => x["value"]).join(" ")));
+      }
+      node.attributes = finalAttrs;
+      if (finalClassNames.length) {
+        let names = buildClassName(finalClassNames);
+        if (t.isStringLiteral(names)) {
+          names.value = concatClassName(names.value);
+        }
+        const nameExpr = names ? hoistClassNames(jsxPath, existingHoists, names) : null;
+        let expr = nameExpr;
+        if (nameExpr && !t.isIdentifier(nameExpr)) {
+          if (!hasFlattened) {
+          } else {
+            ensureImportingConcat(programPath);
+            const simpleSpreads = attrs.filter((x) => t.isJSXSpreadAttribute(x.value) && isSimpleSpread(x.value));
+            expr = t.callExpression(t.identifier(CONCAT_CLASSNAME_IMPORT), [
+              expr,
+              ...simpleSpreads.map((val) => val.value["argument"])
+            ]);
+          }
+        }
+        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) {
+        if (cssMap.has(className)) {
+          if (comment) {
+            const val = cssMap.get(className);
+            val.commentTexts.push(comment);
+            cssMap.set(className, val);
+          }
+        } else if (rules.length) {
+          if (rules.length > 1) {
+            console.log("  rules error", { rules });
+            throw new Error(`Shouldn't have more than one rule`);
+          }
+          cssMap.set(className, {
+            css: rules[0],
+            commentTexts: [comment]
+          });
+        }
+      }
+    }
+  });
+  if (!res || !res.modified && !res.optimized && !res.flattened) {
+    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 = generate(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 style -------- \n\n", styles);
+  }
+  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 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(`${getPrefixLogs(options)} ${path2}  ${numFound}   \xB7 ${numOptimized}   \xB7 ${numFlattened}  ${timingStr} ${memory ? `(${memory})` : ""}`);
+  }
+  return {
+    ast,
+    styles,
+    js: result.code,
+    map: result.map
+  };
+}
+__name(extractToClassNames, "extractToClassNames");
+export {
+  extractToClassNames
+};

package/dist/jsx/extractor/findTopmostFunction.js

@@ -0,0 +1,22 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function findTopmostFunction(jsxPath) {
+  const isFunction = /* @__PURE__ */ __name((path) => path.isArrowFunctionExpression() || path.isFunctionDeclaration() || path.isFunctionExpression(), "isFunction");
+  let compFn = jsxPath.findParent(isFunction);
+  while (compFn) {
+    const parent = compFn.findParent(isFunction);
+    if (parent) {
+      compFn = parent;
+    } else {
+      break;
+    }
+  }
+  if (!compFn) {
+    return null;
+  }
+  return compFn;
+}
+__name(findTopmostFunction, "findTopmostFunction");
+export {
+  findTopmostFunction
+};