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

package/src/extractor/extractMediaStyle.ts

@@ -1,13 +1,14 @@
 import { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
 import { TamaguiInternalConfig, getStylesAtomic, mediaObjectToString } from '@tamagui/core-node'
-import { ViewStyle } from 'react-native'
+import type { ViewStyle } from 'react-native'
 
 import { MEDIA_SEP } from '../constants.js'
-import type { StyleObject, Ternary } from '../types.js'
-import { isInsideTamagui, isPresent } from './extractHelpers.js'
+import type { StyleObject, TamaguiOptionsWithFileInfo, Ternary } from '../types.js'
+import { isPresent, isValidImport } from './extractHelpers.js'
 
 export function extractMediaStyle(
+  props: TamaguiOptionsWithFileInfo,
   ternary: Ternary,
   jsxPath: NodePath<t.JSXElement>,
   tamaguiConfig: TamaguiInternalConfig,
@@ -15,13 +16,14 @@ export function extractMediaStyle(
   importance = 0,
   shouldPrintDebug: boolean | 'verbose' = false
 ) {
-  const mt = getMediaQueryTernary(ternary, jsxPath, sourcePath)
+  const mt = getMediaQueryTernary(props, ternary, jsxPath, sourcePath)
   if (!mt) {
     return null
   }
   const { key } = mt
   const mq = tamaguiConfig.media[key]
   if (!mq) {
+    // eslint-disable-next-line no-console
     console.error(`Media query "${key}" not found: ${Object.keys(tamaguiConfig.media)}`)
     return null
   }
@@ -33,6 +35,7 @@ export function extractMediaStyle(
     getStyleObj(ternary.alternate, true),
   ].filter(isPresent)
   if (shouldPrintDebug && !styleOpts.length) {
+    // eslint-disable-next-line no-console
     console.log('  media query, no styles?')
     return null
   }
@@ -80,6 +83,7 @@ export function extractMediaStyle(
     })
     if (shouldPrintDebug === 'verbose') {
       // prettier-ignore
+      // eslint-disable-next-line no-console
       console.log('  media styles:', importance, styleObj, singleMediaStyles.map(x => x.identifier).join(', '))
     }
     // add to output
@@ -91,6 +95,7 @@ export function extractMediaStyle(
 }
 
 function getMediaQueryTernary(
+  props: TamaguiOptionsWithFileInfo,
   ternary: Ternary,
   jsxPath: NodePath<t.JSXElement>,
   sourcePath: string
@@ -104,6 +109,7 @@ function getMediaQueryTernary(
   if (t.isLogicalExpression(ternary.test) && ternary.test.operator === '&&') {
     // *should* be normalized to always be on left side
     const mediaLeft = getMediaInfoFromExpression(
+      props,
       ternary.test.left,
       jsxPath,
       sourcePath,
@@ -122,6 +128,7 @@ function getMediaQueryTernary(
   // const media = useMedia()
   // ... media.sm
   const result = getMediaInfoFromExpression(
+    props,
     ternary.test,
     jsxPath,
     sourcePath,
@@ -137,6 +144,7 @@ function getMediaQueryTernary(
 }
 
 function getMediaInfoFromExpression(
+  props: TamaguiOptionsWithFileInfo,
   test: t.Expression,
   jsxPath: NodePath<t.JSXElement>,
   sourcePath: string,
@@ -156,20 +164,21 @@ function getMediaInfoFromExpression(
     if (!binding) return false
     const bindingNode = binding.path?.node
     if (!t.isVariableDeclarator(bindingNode) || !bindingNode.init) return false
-    if (!isValidMediaCall(jsxPath, bindingNode.init, sourcePath)) return false
+    if (!isValidMediaCall(props, jsxPath, bindingNode.init, sourcePath)) return false
     return { key, bindingName: name }
   }
   if (t.isIdentifier(test)) {
     const key = test.name
     const node = jsxPath.scope.getBinding(test.name)?.path?.node
     if (!t.isVariableDeclarator(node)) return false
-    if (!node.init || !isValidMediaCall(jsxPath, node.init, sourcePath)) return false
+    if (!node.init || !isValidMediaCall(props, jsxPath, node.init, sourcePath)) return false
     return { key, bindingName: key }
   }
   return null
 }
 
 export function isValidMediaCall(
+  props: TamaguiOptionsWithFileInfo,
   jsxPath: NodePath<t.JSXElement>,
   init: t.Expression,
   sourcePath: string
@@ -183,10 +192,8 @@ export function isValidMediaCall(
   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
-    }
+  if (!isValidImport(props, sourcePath)) {
+    return false
   }
   return true
 }

package/src/extractor/extractToClassNames.ts

@@ -7,9 +7,8 @@ import * as t from '@babel/types'
 import { getStylesAtomic } from '@tamagui/core-node'
 import { concatClassName } from '@tamagui/helpers'
 import invariant from 'invariant'
-import { ViewStyle } from 'react-native'
+import type { ViewStyle } from 'react-native'
 
-import { CONCAT_CLASSNAME_IMPORT } from '../constants.js'
 import type { ClassNameObject, StyleObject, TamaguiOptions, Ternary } from '../types.js'
 import { babelParse } from './babelParse.js'
 import { buildClassName } from './buildClassName.js'
@@ -86,9 +85,9 @@ export async function extractToClassNames({
   let hasFlattened = false
 
   const res = await extractor.parse(ast, {
-    sourcePath,
     shouldPrintDebug,
     ...options,
+    sourcePath,
     target: 'html',
     extractStyledDefinitions: true,
     onStyleRule(identifier, rules) {
@@ -224,6 +223,7 @@ export async function extractToClassNames({
           }
           case 'ternary': {
             const mediaExtraction = extractMediaStyle(
+              { ...options, sourcePath },
               attr.value,
               jsxPath,
               extractor.getTamagui()!,
@@ -323,16 +323,7 @@ export async function extractToClassNames({
         })()
 
         // inserts the _cn variable and uses it for className
-        let names = buildClassName(finalClassNames)
-
-        if (names) {
-          if (t.isStringLiteral(names)) {
-            names.value = concatClassName(names.value)
-            names.value = `${extraClassNames} ${names.value}`
-          } else {
-            names = t.binaryExpression('+', t.stringLiteral(extraClassNames), names)
-          }
-        }
+        const names = buildClassName(finalClassNames, extraClassNames)
 
         const nameExpr = names ? hoistClassNames(jsxPath, existingHoists, names) : null
         let expr = nameExpr
@@ -346,7 +337,7 @@ export async function extractToClassNames({
             const simpleSpreads = attrs.filter(
               (x) => t.isJSXSpreadAttribute(x.value) && isSimpleSpread(x.value)
             )
-            expr = t.callExpression(t.identifier(CONCAT_CLASSNAME_IMPORT), [
+            expr = t.callExpression(t.identifier('concatClassName'), [
               expr,
               ...simpleSpreads.map((val) => val.value['argument']),
             ])
@@ -369,13 +360,8 @@ export async function extractToClassNames({
             cssMap.set(className, val)
           }
         } else if (rules.length) {
-          if (rules.length > 1) {
-            // eslint-disable-next-line no-console
-            console.log('  rules error', { rules })
-            throw new Error(`Shouldn't have more than one rule`)
-          }
           cssMap.set(className, {
-            css: rules[0],
+            css: rules.join('\n'),
             commentTexts: [comment],
           })
         }

package/src/extractor/getStaticBindingsForScope.ts

@@ -120,14 +120,14 @@ export async function getStaticBindingsForScope(
           }
         }
       } catch (err: any) {
-        if (process.env.DEBUG?.startsWith('tamagui')) {
-          // eslint-disable-next-line no-console
-          console.log(`Error in partial evaluation`, err.message, err.stack)
-        } else {
+        if (shouldPrintDebug) {
           // eslint-disable-next-line no-console
           console.warn(
             `    | Skipping partial evaluation of constant file: ${moduleName} (DEBUG=tamagui for more)`
           )
+        } else if (process.env.DEBUG?.startsWith('tamagui')) {
+          // eslint-disable-next-line no-console
+          console.log(`Error in partial evaluation`, err.message, err.stack)
         }
       }
     }

package/src/extractor/loadTamagui.ts

@@ -63,7 +63,7 @@ export async function loadTamagui(props: Props): Promise<TamaguiProjectInfo> {
   const external = ['@tamagui/core', '@tamagui/core-node', 'react', 'react-dom']
   const configEntry = props.config ? join(process.cwd(), props.config) : ''
 
-  if (process.env.DEBUG?.startsWith('tamagui')) {
+  if (process.env.NODE_ENV === 'development' && process.env.DEBUG?.startsWith('tamagui')) {
     console.log(`Building config entry`, configEntry)
   }
 
@@ -104,10 +104,6 @@ Tamagui built config and components:`
     }),
   ])
 
-  if (process.env.DEBUG?.startsWith('tamagui')) {
-    console.log(`Built configs`)
-  }
-
   const coreNode = require('@tamagui/core-node')
 
   registerRequire(props.bubbleErrors)
@@ -122,6 +118,10 @@ Tamagui built config and components:`
     ...(includesCore && gatherTamaguiComponentInfo([coreNode])),
   }
 
+  if (process.env.NODE_ENV === 'development' && process.env.DEBUG?.startsWith('tamagui')) {
+    console.log('Loaded components', components)
+  }
+
   cache[key] = {
     components,
     nameToPaths: {},
@@ -254,7 +254,9 @@ export function loadTamaguiSync(props: Props): TamaguiProjectInfo {
         tamaguiConfig = (exp['default'] || exp) as TamaguiInternalConfig
         if (!tamaguiConfig || !tamaguiConfig.parsed) {
           const confPath = require.resolve(configPath)
-          throw new Error(`Can't find valid config in ${confPath}`)
+          throw new Error(`Can't find valid config in ${confPath}:
+          
+  Be sure you "export default" the config.`)
         }
       }
 
@@ -269,7 +271,7 @@ export function loadTamaguiSync(props: Props): TamaguiProjectInfo {
 
       // set up core-node
       if (tamaguiConfig) {
-        createTamagui(tamaguiConfig)
+        createTamagui(tamaguiConfig as any)
       }
 
       cache[key] = {

package/src/types.ts

@@ -62,9 +62,12 @@ export type ExtractTagProps = {
   staticConfig: StaticConfig
 }
 
-export type ExtractorParseProps = TamaguiOptions & {
+export type TamaguiOptionsWithFileInfo = TamaguiOptions & {
+  sourcePath: string
+}
+
+export type ExtractorParseProps = TamaguiOptionsWithFileInfo & {
   target: 'native' | 'html'
-  sourcePath?: string
   shouldPrintDebug?: boolean | 'verbose'
   onExtractTag: (props: ExtractTagProps) => void
   getFlattenedNode?: (props: { isTextView: boolean; tag: string }) => string

package/types/constants.d.ts

@@ -2,6 +2,5 @@ export declare const CSS_FILE_NAME = "__snack.css";
 export declare const MEDIA_SEP = "_";
 export declare const cacheDir: any;
 export declare const FAILED_EVAL: unique symbol;
-export declare const CONCAT_CLASSNAME_IMPORT = "concatClassName";
 export declare const SHOULD_DEBUG: boolean | undefined;
 //# sourceMappingURL=constants.d.ts.map

package/types/extractor/buildClassName.d.ts

@@ -1,4 +1,7 @@
 import * as t from '@babel/types';
 import type { ClassNameObject } from '../types.js';
-export declare function buildClassName(classNameObjects: ClassNameObject[]): t.Expression | t.StringLiteral | null;
+declare type Builder = (objects: ClassNameObject[], extras?: string) => t.Expression | t.StringLiteral | null;
+export declare const buildClassName: Builder;
+export declare const buildClassNameLogic: Builder;
+export {};
 //# sourceMappingURL=buildClassName.d.ts.map

package/types/extractor/createEvaluator.d.ts

@@ -1,8 +1,8 @@
 import { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
-import type { TamaguiConfig } from '@tamagui/core-node';
-export declare function createEvaluator({ tamaguiConfig, staticNamespace, sourcePath, traversePath, shouldPrintDebug, }: {
-    tamaguiConfig: TamaguiConfig;
+import { TamaguiOptionsWithFileInfo } from '../types.js';
+export declare function createEvaluator({ props, staticNamespace, sourcePath, traversePath, shouldPrintDebug, }: {
+    props: TamaguiOptionsWithFileInfo;
     staticNamespace: Record<string, any>;
     sourcePath: string;
     traversePath?: NodePath<t.JSXElement>;

package/types/extractor/createExtractor.d.ts

@@ -16,7 +16,7 @@ export declare function createExtractor({ logger }?: ExtractorOptions): {
         [key: string]: Partial<import("@tamagui/core-node").TamaguiBaseTheme> & {
             [key: string]: import("@tamagui/core-node").VariableVal;
         };
-    }, {}, {
+    }, import("@tamagui/core-node").GenericShorthands, {
         [key: string]: {
             [key: string]: string | number;
         };

package/types/extractor/extractHelpers.d.ts

@@ -1,12 +1,14 @@
 import type { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
-import type { ExtractedAttr, Ternary } from '../types.js';
+import type { ExtractedAttr, TamaguiOptionsWithFileInfo, Ternary } from '../types.js';
 export declare function isPresent<T extends Object>(input: null | void | undefined | T): input is T;
 export declare function isSimpleSpread(node: t.JSXSpreadAttribute): boolean;
 export declare const attrStr: (attr?: ExtractedAttr) => string | t.JSXIdentifier;
 export declare const objToStr: (obj: any, spacer?: string) => any;
 export declare const ternaryStr: (x: Ternary) => string;
 export declare function findComponentName(scope: any): string | undefined;
-export declare function isValidThemeHook(jsxPath: NodePath<t.JSXElement>, n: t.MemberExpression, sourcePath: string): boolean;
-export declare const isInsideTamagui: (srcName: string) => boolean;
+export declare function isValidThemeHook(props: TamaguiOptionsWithFileInfo, jsxPath: NodePath<t.JSXElement>, n: t.MemberExpression, sourcePath: string): boolean;
+export declare const isInsideComponentPackage: (props: TamaguiOptionsWithFileInfo, srcName: string) => boolean;
+export declare const isComponentPackage: (props: TamaguiOptionsWithFileInfo, srcName: string) => boolean;
+export declare const isValidImport: (props: TamaguiOptionsWithFileInfo, srcName: string) => boolean;
 //# sourceMappingURL=extractHelpers.d.ts.map

package/types/extractor/extractMediaStyle.d.ts

@@ -1,10 +1,10 @@
 import { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
 import { TamaguiInternalConfig } from '@tamagui/core-node';
-import type { Ternary } from '../types.js';
-export declare function extractMediaStyle(ternary: Ternary, jsxPath: NodePath<t.JSXElement>, tamaguiConfig: TamaguiInternalConfig, sourcePath: string, importance?: number, shouldPrintDebug?: boolean | 'verbose'): {
+import type { TamaguiOptionsWithFileInfo, Ternary } from '../types.js';
+export declare function extractMediaStyle(props: TamaguiOptionsWithFileInfo, ternary: Ternary, jsxPath: NodePath<t.JSXElement>, tamaguiConfig: TamaguiInternalConfig, sourcePath: string, importance?: number, shouldPrintDebug?: boolean | 'verbose'): {
     mediaStyles: StyleObject[];
     ternaryWithoutMedia: Ternary | null;
 } | null;
-export declare function isValidMediaCall(jsxPath: NodePath<t.JSXElement>, init: t.Expression, sourcePath: string): boolean;
+export declare function isValidMediaCall(props: TamaguiOptionsWithFileInfo, jsxPath: NodePath<t.JSXElement>, init: t.Expression, sourcePath: string): boolean;
 //# sourceMappingURL=extractMediaStyle.d.ts.map

package/types/types.d.ts

@@ -50,9 +50,11 @@ export declare type ExtractTagProps = {
     completeProps: Record<string, any>;
     staticConfig: StaticConfig;
 };
-export declare type ExtractorParseProps = TamaguiOptions & {
+export declare type TamaguiOptionsWithFileInfo = TamaguiOptions & {
+    sourcePath: string;
+};
+export declare type ExtractorParseProps = TamaguiOptionsWithFileInfo & {
     target: 'native' | 'html';
-    sourcePath?: string;
     shouldPrintDebug?: boolean | 'verbose';
     onExtractTag: (props: ExtractTagProps) => void;
     getFlattenedNode?: (props: {