@tamagui/static 1.0.1-beta.60 → 1.0.1-beta.63

package/dist/esm/extractor/extractToClassNames.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/extractor/extractToClassNames.ts"],
-  "sourcesContent": ["import * as path from 'path'\nimport { basename } from 'path'\nimport * as util from 'util'\n\nimport generate from '@babel/generator'\nimport * as t from '@babel/types'\nimport { getStylesAtomic } from '@tamagui/core-node'\nimport { concatClassName } from '@tamagui/helpers'\nimport invariant from 'invariant'\nimport { ViewStyle } from 'react-native'\nimport { LoaderContext } from 'webpack'\n\nimport { CONCAT_CLASSNAME_IMPORT } from '../constants'\nimport { ClassNameObject, StyleObject, TamaguiOptions, Ternary } from '../types'\nimport { babelParse } from './babelParse'\nimport { buildClassName } from './buildClassName'\nimport { Extractor } from './createExtractor'\nimport { ensureImportingConcat } from './ensureImportingConcat'\nimport { isSimpleSpread } from './extractHelpers'\nimport { extractMediaStyle } from './extractMediaStyle'\nimport { getPrefixLogs } from './getPrefixLogs'\nimport { hoistClassNames } from './hoistClassNames'\nimport { literalToAst } from './literalToAst'\nimport { logLines } from './logLines'\nimport { timer } from './timer'\n\nconst mergeStyleGroups = {\n  shadowOpacity: true,\n  shadowRadius: true,\n  shadowColor: true,\n  shadowOffset: true,\n}\n\nexport type ExtractedResponse = {\n  js: string | Buffer\n  styles: string\n  stylesPath?: string\n  ast: t.File\n  map: any // RawSourceMap from 'source-map'\n}\n\nexport function extractToClassNames({\n  loader,\n  extractor,\n  source,\n  sourcePath,\n  options,\n  shouldPrintDebug,\n  cssLoaderPath,\n  threaded,\n  cssPath,\n}: {\n  loader: LoaderContext<any>\n  cssLoaderPath: string\n  extractor: Extractor\n  source: string | Buffer\n  sourcePath: string\n  options: TamaguiOptions\n  shouldPrintDebug: boolean | 'verbose'\n  cssPath: string\n  threaded?: boolean\n}): ExtractedResponse | null {\n  const tm = timer()\n\n  if (typeof source !== 'string') {\n    throw new Error('`source` must be a string of javascript')\n  }\n  invariant(\n    typeof sourcePath === 'string' && path.isAbsolute(sourcePath),\n    '`sourcePath` must be an absolute path to a .js file'\n  )\n\n  const shouldLogTiming = options.logTimings ?? true\n  const start = Date.now()\n  const mem = shouldLogTiming ? process.memoryUsage() : null\n\n  // Using a map for (officially supported) guaranteed insertion order\n  let ast: t.File\n\n  try {\n    // @ts-ignore\n    ast = babelParse(source)\n  } catch (err) {\n    console.error('babel parse error:', sourcePath)\n    throw err\n  }\n\n  tm.mark(`babel-parse`, shouldPrintDebug === 'verbose')\n\n  const cssMap = new Map<string, { css: string; commentTexts: string[] }>()\n  const existingHoists: { [key: string]: t.Identifier } = {}\n\n  let hasFlattened = false\n\n  const res = extractor.parse(ast, {\n    sourcePath,\n    shouldPrintDebug,\n    ...options,\n    target: 'html',\n    getFlattenedNode: ({ tag }) => {\n      hasFlattened = true\n      return tag\n    },\n    onExtractTag: ({\n      attrs,\n      node,\n      attemptEval,\n      jsxPath,\n      originalNodeName,\n      filePath,\n      lineNumbers,\n      programPath,\n      isFlattened,\n    }) => {\n      let finalClassNames: ClassNameObject[] = []\n      let finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []\n      let finalStyles: StyleObject[] = []\n\n      let viewStyles = {}\n      for (const attr of attrs) {\n        if (attr.type === 'style') {\n          viewStyles = {\n            ...viewStyles,\n            ...attr.value,\n          }\n        }\n      }\n\n      const ensureNeededPrevStyle = (style: ViewStyle) => {\n        // ensure all group keys are merged\n        const keys = Object.keys(style)\n        if (!keys.some((key) => mergeStyleGroups[key])) {\n          return style\n        }\n        for (const k in mergeStyleGroups) {\n          if (k in viewStyles) {\n            style[k] = style[k] ?? viewStyles[k]\n          }\n        }\n        return style\n      }\n\n      const addStyles = (style: ViewStyle | null): StyleObject[] => {\n        if (!style) return []\n        const styleWithPrev = ensureNeededPrevStyle(style)\n        const res = getStylesAtomic(styleWithPrev)\n        if (res.length) {\n          finalStyles = [...finalStyles, ...res]\n        }\n        return res\n      }\n\n      // 1 to start above any :hover styles\n      let lastMediaImportance = 1\n      for (const attr of attrs) {\n        switch (attr.type) {\n          case 'style':\n            if (!isFlattened) {\n              // only ever one at a time i believe so we can be lazy with this access\n              const { hoverStyle, pressStyle, focusStyle } = attr.value\n              const pseudos = [\n                ['hoverStyle', hoverStyle],\n                ['pressStyle', pressStyle],\n                ['focusStyle', focusStyle],\n              ] as const\n\n              const styles = getStylesAtomic(attr.value, {\n                splitTransforms: true,\n              })\n              finalStyles = [...finalStyles, ...styles]\n\n              for (const [key, value] of pseudos) {\n                if (value && Object.keys(value).length) {\n                  finalAttrs.push(\n                    t.jsxAttribute(\n                      t.jsxIdentifier(key),\n                      t.jsxExpressionContainer(literalToAst(value))\n                    )\n                  )\n                }\n              }\n\n              for (const style of styles) {\n                if (style.pseudo) {\n                  continue\n                }\n                //  leave them  as attributes\n                finalAttrs.push(\n                  t.jsxAttribute(t.jsxIdentifier(style.property), t.stringLiteral(style.identifier))\n                )\n              }\n\n              // for (const key in attr.value) {\n              //   if (pseudos.some((x) => x[0] === key)) {\n              //     // we handled pseudos above...\n              //     continue\n              //   }\n              //   // leave them as attributes\n              //   finalAttrs.push(\n              //     t.jsxAttribute(t.jsxIdentifier(key), t.stringLiteral(attr.value[key]))\n              //   )\n              // }\n            } else {\n              const styles = addStyles(attr.value)\n              const newClassNames = concatClassName(styles.map((x) => x.identifier).join(' '))\n              const existing = finalClassNames.find(\n                (x) => x.type == 'StringLiteral'\n              ) as t.StringLiteral | null\n\n              // const newClassNames = concatClassName(Object.values(attr.value))\n              // const existing = finalClassNames.find(\n              //   (x) => x.type == 'StringLiteral'\n              // ) as t.StringLiteral | null\n\n              if (existing) {\n                existing.value = `${existing.value} ${newClassNames}`\n              } else {\n                finalClassNames = [...finalClassNames, t.stringLiteral(newClassNames)]\n              }\n            }\n\n            break\n          case 'attr':\n            const val = attr.value\n            if (t.isJSXSpreadAttribute(val)) {\n              if (isSimpleSpread(val)) {\n                finalClassNames.push(\n                  t.logicalExpression(\n                    '&&',\n                    val.argument,\n                    t.memberExpression(val.argument, t.identifier('className'))\n                  )\n                )\n              }\n            } else if (val.name.name === 'className') {\n              const value = val.value\n              if (value) {\n                try {\n                  const evaluatedValue = attemptEval(value)\n                  finalClassNames.push(t.stringLiteral(evaluatedValue))\n                } catch (e) {\n                  finalClassNames.push(value['expression'])\n                }\n              }\n              continue\n            }\n            finalAttrs.push(val)\n            break\n          case 'ternary':\n            const mediaExtraction = extractMediaStyle(\n              attr.value,\n              jsxPath,\n              extractor.getTamagui(),\n              sourcePath,\n              lastMediaImportance,\n              shouldPrintDebug\n            )\n            if (shouldPrintDebug) {\n              if (mediaExtraction) {\n                // prettier-ignore\n                console.log('ternary (mediaStyles)', mediaExtraction.ternaryWithoutMedia?.inlineMediaQuery ?? '', mediaExtraction.mediaStyles.map((x) => x.identifier).join('.'))\n              }\n            }\n            if (!mediaExtraction) {\n              addTernaryStyle(\n                attr.value,\n                addStyles(attr.value.consequent),\n                addStyles(attr.value.alternate)\n              )\n              continue\n            }\n            lastMediaImportance++\n            if (mediaExtraction.mediaStyles) {\n              finalStyles = [...finalStyles, ...mediaExtraction.mediaStyles]\n            }\n            if (mediaExtraction.ternaryWithoutMedia) {\n              addTernaryStyle(mediaExtraction.ternaryWithoutMedia, mediaExtraction.mediaStyles, [])\n            } else {\n              finalClassNames = [\n                ...finalClassNames,\n                ...mediaExtraction.mediaStyles.map((x) => t.stringLiteral(x.identifier)),\n              ]\n            }\n            break\n        }\n      }\n\n      function addTernaryStyle(ternary: Ternary, a: any, b: any) {\n        const cCN = a.map((x) => x.identifier).join(' ')\n        const aCN = b.map((x) => x.identifier).join(' ')\n        if (a.length && b.length) {\n          finalClassNames.push(\n            t.conditionalExpression(ternary.test, t.stringLiteral(cCN), t.stringLiteral(aCN))\n          )\n        } else {\n          finalClassNames.push(\n            t.conditionalExpression(\n              ternary.test,\n              t.stringLiteral(' ' + cCN),\n              t.stringLiteral(' ' + aCN)\n            )\n          )\n        }\n      }\n\n      if (shouldPrintDebug) {\n        // prettier-ignore\n        console.log('  finalClassNames\\n', logLines(finalClassNames.map(x => x['value']).join(' ')))\n      }\n\n      node.attributes = finalAttrs\n\n      if (finalClassNames.length) {\n        // inserts the _cn variable and uses it for className\n        let names = buildClassName(finalClassNames)\n        if (t.isStringLiteral(names)) {\n          names.value = concatClassName(names.value)\n        }\n        const nameExpr = names ? hoistClassNames(jsxPath, existingHoists, names) : null\n        let expr = nameExpr\n\n        // if has some spreads, use concat helper\n        if (nameExpr && !t.isIdentifier(nameExpr)) {\n          if (!hasFlattened) {\n            // not flat\n          } else {\n            ensureImportingConcat(programPath)\n            const simpleSpreads = attrs.filter(\n              (x) => t.isJSXSpreadAttribute(x.value) && isSimpleSpread(x.value)\n            )\n            expr = t.callExpression(t.identifier(CONCAT_CLASSNAME_IMPORT), [\n              expr,\n              ...simpleSpreads.map((val) => val.value['argument']),\n            ])\n          }\n        }\n\n        node.attributes.push(\n          t.jsxAttribute(t.jsxIdentifier('className'), t.jsxExpressionContainer(expr))\n        )\n      }\n\n      const comment = util.format('/* %s:%s (%s) */', filePath, lineNumbers, originalNodeName)\n\n      for (const { className, rules, identifier, value } of finalStyles) {\n        // console.log('backvalue', identifier, value)\n        // ast.program.body.unshift(\n        //   t.expressionStatement(\n        //     t.callExpression(\n        //       t.memberExpression(\n        //         t.callExpression(t.identifier('require'), [t.stringLiteral('@tamagui/core')]),\n        //         t.identifier('setIdentifierValue')\n        //       ),\n        //       [t.stringLiteral(identifier), t.stringLiteral(value)]\n        //     )\n        //   )\n        // )\n\n        if (cssMap.has(className)) {\n          if (comment) {\n            const val = cssMap.get(className)!\n            val.commentTexts.push(comment)\n            cssMap.set(className, val)\n          }\n        } else if (rules.length) {\n          if (rules.length > 1) {\n            console.log('  rules error', { rules })\n            throw new Error(`Shouldn't have more than one rule`)\n          }\n          cssMap.set(className, {\n            css: rules[0],\n            commentTexts: [comment],\n          })\n        }\n      }\n    },\n  })\n\n  if (!res || (!res.modified && !res.optimized && !res.flattened)) {\n    if (shouldPrintDebug) {\n      console.log('no res or none modified', res)\n    }\n    return null\n  }\n\n  const styles = Array.from(cssMap.values())\n    .map((x) => x.css)\n    .join('\\n')\n    .trim()\n\n  if (styles) {\n    const cssQuery = threaded\n      ? `cssData=${Buffer.from(styles).toString('base64')}`\n      : `cssPath=${cssPath}`\n    const remReq = loader.remainingRequest\n    const importPath = `${cssPath}!=!${cssLoaderPath}?${cssQuery}!${remReq}`\n    ast.program.body.unshift(t.importDeclaration([], t.stringLiteral(importPath)))\n  }\n\n  const result = generate(\n    ast,\n    {\n      concise: false,\n      filename: sourcePath,\n      // this makes the debug output terrible, and i think sourcemap works already\n      retainLines: false,\n      sourceFileName: sourcePath,\n      sourceMaps: true,\n    },\n    source\n  )\n\n  if (shouldPrintDebug) {\n    console.log(\n      '\\n -------- output code ------- \\n\\n',\n      result.code\n        .split('\\n')\n        .filter((x) => !x.startsWith('//'))\n        .join('\\n')\n    )\n    console.log('\\n -------- output style -------- \\n\\n', styles)\n  }\n\n  if (shouldLogTiming) {\n    const memUsed = mem\n      ? Math.round(((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204) * 10) / 10\n      : 0\n    const path = basename(sourcePath)\n      .replace(/\\.[jt]sx?$/, '')\n      .slice(0, 22)\n      .trim()\n      .padStart(24)\n    const numOptimized = `${res.optimized}`.padStart(3)\n    const numFound = `${res.found}`.padStart(3)\n    const numFlattened = `${res.flattened}`.padStart(3)\n    const memory = process.env.DEBUG && memUsed > 10 ? ` ${memUsed}MB` : ''\n    const timing = Date.now() - start\n    const timingWarning = timing > 50 ? '\u26A0\uFE0F' : timing > 150 ? '\u2622\uFE0F' : ''\n    const timingStr = `${timing}ms${timingWarning}`.padStart(6)\n    console.log(\n      `${getPrefixLogs(\n        options\n      )} ${path}  ${numFound}   \u00B7 ${numOptimized}   \u00B7 ${numFlattened}  ${timingStr} ${\n        memory ? `(${memory})` : ''\n      }`\n    )\n  }\n\n  return {\n    ast,\n    styles,\n    js: result.code,\n    map: result.map,\n  }\n}\n"],
-  "mappings": ";;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB;AAAA,EACvB,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAChB;AAUO,6BAA6B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAW2B;AA7D7B;AA8DE,QAAM,KAAK,MAAM;AAEjB,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC3D;AACA,YACE,OAAO,eAAe,YAAY,KAAK,WAAW,UAAU,GAC5D,qDACF;AAEA,QAAM,kBAAkB,cAAQ,eAAR,YAAsB;AAC9C,QAAM,QAAQ,KAAK,IAAI;AACvB,QAAM,MAAM,kBAAkB,QAAQ,YAAY,IAAI;AAGtD,MAAI;AAEJ,MAAI;AAEF,UAAM,WAAW,MAAM;AAAA,EACzB,SAAS,KAAP;AACA,YAAQ,MAAM,sBAAsB,UAAU;AAC9C,UAAM;AAAA,EACR;AAEA,KAAG,KAAK,eAAe,qBAAqB,SAAS;AAErD,QAAM,SAAS,oBAAI,IAAqD;AACxE,QAAM,iBAAkD,CAAC;AAEzD,MAAI,eAAe;AAEnB,QAAM,MAAM,UAAU,MAAM,KAAK;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,kBAAkB,CAAC,EAAE,UAAU;AAC7B,qBAAe;AACf,aAAO;AAAA,IACT;AAAA,IACA,cAAc,CAAC;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,UACI;AAjHV;AAkHM,UAAI,kBAAqC,CAAC;AAC1C,UAAI,aAAwD,CAAC;AAC7D,UAAI,cAA6B,CAAC;AAElC,UAAI,aAAa,CAAC;AAClB,iBAAW,QAAQ,OAAO;AACxB,YAAI,KAAK,SAAS,SAAS;AACzB,uBAAa;AAAA,YACX,GAAG;AAAA,YACH,GAAG,KAAK;AAAA,UACV;AAAA,QACF;AAAA,MACF;AAEA,YAAM,wBAAwB,wBAAC,UAAqB;AAhI1D;AAkIQ,cAAM,OAAO,OAAO,KAAK,KAAK;AAC9B,YAAI,CAAC,KAAK,KAAK,CAAC,QAAQ,iBAAiB,IAAI,GAAG;AAC9C,iBAAO;AAAA,QACT;AACA,mBAAW,KAAK,kBAAkB;AAChC,cAAI,KAAK,YAAY;AACnB,kBAAM,KAAK,aAAM,OAAN,aAAY,WAAW;AAAA,UACpC;AAAA,QACF;AACA,eAAO;AAAA,MACT,GAZ8B;AAc9B,YAAM,YAAY,wBAAC,UAA2C;AAC5D,YAAI,CAAC;AAAO,iBAAO,CAAC;AACpB,cAAM,gBAAgB,sBAAsB,KAAK;AACjD,cAAM,OAAM,gBAAgB,aAAa;AACzC,YAAI,KAAI,QAAQ;AACd,wBAAc,CAAC,GAAG,aAAa,GAAG,IAAG;AAAA,QACvC;AACA,eAAO;AAAA,MACT,GARkB;AAWlB,UAAI,sBAAsB;AAC1B,iBAAW,QAAQ,OAAO;AACxB,gBAAQ,KAAK;AAAA,eACN;AACH,gBAAI,CAAC,aAAa;AAEhB,oBAAM,EAAE,YAAY,YAAY,eAAe,KAAK;AACpD,oBAAM,UAAU;AAAA,gBACd,CAAC,cAAc,UAAU;AAAA,gBACzB,CAAC,cAAc,UAAU;AAAA,gBACzB,CAAC,cAAc,UAAU;AAAA,cAC3B;AAEA,oBAAM,UAAS,gBAAgB,KAAK,OAAO;AAAA,gBACzC,iBAAiB;AAAA,cACnB,CAAC;AACD,4BAAc,CAAC,GAAG,aAAa,GAAG,OAAM;AAExC,yBAAW,CAAC,KAAK,UAAU,SAAS;AAClC,oBAAI,SAAS,OAAO,KAAK,KAAK,EAAE,QAAQ;AACtC,6BAAW,KACT,EAAE,aACA,EAAE,cAAc,GAAG,GACnB,EAAE,uBAAuB,aAAa,KAAK,CAAC,CAC9C,CACF;AAAA,gBACF;AAAA,cACF;AAEA,yBAAW,SAAS,SAAQ;AAC1B,oBAAI,MAAM,QAAQ;AAChB;AAAA,gBACF;AAEA,2BAAW,KACT,EAAE,aAAa,EAAE,cAAc,MAAM,QAAQ,GAAG,EAAE,cAAc,MAAM,UAAU,CAAC,CACnF;AAAA,cACF;AAAA,YAYF,OAAO;AACL,oBAAM,UAAS,UAAU,KAAK,KAAK;AACnC,oBAAM,gBAAgB,gBAAgB,QAAO,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,GAAG,CAAC;AAC/E,oBAAM,WAAW,gBAAgB,KAC/B,CAAC,MAAM,EAAE,QAAQ,eACnB;AAOA,kBAAI,UAAU;AACZ,yBAAS,QAAQ,GAAG,SAAS,SAAS;AAAA,cACxC,OAAO;AACL,kCAAkB,CAAC,GAAG,iBAAiB,EAAE,cAAc,aAAa,CAAC;AAAA,cACvE;AAAA,YACF;AAEA;AAAA,eACG;AACH,kBAAM,MAAM,KAAK;AACjB,gBAAI,EAAE,qBAAqB,GAAG,GAAG;AAC/B,kBAAI,eAAe,GAAG,GAAG;AACvB,gCAAgB,KACd,EAAE,kBACA,MACA,IAAI,UACJ,EAAE,iBAAiB,IAAI,UAAU,EAAE,WAAW,WAAW,CAAC,CAC5D,CACF;AAAA,cACF;AAAA,YACF,WAAW,IAAI,KAAK,SAAS,aAAa;AACxC,oBAAM,QAAQ,IAAI;AAClB,kBAAI,OAAO;AACT,oBAAI;AACF,wBAAM,iBAAiB,YAAY,KAAK;AACxC,kCAAgB,KAAK,EAAE,cAAc,cAAc,CAAC;AAAA,gBACtD,SAAS,GAAP;AACA,kCAAgB,KAAK,MAAM,aAAa;AAAA,gBAC1C;AAAA,cACF;AACA;AAAA,YACF;AACA,uBAAW,KAAK,GAAG;AACnB;AAAA,eACG;AACH,kBAAM,kBAAkB,kBACtB,KAAK,OACL,SACA,UAAU,WAAW,GACrB,YACA,qBACA,gBACF;AACA,gBAAI,kBAAkB;AACpB,kBAAI,iBAAiB;AAEnB,wBAAQ,IAAI,yBAAyB,6BAAgB,wBAAhB,oBAAqC,qBAArC,YAAyD,IAAI,gBAAgB,YAAY,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,GAAG,CAAC;AAAA,cAClK;AAAA,YACF;AACA,gBAAI,CAAC,iBAAiB;AACpB,8BACE,KAAK,OACL,UAAU,KAAK,MAAM,UAAU,GAC/B,UAAU,KAAK,MAAM,SAAS,CAChC;AACA;AAAA,YACF;AACA;AACA,gBAAI,gBAAgB,aAAa;AAC/B,4BAAc,CAAC,GAAG,aAAa,GAAG,gBAAgB,WAAW;AAAA,YAC/D;AACA,gBAAI,gBAAgB,qBAAqB;AACvC,8BAAgB,gBAAgB,qBAAqB,gBAAgB,aAAa,CAAC,CAAC;AAAA,YACtF,OAAO;AACL,gCAAkB;AAAA,gBAChB,GAAG;AAAA,gBACH,GAAG,gBAAgB,YAAY,IAAI,CAAC,MAAM,EAAE,cAAc,EAAE,UAAU,CAAC;AAAA,cACzE;AAAA,YACF;AACA;AAAA;AAAA,MAEN;AAEA,+BAAyB,SAAkB,GAAQ,GAAQ;AACzD,cAAM,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,GAAG;AAC/C,cAAM,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,GAAG;AAC/C,YAAI,EAAE,UAAU,EAAE,QAAQ;AACxB,0BAAgB,KACd,EAAE,sBAAsB,QAAQ,MAAM,EAAE,cAAc,GAAG,GAAG,EAAE,cAAc,GAAG,CAAC,CAClF;AAAA,QACF,OAAO;AACL,0BAAgB,KACd,EAAE,sBACA,QAAQ,MACR,EAAE,cAAc,MAAM,GAAG,GACzB,EAAE,cAAc,MAAM,GAAG,CAC3B,CACF;AAAA,QACF;AAAA,MACF;AAhBS;AAkBT,UAAI,kBAAkB;AAEpB,gBAAQ,IAAI,uBAAuB,SAAS,gBAAgB,IAAI,OAAK,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC;AAAA,MAC7F;AAEA,WAAK,aAAa;AAElB,UAAI,gBAAgB,QAAQ;AAE1B,YAAI,QAAQ,eAAe,eAAe;AAC1C,YAAI,EAAE,gBAAgB,KAAK,GAAG;AAC5B,gBAAM,QAAQ,gBAAgB,MAAM,KAAK;AAAA,QAC3C;AACA,cAAM,WAAW,QAAQ,gBAAgB,SAAS,gBAAgB,KAAK,IAAI;AAC3E,YAAI,OAAO;AAGX,YAAI,YAAY,CAAC,EAAE,aAAa,QAAQ,GAAG;AACzC,cAAI,CAAC,cAAc;AAAA,UAEnB,OAAO;AACL,kCAAsB,WAAW;AACjC,kBAAM,gBAAgB,MAAM,OAC1B,CAAC,MAAM,EAAE,qBAAqB,EAAE,KAAK,KAAK,eAAe,EAAE,KAAK,CAClE;AACA,mBAAO,EAAE,eAAe,EAAE,WAAW,uBAAuB,GAAG;AAAA,cAC7D;AAAA,cACA,GAAG,cAAc,IAAI,CAAC,QAAQ,IAAI,MAAM,WAAW;AAAA,YACrD,CAAC;AAAA,UACH;AAAA,QACF;AAEA,aAAK,WAAW,KACd,EAAE,aAAa,EAAE,cAAc,WAAW,GAAG,EAAE,uBAAuB,IAAI,CAAC,CAC7E;AAAA,MACF;AAEA,YAAM,UAAU,KAAK,OAAO,oBAAoB,UAAU,aAAa,gBAAgB;AAEvF,iBAAW,EAAE,WAAW,OAAO,YAAY,WAAW,aAAa;AAcjE,YAAI,OAAO,IAAI,SAAS,GAAG;AACzB,cAAI,SAAS;AACX,kBAAM,MAAM,OAAO,IAAI,SAAS;AAChC,gBAAI,aAAa,KAAK,OAAO;AAC7B,mBAAO,IAAI,WAAW,GAAG;AAAA,UAC3B;AAAA,QACF,WAAW,MAAM,QAAQ;AACvB,cAAI,MAAM,SAAS,GAAG;AACpB,oBAAQ,IAAI,iBAAiB,EAAE,MAAM,CAAC;AACtC,kBAAM,IAAI,MAAM,mCAAmC;AAAA,UACrD;AACA,iBAAO,IAAI,WAAW;AAAA,YACpB,KAAK,MAAM;AAAA,YACX,cAAc,CAAC,OAAO;AAAA,UACxB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,CAAC,OAAQ,CAAC,IAAI,YAAY,CAAC,IAAI,aAAa,CAAC,IAAI,WAAY;AAC/D,QAAI,kBAAkB;AACpB,cAAQ,IAAI,2BAA2B,GAAG;AAAA,IAC5C;AACA,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,MAAM,KAAK,OAAO,OAAO,CAAC,EACtC,IAAI,CAAC,MAAM,EAAE,GAAG,EAChB,KAAK,IAAI,EACT,KAAK;AAER,MAAI,QAAQ;AACV,UAAM,WAAW,WACb,WAAW,OAAO,KAAK,MAAM,EAAE,SAAS,QAAQ,MAChD,WAAW;AACf,UAAM,SAAS,OAAO;AACtB,UAAM,aAAa,GAAG,aAAa,iBAAiB,YAAY;AAChE,QAAI,QAAQ,KAAK,QAAQ,EAAE,kBAAkB,CAAC,GAAG,EAAE,cAAc,UAAU,CAAC,CAAC;AAAA,EAC/E;AAEA,QAAM,SAAS,SACb,KACA;AAAA,IACE,SAAS;AAAA,IACT,UAAU;AAAA,IAEV,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd,GACA,MACF;AAEA,MAAI,kBAAkB;AACpB,YAAQ,IACN,wCACA,OAAO,KACJ,MAAM,IAAI,EACV,OAAO,CAAC,MAAM,CAAC,EAAE,WAAW,IAAI,CAAC,EACjC,KAAK,IAAI,CACd;AACA,YAAQ,IAAI,0CAA0C,MAAM;AAAA,EAC9D;AAEA,MAAI,iBAAiB;AACnB,UAAM,UAAU,MACZ,KAAK,MAAQ,SAAQ,YAAY,EAAE,WAAW,IAAI,YAAY,OAAO,OAAQ,EAAE,IAAI,KACnF;AACJ,UAAM,QAAO,SAAS,UAAU,EAC7B,QAAQ,cAAc,EAAE,EACxB,MAAM,GAAG,EAAE,EACX,KAAK,EACL,SAAS,EAAE;AACd,UAAM,eAAe,GAAG,IAAI,YAAY,SAAS,CAAC;AAClD,UAAM,WAAW,GAAG,IAAI,QAAQ,SAAS,CAAC;AAC1C,UAAM,eAAe,GAAG,IAAI,YAAY,SAAS,CAAC;AAClD,UAAM,SAAS,QAAQ,IAAI,SAAS,UAAU,KAAK,IAAI,cAAc;AACrE,UAAM,SAAS,KAAK,IAAI,IAAI;AAC5B,UAAM,gBAAgB,SAAS,KAAK,iBAAO,SAAS,MAAM,iBAAO;AACjE,UAAM,YAAY,GAAG,WAAW,gBAAgB,SAAS,CAAC;AAC1D,YAAQ,IACN,GAAG,cACD,OACF,KAAK,UAAS,mBAAgB,uBAAoB,iBAAiB,aACjE,SAAS,IAAI,YAAY,IAE7B;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,IAAI,OAAO;AAAA,IACX,KAAK,OAAO;AAAA,EACd;AACF;AA7ZgB;",
+  "sourcesContent": ["import * as path from 'path'\nimport { basename } from 'path'\nimport * as util from 'util'\n\nimport generate from '@babel/generator'\nimport * as t from '@babel/types'\nimport { getStylesAtomic } from '@tamagui/core-node'\nimport { concatClassName } from '@tamagui/helpers'\nimport invariant from 'invariant'\nimport { ViewStyle } from 'react-native'\nimport { LoaderContext } from 'webpack'\n\nimport { CONCAT_CLASSNAME_IMPORT } from '../constants'\nimport { ClassNameObject, StyleObject, TamaguiOptions, Ternary } from '../types'\nimport { babelParse } from './babelParse'\nimport { buildClassName } from './buildClassName'\nimport { Extractor } from './createExtractor'\nimport { ensureImportingConcat } from './ensureImportingConcat'\nimport { isSimpleSpread } from './extractHelpers'\nimport { extractMediaStyle } from './extractMediaStyle'\nimport { getPrefixLogs } from './getPrefixLogs'\nimport { hoistClassNames } from './hoistClassNames'\nimport { literalToAst } from './literalToAst'\nimport { logLines } from './logLines'\nimport { timer } from './timer'\n\nconst mergeStyleGroups = {\n  shadowOpacity: true,\n  shadowRadius: true,\n  shadowColor: true,\n  shadowOffset: true,\n}\n\nexport type ExtractedResponse = {\n  js: string | Buffer\n  styles: string\n  stylesPath?: string\n  ast: t.File\n  map: any // RawSourceMap from 'source-map'\n}\n\nexport function extractToClassNames({\n  loader,\n  extractor,\n  source,\n  sourcePath,\n  options,\n  shouldPrintDebug,\n  cssLoaderPath,\n  threaded,\n  cssPath,\n}: {\n  loader: LoaderContext<any>\n  cssLoaderPath: string\n  extractor: Extractor\n  source: string | Buffer\n  sourcePath: string\n  options: TamaguiOptions\n  shouldPrintDebug: boolean | 'verbose'\n  cssPath: string\n  threaded?: boolean\n}): ExtractedResponse | null {\n  const tm = timer()\n\n  if (typeof source !== 'string') {\n    throw new Error('`source` must be a string of javascript')\n  }\n  invariant(\n    typeof sourcePath === 'string' && path.isAbsolute(sourcePath),\n    '`sourcePath` must be an absolute path to a .js file'\n  )\n\n  const shouldLogTiming = options.logTimings ?? true\n  const start = Date.now()\n  const mem = shouldLogTiming ? process.memoryUsage() : null\n\n  // Using a map for (officially supported) guaranteed insertion order\n  let ast: t.File\n\n  try {\n    // @ts-ignore\n    ast = babelParse(source)\n  } catch (err) {\n    console.error('babel parse error:', sourcePath)\n    throw err\n  }\n\n  tm.mark(`babel-parse`, shouldPrintDebug === 'verbose')\n\n  const cssMap = new Map<string, { css: string; commentTexts: string[] }>()\n  const existingHoists: { [key: string]: t.Identifier } = {}\n\n  let hasFlattened = false\n\n  const res = extractor.parse(ast, {\n    sourcePath,\n    shouldPrintDebug,\n    ...options,\n    target: 'html',\n    getFlattenedNode: ({ tag }) => {\n      hasFlattened = true\n      return tag\n    },\n    onExtractTag: ({\n      attrs,\n      node,\n      attemptEval,\n      jsxPath,\n      originalNodeName,\n      filePath,\n      lineNumbers,\n      programPath,\n      isFlattened,\n    }) => {\n      let finalClassNames: ClassNameObject[] = []\n      let finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []\n      let finalStyles: StyleObject[] = []\n\n      let viewStyles = {}\n      for (const attr of attrs) {\n        if (attr.type === 'style') {\n          viewStyles = {\n            ...viewStyles,\n            ...attr.value,\n          }\n        }\n      }\n\n      const ensureNeededPrevStyle = (style: ViewStyle) => {\n        // ensure all group keys are merged\n        const keys = Object.keys(style)\n        if (!keys.some((key) => mergeStyleGroups[key])) {\n          return style\n        }\n        for (const k in mergeStyleGroups) {\n          if (k in viewStyles) {\n            style[k] = style[k] ?? viewStyles[k]\n          }\n        }\n        return style\n      }\n\n      const addStyles = (style: ViewStyle | null): StyleObject[] => {\n        if (!style) return []\n        const styleWithPrev = ensureNeededPrevStyle(style)\n        const res = getStylesAtomic(styleWithPrev)\n        if (res.length) {\n          finalStyles = [...finalStyles, ...res]\n        }\n        return res\n      }\n\n      // 1 to start above any :hover styles\n      let lastMediaImportance = 1\n      for (const attr of attrs) {\n        switch (attr.type) {\n          case 'style':\n            if (!isFlattened) {\n              // only ever one at a time i believe so we can be lazy with this access\n              const { hoverStyle, pressStyle, focusStyle } = attr.value\n              const pseudos = [\n                ['hoverStyle', hoverStyle],\n                ['pressStyle', pressStyle],\n                ['focusStyle', focusStyle],\n              ] as const\n\n              const styles = getStylesAtomic(attr.value, {\n                splitTransforms: true,\n              })\n              finalStyles = [...finalStyles, ...styles]\n\n              for (const [key, value] of pseudos) {\n                if (value && Object.keys(value).length) {\n                  finalAttrs.push(\n                    t.jsxAttribute(\n                      t.jsxIdentifier(key),\n                      t.jsxExpressionContainer(literalToAst(value))\n                    )\n                  )\n                }\n              }\n\n              for (const style of styles) {\n                if (style.pseudo) {\n                  continue\n                }\n                //  leave them  as attributes\n                finalAttrs.push(\n                  t.jsxAttribute(t.jsxIdentifier(style.property), t.stringLiteral(style.identifier))\n                )\n              }\n            } else {\n              const styles = addStyles(attr.value)\n              const newClassNames = concatClassName(styles.map((x) => x.identifier).join(' '))\n              const existing = finalClassNames.find(\n                (x) => x.type == 'StringLiteral'\n              ) as t.StringLiteral | null\n\n              if (existing) {\n                existing.value = `${existing.value} ${newClassNames}`\n              } else {\n                finalClassNames = [...finalClassNames, t.stringLiteral(newClassNames)]\n              }\n            }\n\n            break\n          case 'attr':\n            const val = attr.value\n            if (t.isJSXSpreadAttribute(val)) {\n              if (isSimpleSpread(val)) {\n                finalClassNames.push(\n                  t.logicalExpression(\n                    '&&',\n                    val.argument,\n                    t.memberExpression(val.argument, t.identifier('className'))\n                  )\n                )\n              }\n            } else if (val.name.name === 'className') {\n              const value = val.value\n              if (value) {\n                try {\n                  const evaluatedValue = attemptEval(value)\n                  finalClassNames.push(t.stringLiteral(evaluatedValue))\n                } catch (e) {\n                  finalClassNames.push(value['expression'])\n                }\n              }\n              continue\n            }\n            finalAttrs.push(val)\n            break\n          case 'ternary':\n            const mediaExtraction = extractMediaStyle(\n              attr.value,\n              jsxPath,\n              extractor.getTamagui(),\n              sourcePath,\n              lastMediaImportance,\n              shouldPrintDebug\n            )\n            if (shouldPrintDebug) {\n              if (mediaExtraction) {\n                // prettier-ignore\n                console.log('ternary (mediaStyles)', mediaExtraction.ternaryWithoutMedia?.inlineMediaQuery ?? '', mediaExtraction.mediaStyles.map((x) => x.identifier).join('.'))\n              }\n            }\n            if (!mediaExtraction) {\n              addTernaryStyle(\n                attr.value,\n                addStyles(attr.value.consequent),\n                addStyles(attr.value.alternate)\n              )\n              continue\n            }\n            lastMediaImportance++\n            if (mediaExtraction.mediaStyles) {\n              finalStyles = [...finalStyles, ...mediaExtraction.mediaStyles]\n            }\n            if (mediaExtraction.ternaryWithoutMedia) {\n              addTernaryStyle(mediaExtraction.ternaryWithoutMedia, mediaExtraction.mediaStyles, [])\n            } else {\n              finalClassNames = [\n                ...finalClassNames,\n                ...mediaExtraction.mediaStyles.map((x) => t.stringLiteral(x.identifier)),\n              ]\n            }\n            break\n        }\n      }\n\n      function addTernaryStyle(ternary: Ternary, a: any, b: any) {\n        const cCN = a.map((x) => x.identifier).join(' ')\n        const aCN = b.map((x) => x.identifier).join(' ')\n        if (a.length && b.length) {\n          finalClassNames.push(\n            t.conditionalExpression(ternary.test, t.stringLiteral(cCN), t.stringLiteral(aCN))\n          )\n        } else {\n          finalClassNames.push(\n            t.conditionalExpression(\n              ternary.test,\n              t.stringLiteral(' ' + cCN),\n              t.stringLiteral(' ' + aCN)\n            )\n          )\n        }\n      }\n\n      if (shouldPrintDebug) {\n        // prettier-ignore\n        console.log('  finalClassNames\\n', logLines(finalClassNames.map(x => x['value']).join(' ')))\n      }\n\n      node.attributes = finalAttrs\n\n      if (finalClassNames.length) {\n        // inserts the _cn variable and uses it for className\n        let names = buildClassName(finalClassNames)\n        if (t.isStringLiteral(names)) {\n          names.value = concatClassName(names.value)\n        }\n        const nameExpr = names ? hoistClassNames(jsxPath, existingHoists, names) : null\n        let expr = nameExpr\n\n        // if has some spreads, use concat helper\n        if (nameExpr && !t.isIdentifier(nameExpr)) {\n          if (!hasFlattened) {\n            // not flat\n          } else {\n            ensureImportingConcat(programPath)\n            const simpleSpreads = attrs.filter(\n              (x) => t.isJSXSpreadAttribute(x.value) && isSimpleSpread(x.value)\n            )\n            expr = t.callExpression(t.identifier(CONCAT_CLASSNAME_IMPORT), [\n              expr,\n              ...simpleSpreads.map((val) => val.value['argument']),\n            ])\n          }\n        }\n\n        node.attributes.push(\n          t.jsxAttribute(t.jsxIdentifier('className'), t.jsxExpressionContainer(expr))\n        )\n      }\n\n      const comment = util.format('/* %s:%s (%s) */', filePath, lineNumbers, originalNodeName)\n\n      for (const { className, rules } of finalStyles) {\n        if (cssMap.has(className)) {\n          if (comment) {\n            const val = cssMap.get(className)!\n            val.commentTexts.push(comment)\n            cssMap.set(className, val)\n          }\n        } else if (rules.length) {\n          if (rules.length > 1) {\n            console.log('  rules error', { rules })\n            throw new Error(`Shouldn't have more than one rule`)\n          }\n          cssMap.set(className, {\n            css: rules[0],\n            commentTexts: [comment],\n          })\n        }\n      }\n    },\n  })\n\n  if (!res || (!res.modified && !res.optimized && !res.flattened)) {\n    if (shouldPrintDebug) {\n      console.log('no res or none modified', res)\n    }\n    return null\n  }\n\n  const styles = Array.from(cssMap.values())\n    .map((x) => x.css)\n    .join('\\n')\n    .trim()\n\n  if (styles) {\n    const cssQuery = threaded\n      ? `cssData=${Buffer.from(styles).toString('base64')}`\n      : `cssPath=${cssPath}`\n    const remReq = loader.remainingRequest\n    const importPath = `${cssPath}!=!${cssLoaderPath}?${cssQuery}!${remReq}`\n    ast.program.body.unshift(t.importDeclaration([], t.stringLiteral(importPath)))\n  }\n\n  const result = generate(\n    ast,\n    {\n      concise: false,\n      filename: sourcePath,\n      // this makes the debug output terrible, and i think sourcemap works already\n      retainLines: false,\n      sourceFileName: sourcePath,\n      sourceMaps: true,\n    },\n    source\n  )\n\n  if (shouldPrintDebug) {\n    console.log(\n      '\\n -------- output code ------- \\n\\n',\n      result.code\n        .split('\\n')\n        .filter((x) => !x.startsWith('//'))\n        .join('\\n')\n    )\n    console.log('\\n -------- output style -------- \\n\\n', styles)\n  }\n\n  if (shouldLogTiming) {\n    const memUsed = mem\n      ? Math.round(((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204) * 10) / 10\n      : 0\n    const path = basename(sourcePath)\n      .replace(/\\.[jt]sx?$/, '')\n      .slice(0, 22)\n      .trim()\n      .padStart(24)\n    const numOptimized = `${res.optimized}`.padStart(3)\n    const numFound = `${res.found}`.padStart(3)\n    const numFlattened = `${res.flattened}`.padStart(3)\n    const memory = process.env.DEBUG && memUsed > 10 ? ` ${memUsed}MB` : ''\n    const timing = Date.now() - start\n    const timingWarning = timing > 50 ? '\u26A0\uFE0F' : timing > 150 ? '\u2622\uFE0F' : ''\n    const timingStr = `${timing}ms${timingWarning}`.padStart(6)\n    console.log(\n      `${getPrefixLogs(\n        options\n      )} ${path}  ${numFound}   \u00B7 ${numOptimized}   \u00B7 ${numFlattened}  ${timingStr} ${\n        memory ? `(${memory})` : ''\n      }`\n    )\n  }\n\n  return {\n    ast,\n    styles,\n    js: result.code,\n    map: result.map,\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/extractor/createEvaluator.js

@@ -4,6 +4,7 @@ import vm from "vm";
 import generate from "@babel/generator";
 import * as t from "@babel/types";
 import { createCSSVariable } from "@tamagui/core-node";
+import esbuild from "esbuild";
 import { FAILED_EVAL } from "../constants";
 import { evaluateAstNode } from "./evaluateAstNode";
 import { isValidThemeHook } from "./extractHelpers";
@@ -27,7 +28,11 @@ function createEvaluator({
       return staticNamespace[n.name];
     }
     const evalContext = vm.createContext(staticNamespace);
-    const code = `(${generate(n).code})`;
+    const codeWithTypescriptAnnotations = `(${generate(n).code})`;
+    const code = esbuild.transformSync(codeWithTypescriptAnnotations, { loader: "tsx" }).code.replace(/;\n$/, "");
+    if (shouldPrintDebug) {
+      console.log("evaluating", code);
+    }
     return vm.runInContext(code, evalContext);
   }, "evalFn");
   return (n) => {

package/dist/jsx/extractor/createExtractor.js

@@ -4,6 +4,7 @@ import { relative } from "path";
 import traverse from "@babel/traverse";
 import * as t from "@babel/types";
 import {
+  expandStyles,
   getSplitStyles,
   mediaQueryConfig,
   normalizeStyleObject,
@@ -342,7 +343,7 @@ function createExtractor() {
                 let keys = [name];
                 let out = null;
                 if (staticConfig.propMapper) {
-                  out = staticConfig.propMapper(name, styleValue, defaultTheme, staticConfig.defaultProps, { resolveVariablesAs: "auto" });
+                  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);
@@ -371,7 +372,7 @@ function createExtractor() {
                       attr: path.node
                     };
                   }
-                  if (validHTMLAttributes[key]) {
+                  if (validHTMLAttributes[key] || key.startsWith("aria-") || key.startsWith("data-")) {
                     return attr;
                   }
                   if (shouldPrintDebug) {
@@ -780,6 +781,7 @@ function createExtractor() {
                   console.log("Error extracting attribute", err.message, err.stack);
                   console.log("node", path.node);
                 }
+                inlined.set(`${Math.random()}`, "spread");
                 return {
                   type: "attr",
                   value: path.node
@@ -994,35 +996,47 @@ function createExtractor() {
               press: false,
               pressIn: false
             };
-            const completeStaticProps = Object.keys(attrs).reduce((acc, index) => {
-              const cur = attrs[index];
+            let foundStaticProps = {};
+            for (const key in attrs) {
+              const cur = attrs[key];
               if (cur.type === "style") {
                 normalizeStyleObject(cur.value);
-                Object.assign(acc, cur.value);
+                foundStaticProps = {
+                  ...foundStaticProps,
+                  ...expandStyles(cur.value)
+                };
+                continue;
               }
               if (cur.type === "attr") {
                 if (t.isJSXSpreadAttribute(cur.value)) {
-                  return acc;
+                  continue;
                 }
                 if (!t.isJSXIdentifier(cur.value.name)) {
-                  return acc;
+                  continue;
                 }
-                const key = cur.value.name.name;
+                const key2 = cur.value.name.name;
                 const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true));
-                if (value === FAILED_EVAL) {
-                  return acc;
+                if (value !== FAILED_EVAL) {
+                  foundStaticProps = {
+                    ...foundStaticProps,
+                    [key2]: value
+                  };
                 }
-                acc[key] = value;
               }
-              return acc;
-            }, {});
-            const completeProps = {
-              ...staticConfig.defaultProps,
-              ...completeStaticProps
-            };
+            }
+            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)));
+              console.log("  - foundStaticProps: \n", logLines(objToStr(foundStaticProps)));
               console.log("  - completeProps: \n", logLines(objToStr(completeProps)));
             }
             const getStyles = /* @__PURE__ */ __name((props2, debugName = "") => {
@@ -1044,7 +1058,7 @@ function createExtractor() {
                 const out = getSplitStyles(props2, staticConfig, defaultTheme, {
                   ...state,
                   fallbackProps: completeProps
-                });
+                }, void 0, props2["debug"]);
                 const outStyle = {
                   ...out.style,
                   ...out.pseudos
@@ -1068,7 +1082,7 @@ function createExtractor() {
             if (!completeStyles) {
               throw new Error(`Impossible, no styles`);
             }
-            const addInitialStyleKeys = shouldFlatten ? difference(Object.keys(completeStyles), Object.keys(completeStaticProps)) : [];
+            const addInitialStyleKeys = shouldFlatten ? difference(Object.keys(completeStyles), Object.keys(foundStaticProps)) : [];
             if (addInitialStyleKeys.length) {
               const toAdd = pick(completeStyles, ...addInitialStyleKeys);
               const firstGroup = attrs.find((x) => x.type === "style");
@@ -1084,14 +1098,11 @@ function createExtractor() {
             }
             if (shouldPrintDebug) {
               console.log("   -- addInitialStyleKeys", addInitialStyleKeys.join(", "), { shouldFlatten });
-              console.log("   -- completeStaticProps:\n", logLines(objToStr(completeStaticProps)));
               console.log("   -- completeStyles:\n", logLines(objToStr(completeStyles)));
             }
             let getStyleError = null;
             for (const attr of attrs) {
               try {
-                if (shouldPrintDebug)
-                  console.log("  *", attrStr(attr));
                 switch (attr.type) {
                   case "ternary":
                     const a = getStyles(attr.value.alternate, "ternary.alternate");
@@ -1105,7 +1116,7 @@ function createExtractor() {
                     continue;
                   case "style":
                     if (shouldPrintDebug)
-                      console.log("  * styles in", logLines(objToStr(attr.value)));
+                      console.log("  * styles in", attr.value);
                     const styles = getStyles(attr.value, "style");
                     if (shouldPrintDebug)
                       console.log("  * styles out", logLines(objToStr(styles)));
@@ -1118,6 +1129,9 @@ function createExtractor() {
                 getStyleError = err;
               }
             }
+            if (shouldPrintDebug) {
+              console.log("  - attrs (ternaries/combined):\n", logLines(attrs.map(attrStr).join(", ")));
+            }
             tm.mark("jsx-element-styles", shouldPrintDebug === "verbose");
             if (getStyleError) {
               console.log(" \u26A0\uFE0F postprocessing error, deopt", getStyleError);

package/dist/jsx/extractor/extractMediaStyle.js

@@ -43,7 +43,7 @@ function extractMediaStyle(ternary, jsxPath, tamaguiConfig, sourcePath, importan
       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} {`);

package/dist/jsx/extractor/extractToClassNames.js

@@ -230,7 +230,7 @@ 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, identifier, value } of finalStyles) {
+      for (const { className, rules } of finalStyles) {
         if (cssMap.has(className)) {
           if (comment) {
             const val = cssMap.get(className);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.1-beta.60",
+  "version": "1.0.1-beta.63",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
@@ -36,11 +36,11 @@
     "@babel/parser": "^7.15.7",
     "@babel/traverse": "^7.15.4",
     "@expo/match-media": "^0.3.0",
-    "@tamagui/build": "^1.0.1-beta.60",
-    "@tamagui/core-node": "^1.0.1-beta.60",
-    "@tamagui/fake-react-native": "^1.0.1-beta.60",
-    "@tamagui/helpers": "^1.0.1-beta.60",
-    "@tamagui/proxy-worm": "^1.0.1-beta.60",
+    "@tamagui/build": "^1.0.1-beta.63",
+    "@tamagui/core-node": "^1.0.1-beta.63",
+    "@tamagui/fake-react-native": "^1.0.1-beta.63",
+    "@tamagui/helpers": "^1.0.1-beta.63",
+    "@tamagui/proxy-worm": "^1.0.1-beta.63",
     "babel-literal-to-ast": "^2.1.0",
     "esbuild": "^0.14.36",
     "esbuild-register": "^3.3.2",
@@ -48,7 +48,7 @@
     "fs-extra": "^9.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
-    "tamagui": "^1.0.1-beta.60"
+    "tamagui": "^1.0.1-beta.63"
   },
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.14.5",

package/src/extractor/createEvaluator.ts

@@ -5,6 +5,7 @@ import { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
 import type { TamaguiConfig } from '@tamagui/core'
 import { createCSSVariable } from '@tamagui/core-node'
+import esbuild from 'esbuild'
 
 import { FAILED_EVAL } from '../constants'
 import { evaluateAstNode } from './evaluateAstNode'
@@ -46,10 +47,14 @@ export function createEvaluator({
       return staticNamespace[n.name]
     }
     const evalContext = vm.createContext(staticNamespace)
-    const code = `(${generate(n as any).code})`
-    // if (shouldPrintDebug) {
-    //   console.log('evaluating', { n, code, evalContext })
-    // }
+    const codeWithTypescriptAnnotations = `(${generate(n as any).code})`
+    const code = esbuild
+      .transformSync(codeWithTypescriptAnnotations, { loader: 'tsx' })
+      .code.replace(/;\n$/, '')
+
+    if (shouldPrintDebug) {
+      console.log('evaluating', code)
+    }
     return vm.runInContext(code, evalContext)
   }
 

package/src/extractor/createExtractor.ts

@@ -6,6 +6,7 @@ import {
   PseudoStyles,
   StaticConfigParsed,
   TamaguiInternalConfig,
+  expandStyles,
   getSplitStyles,
   mediaQueryConfig,
   normalizeStyleObject,
@@ -538,6 +539,8 @@ export function createExtractor() {
                     console.log('Error extracting attribute', err.message, err.stack)
                     console.log('node', path.node)
                   }
+                  // dont flatten if we run into error
+                  inlined.set(`${Math.random()}`, 'spread')
                   return {
                     type: 'attr',
                     value: path.node,
@@ -735,7 +738,9 @@ export function createExtractor() {
                     styleValue,
                     defaultTheme,
                     staticConfig.defaultProps,
-                    { resolveVariablesAs: 'auto' }
+                    { resolveVariablesAs: 'auto' },
+                    undefined,
+                    shouldPrintDebug
                   )
                   if (out) {
                     if (!Array.isArray(out)) {
@@ -769,7 +774,11 @@ export function createExtractor() {
                       attr: path.node,
                     } as const
                   }
-                  if (validHTMLAttributes[key]) {
+                  if (
+                    validHTMLAttributes[key] ||
+                    key.startsWith('aria-') ||
+                    key.startsWith('data-')
+                  ) {
                     return attr
                   }
                   if (shouldPrintDebug) {
@@ -1404,38 +1413,52 @@ export function createExtractor() {
             }
 
             // evaluates all static attributes into a simple object
-            const completeStaticProps = Object.keys(attrs).reduce((acc, index) => {
-              const cur = attrs[index] as ExtractedAttr
+            let foundStaticProps = {}
+            for (const key in attrs) {
+              const cur = attrs[key]
               if (cur.type === 'style') {
                 normalizeStyleObject(cur.value)
-                Object.assign(acc, cur.value)
+                foundStaticProps = {
+                  ...foundStaticProps,
+                  ...expandStyles(cur.value),
+                }
+                continue
               }
               if (cur.type === 'attr') {
                 if (t.isJSXSpreadAttribute(cur.value)) {
-                  return acc
+                  continue
                 }
                 if (!t.isJSXIdentifier(cur.value.name)) {
-                  return acc
+                  continue
                 }
                 const key = cur.value.name.name
                 // undefined = boolean true
                 const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true))
-                if (value === FAILED_EVAL) {
-                  return acc
+                if (value !== FAILED_EVAL) {
+                  foundStaticProps = {
+                    ...foundStaticProps,
+                    [key]: value,
+                  }
                 }
-                acc[key] = value
               }
-              return acc
-            }, {})
+            }
 
-            const completeProps = {
-              ...staticConfig.defaultProps,
-              ...completeStaticProps,
+            // must preserve exact order
+            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 🔀): \n', logLines(attrs.map(attrStr).join(', ')))
               console.log('  - defaultProps: \n', logLines(objToStr(staticConfig.defaultProps)))
+              // prettier-ignore
+              console.log('  - foundStaticProps: \n', logLines(objToStr(foundStaticProps)))
               console.log('  - completeProps: \n', logLines(objToStr(completeProps)))
             }
 
@@ -1454,10 +1477,17 @@ export function createExtractor() {
                 }
               }
               try {
-                const out = getSplitStyles(props, staticConfig, defaultTheme, {
-                  ...state,
-                  fallbackProps: completeProps,
-                })
+                const out = getSplitStyles(
+                  props,
+                  staticConfig,
+                  defaultTheme,
+                  {
+                    ...state,
+                    fallbackProps: completeProps,
+                  },
+                  undefined,
+                  props['debug']
+                )
                 const outStyle = {
                   ...out.style,
                   ...out.pseudos,
@@ -1503,7 +1533,7 @@ export function createExtractor() {
 
             // any extra styles added in postprocess should be added to first group as they wont be overriden
             const addInitialStyleKeys = shouldFlatten
-              ? difference(Object.keys(completeStyles), Object.keys(completeStaticProps))
+              ? difference(Object.keys(completeStyles), Object.keys(foundStaticProps))
               : []
 
             if (addInitialStyleKeys.length) {
@@ -1525,8 +1555,6 @@ export function createExtractor() {
               // prettier-ignore
               console.log('   -- addInitialStyleKeys', addInitialStyleKeys.join(', '), { shouldFlatten })
               // prettier-ignore
-              console.log('   -- completeStaticProps:\n', logLines(objToStr(completeStaticProps)))
-              // prettier-ignore
               console.log('   -- completeStyles:\n', logLines(objToStr(completeStyles)))
             }
 
@@ -1535,7 +1563,6 @@ export function createExtractor() {
             // fix up ternaries, combine final style values
             for (const attr of attrs) {
               try {
-                if (shouldPrintDebug) console.log('  *', attrStr(attr))
                 switch (attr.type) {
                   case 'ternary':
                     const a = getStyles(attr.value.alternate, 'ternary.alternate')
@@ -1545,8 +1572,7 @@ export function createExtractor() {
                     if (shouldPrintDebug) console.log('     => tern ', attrStr(attr))
                     continue
                   case 'style':
-                    // prettier-ignore
-                    if (shouldPrintDebug) console.log('  * styles in', logLines(objToStr(attr.value)))
+                    if (shouldPrintDebug) console.log('  * styles in', attr.value)
                     // expand variants and such
                     // get the keys we need
                     const styles = getStyles(attr.value, 'style')
@@ -1567,6 +1593,11 @@ export function createExtractor() {
               }
             }
 
+            if (shouldPrintDebug) {
+              // prettier-ignore
+              console.log('  - attrs (ternaries/combined):\n', logLines(attrs.map(attrStr).join(', ')))
+            }
+
             tm.mark('jsx-element-styles', shouldPrintDebug === 'verbose')
 
             if (getStyleError) {

package/src/extractor/extractMediaStyle.ts

@@ -60,7 +60,9 @@ export function extractMediaStyle(
       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(';')
       // combines media queries if they already exist
       let styleRule = ''
       if (styleInner.includes('@media')) {

package/src/extractor/extractToClassNames.ts

@@ -189,17 +189,6 @@ export function extractToClassNames({
                   t.jsxAttribute(t.jsxIdentifier(style.property), t.stringLiteral(style.identifier))
                 )
               }
-
-              // for (const key in attr.value) {
-              //   if (pseudos.some((x) => x[0] === key)) {
-              //     // we handled pseudos above...
-              //     continue
-              //   }
-              //   // leave them as attributes
-              //   finalAttrs.push(
-              //     t.jsxAttribute(t.jsxIdentifier(key), t.stringLiteral(attr.value[key]))
-              //   )
-              // }
             } else {
               const styles = addStyles(attr.value)
               const newClassNames = concatClassName(styles.map((x) => x.identifier).join(' '))
@@ -207,11 +196,6 @@ export function extractToClassNames({
                 (x) => x.type == 'StringLiteral'
               ) as t.StringLiteral | null
 
-              // const newClassNames = concatClassName(Object.values(attr.value))
-              // const existing = finalClassNames.find(
-              //   (x) => x.type == 'StringLiteral'
-              // ) as t.StringLiteral | null
-
               if (existing) {
                 existing.value = `${existing.value} ${newClassNames}`
               } else {
@@ -342,20 +326,7 @@ export function extractToClassNames({
 
       const comment = util.format('/* %s:%s (%s) */', filePath, lineNumbers, originalNodeName)
 
-      for (const { className, rules, identifier, value } of finalStyles) {
-        // console.log('backvalue', identifier, value)
-        // ast.program.body.unshift(
-        //   t.expressionStatement(
-        //     t.callExpression(
-        //       t.memberExpression(
-        //         t.callExpression(t.identifier('require'), [t.stringLiteral('@tamagui/core')]),
-        //         t.identifier('setIdentifierValue')
-        //       ),
-        //       [t.stringLiteral(identifier), t.stringLiteral(value)]
-        //     )
-        //   )
-        // )
-
+      for (const { className, rules } of finalStyles) {
         if (cssMap.has(className)) {
           if (comment) {
             const val = cssMap.get(className)!

package/types/extractor/createEvaluator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createEvaluator.d.ts","sourceRoot":"","sources":["../../src/extractor/createEvaluator.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAOlD,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,eAAe,EACf,UAAU,EACV,YAAY,EACZ,gBAAgB,GACjB,EAAE;IACD,aAAa,EAAE,aAAa,CAAA;IAC5B,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IACpC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;CACtC,OA+BY,MAAM,SAGlB;AAED,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,KAAK,GAAG,OACtD,MAAM,SAOlB"}
+{"version":3,"file":"createEvaluator.d.ts","sourceRoot":"","sources":["../../src/extractor/createEvaluator.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAQlD,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,eAAe,EACf,UAAU,EACV,YAAY,EACZ,gBAAgB,GACjB,EAAE;IACD,aAAa,EAAE,aAAa,CAAA;IAC5B,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IACpC,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;CACtC,OAmCY,MAAM,SAGlB;AAED,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,KAAK,GAAG,OACtD,MAAM,SAOlB"}

package/types/extractor/createExtractor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAEA,OAAiB,EAAE,QAAQ,EAAW,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAGL,qBAAqB,EAQtB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAIL,mBAAmB,EAEpB,MAAM,UAAU,CAAA;AAqCjB,oBAAY,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAI1D,wBAAgB,eAAe;;;;;;;;;;;;;;wBAqBb,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,0PAkBrC,mBAAmB;;;;;;EAqjD3B"}
+{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAEA,OAAiB,EAAE,QAAQ,EAAW,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAGL,qBAAqB,EAStB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAIL,mBAAmB,EAEpB,MAAM,UAAU,CAAA;AAqCjB,oBAAY,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAI1D,wBAAgB,eAAe;;;;;;;;;;;;;;wBAqBb,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,0PAkBrC,mBAAmB;;;;;;EAmlD3B"}

package/types/extractor/extractMediaStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extractMediaStyle.d.ts","sourceRoot":"","sources":["../../src/extractor/extractMediaStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAAE,qBAAqB,EAAwC,MAAM,oBAAoB,CAAA;AAIhG,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAG/C,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/B,aAAa,EAAE,qBAAqB,EACpC,UAAU,EAAE,MAAM,EAClB,UAAU,SAAI,EACd,gBAAgB,GAAE,OAAO,GAAG,SAAiB;;;SAyE9C;AAiFD,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/B,IAAI,EAAE,CAAC,CAAC,UAAU,EAClB,UAAU,EAAE,MAAM,WAiBnB"}
+{"version":3,"file":"extractMediaStyle.d.ts","sourceRoot":"","sources":["../../src/extractor/extractMediaStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAAE,qBAAqB,EAAwC,MAAM,oBAAoB,CAAA;AAIhG,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAG/C,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/B,aAAa,EAAE,qBAAqB,EACpC,UAAU,EAAE,MAAM,EAClB,UAAU,SAAI,EACd,gBAAgB,GAAE,OAAO,GAAG,SAAiB;;;SA2E9C;AAiFD,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/B,IAAI,EAAE,CAAC,CAAC,UAAU,EAClB,UAAU,EAAE,MAAM,WAiBnB"}

package/types/extractor/extractToClassNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extractToClassNames.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToClassNames.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAKjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGvC,OAAO,EAAgC,cAAc,EAAW,MAAM,UAAU,CAAA;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAiB7C,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAA;IACX,GAAG,EAAE,GAAG,CAAA;CACT,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;IAC1B,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,cAAc,CAAA;IACvB,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,iBAAiB,GAAG,IAAI,CAyY3B"}
+{"version":3,"file":"extractToClassNames.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToClassNames.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAKjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGvC,OAAO,EAAgC,cAAc,EAAW,MAAM,UAAU,CAAA;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAiB7C,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAA;IACX,GAAG,EAAE,GAAG,CAAA;CACT,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;IAC1B,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,cAAc,CAAA;IACvB,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,iBAAiB,GAAG,IAAI,CA4W3B"}