or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.mdmacros.mdtransformation.md
tile.json

macros.mddocs/

Macro System

Macro transformers for different emotion packages and babel-plugin-macros integration, providing compile-time optimizations for various emotion APIs.

Capabilities

Macro Collection

Collection of pre-configured macro transformers for different emotion packages.

/**
 * Collection of macro transformers for different emotion packages
 */
const macros: EmotionMacros;

interface EmotionMacros {
  /** Core macro for @emotion/react */
  core: MacroFunction;
  /** Styled macro for @emotion/native */
  nativeStyled: MacroFunction;
  /** Styled macro for @emotion/primitives */
  primitivesStyled: MacroFunction;
  /** Styled macro for @emotion/styled */
  webStyled: MacroFunction;
  /** Macro for @emotion/css */
  vanillaEmotion: MacroFunction;
}

Emotion React Macro

Core macro transformer for @emotion/react package transformations.

/**
 * Core macro transformer for @emotion/react
 * @param params - Macro transformation parameters
 */
function coreMacro(params: MacroParams): void;

/**
 * Transformers for @emotion/react exports
 */
const coreTransformers: TransformerCollection;

Usage Example:

// With babel-plugin-macros
import { jsx, css, Global, keyframes } from '@emotion/react/macro';

const styles = css`
  color: blue;
  font-size: 16px;
`;

Styled Component Macros

Macro transformers for styled component packages with platform-specific optimizations.

/**
 * Creates macro transformer for styled components
 * @param options - Styled macro configuration
 * @returns Configured styled macro function
 */
function createStyledMacro(options: StyledMacroOptions): MacroFunction;

interface StyledMacroOptions {
  /** Import source for the styled package */
  importSource: string;
  /** Original import source before transformation */
  originalImportSource: string;
  /** Whether this is for web platform */
  isWeb: boolean;
}

/**
 * Styled component transformer function
 * @param params - Transformer parameters including options for styled components
 */
const styledTransformer: (params: StyledTransformerParams) => void;

interface StyledTransformerParams extends TransformerParams {
  options: {
    styledBaseImport?: [string, string];
    isWeb: boolean;
  };
}

Pre-configured styled macros:

/** Web styled macro for @emotion/styled */
const webStyledMacro: MacroFunction;

/** Native styled macro for @emotion/native */
const nativeStyledMacro: MacroFunction;

/** Primitives styled macro for @emotion/primitives */
const primitivesStyledMacro: MacroFunction;

Usage Example:

// With babel-plugin-macros
import styled from '@emotion/styled/macro';

const Button = styled.button`
  padding: 10px;
  background: blue;
`;

Vanilla Emotion Macro

Macro transformer for @emotion/css package (vanilla emotion).

/**
 * Creates macro transformer for vanilla emotion
 * @param importSource - Source package for vanilla emotion
 * @returns Configured vanilla emotion macro
 */
function createEmotionMacro(importSource: string): MacroFunction;

/** Pre-configured vanilla emotion macro */
const vanillaEmotionMacro: MacroFunction;

/**
 * Transformers for @emotion/css exports
 */
const vanillaTransformers: TransformerCollection;

Usage Example:

// With babel-plugin-macros
import { css, keyframes, injectGlobal, flush, hydrate } from '@emotion/css/macro';

const styles = css`
  color: red;
  animation: ${keyframes`
    from { opacity: 0; }
    to { opacity: 1; }
  `} 1s ease-in-out;
`;

Transformer Macro Creation

Generic utility for creating custom transformer macros.

/**
 * Creates a transformer macro from a collection of transformers
 * @param transformers - Collection of transformation functions
 * @param options - Macro creation options
 * @returns Configured transformer macro function
 */
function createTransformerMacro(
  transformers: TransformerCollection,
  options: TransformerMacroOptions
): MacroFunction;

interface TransformerMacroOptions {
  /** Import source for the macro */
  importSource: string;
}

interface TransformerCollection {
  [exportName: string]: [TransformerFunction, TransformerOptions?] | TransformerFunction;
}

type TransformerFunction = (params: TransformerParams) => void;

interface TransformerParams {
  state: any;
  babel: any;
  importSource: string;
  reference: any;
  importSpecifierName: string;
}

Macro Function Interface

Common interface for all macro transformation functions.

/**
 * Standard macro function interface
 * @param params - Macro parameters from babel-plugin-macros
 */
type MacroFunction = (params: MacroParams) => void;

interface MacroParams {
  /** AST path to the import declaration */
  path: any;
  /** Reference paths by import name */
  references: { [importName: string]: any[] };
  /** Babel plugin state */
  state: any;
  /** Babel instance */
  babel: any;
  /** Whether this is an emotion call */
  isEmotionCall: boolean;
  /** Whether this is a babel-plugin-macros call */
  isBabelMacrosCall: boolean;
}

Transformer Sources

Mapping of emotion packages to their transformer collections.

/**
 * Mapping of emotion packages to their transformer collections
 */
const transformersSource: TransformersSourceMap;

interface TransformersSourceMap {
  '@emotion/css': TransformerCollection;
  '@emotion/react': TransformerCollection;
  '@emotion/styled': TransformerCollection;
  '@emotion/primitives': TransformerCollection;
  '@emotion/native': TransformerCollection;
}

Emotion Transformer Functions

Specific transformer functions for emotion expressions.

/**
 * Creates emotion transformer with purity annotation
 * @param isPure - Whether to add /*#__PURE__*/ comments
 * @returns Configured emotion transformer
 */
function createEmotionTransformer(isPure: boolean): TransformerFunction;

/**
 * Checks if a path is already transpiled to avoid double-transformation
 * @param path - AST path to check
 * @returns True if already transpiled
 */
function isAlreadyTranspiled(path: any): boolean;

/**
 * Get referenced specifier from import path
 * @param path - Import declaration path
 * @param specifierName - Name of specifier to find
 * @returns Referenced specifier path or undefined
 */
function getReferencedSpecifier(path: any, specifierName: string): any;

Babel Plugin Macros Integration

When using with babel-plugin-macros, the plugin provides these macro imports:

@emotion/css/macro:

  • css, keyframes, injectGlobal, flush, hydrate

@emotion/react/macro:

  • jsx, css, Global, keyframes

@emotion/styled/macro:

  • default (styled)

Usage Example:

// .babelrc with babel-plugin-macros
{
  "plugins": ["macros"]
}

// In your code
import { css } from '@emotion/css/macro';
import styled from '@emotion/styled/macro';

const styles = css`color: blue;`;
const Button = styled.button`padding: 10px;`;

Types

interface TransformerOptions {
  styledBaseImport?: [string, string];
  isWeb?: boolean;
  cssExport?: string;
  [key: string]: any;
}

interface StyledMacroOptions {
  importSource: string;
  originalImportSource: string;
  isWeb: boolean;
}

interface StyledTransformerParams extends TransformerParams {
  options: {
    styledBaseImport?: [string, string];
    isWeb: boolean;
  };
}

interface TransformerMacroOptions {
  importSource: string;
}