Macro System

/**
 * Pre-configured macros for different emotion packages
 */
const macros: {
  /** Core emotion/react macro for css and jsx transformations */
  core: TransformerMacro;
  /** React Native styled component macro */
  nativeStyled: TransformerMacro;
  /** Primitives styled component macro */
  primitivesStyled: TransformerMacro;
  /** Web styled component macro */
  webStyled: TransformerMacro;
  /** Vanilla emotion/css macro */
  vanillaEmotion: TransformerMacro;
};

interface TransformerMacro {
  (options: MacroOptions): void;
}

interface MacroOptions {
  path: any;
  references: { [importName: string]: any[] };
  state: any;
  babel: any;
  isEmotionCall?: boolean;
  isBabelMacrosCall?: boolean;
}

import { macros } from "@emotion/babel-plugin";

// Access specific macros
const coreMacro = macros.core;
const styledMacro = macros.webStyled;

/**
 * Core emotion/react macro for css and jsx transformations
 */
const core: TransformerMacro;

import { css, Global } from '@emotion/react';

const styles = css`
  color: blue;
`;

const globalStyles = <Global styles={css`
  body { margin: 0; }
`} />;

const styles = /*#__PURE__*/ css('color:blue;');

const globalStyles = <Global styles={/*#__PURE__*/ css('body{margin:0;}')} />;

/**
 * Web styled component macro for @emotion/styled
 */
const webStyled: TransformerMacro;

/**
 * React Native styled component macro for @emotion/native
 */
const nativeStyled: TransformerMacro;

/**
 * Primitives styled component macro for @emotion/primitives
 */
const primitivesStyled: TransformerMacro;

import styled from '@emotion/styled';

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

const Button = /*#__PURE__*/ styled('button', {
  label: 'Button'
})({
  padding: '10px',
  background: 'blue'
});

/**
 * Vanilla emotion/css macro for CSS-in-JS without React
 */
const vanillaEmotion: TransformerMacro;

import { css, keyframes } from '@emotion/css';

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const styles = css`
  animation: ${fadeIn} 1s ease-in;
`;

const fadeIn = /*#__PURE__*/ keyframes('from{opacity:0;}to{opacity:1;}');

const styles = /*#__PURE__*/ css('animation:', fadeIn, ' 1s ease-in;');

/**
 * Creates a custom transformer macro
 * @param {Object} transformers - Transformer functions by export name
 * @param {Object} options - Macro configuration options
 * @returns {TransformerMacro} Custom transformer macro
 */
function createTransformerMacro(
  transformers: { [exportName: string]: [Function, Object] },
  options: { importSource: string }
): TransformerMacro;

import { createTransformerMacro } from '@emotion/babel-plugin/utils';

const customMacro = createTransformerMacro({
  myStyled: [styledTransformer, { isWeb: true }],
  myCss: [cssTransformer, { minify: true }]
}, {
  importSource: 'my-custom-emotion-package'
});

// Macro imports for babel-plugin-macros compatibility
import { css, keyframes, injectGlobal } from '@emotion/css/macro';
import { jsx, css, Global, keyframes } from '@emotion/react/macro';
import styled from '@emotion/styled/macro';

/**
 * Processes macro imports and applies transformations
 * @param {BabelPath} path - Import declaration path
 * @param {EmotionBabelPluginPass} state - Plugin state
 */
function processMacroImport(path: BabelPath, state: EmotionBabelPluginPass): void;

interface MacroReferences {
  [importName: string]: BabelPath[];
}

/**
 * Processes references to macro imports
 * @param {MacroReferences} references - References by import name
 * @param {MacroOptions} options - Macro processing options
 */
function processReferences(
  references: MacroReferences,
  options: MacroOptions
): void;

/**
 * Transforms CSS call expressions and template literals with labeling and source maps
 * @param {Object} options - Transformation options
 * @param {Object} options.state - Babel plugin state
 * @param {Object} options.babel - Babel instance
 * @param {Object} options.path - Babel path to CSS expression
 * @param {string} options.sourceMap - Optional source map string
 * @param {boolean} options.annotateAsPure - Whether to add /*#__PURE__*/ annotation (default: true)
 */
function transformCssCallExpression({ state, babel, path, sourceMap, annotateAsPure });

/**
 * Transforms CSS array expressions in JSX css prop
 * Converts array syntax to css() call with proper arguments
 * @param {Object} options - Transformation options
 * @param {Object} options.state - Babel plugin state
 * @param {Object} options.babel - Babel instance
 * @param {Object} options.path - Babel path to array expression
 */
function transformCsslessArrayExpression({ state, babel, path });

/**
 * Transforms CSS object expressions in JSX css prop
 * Converts object syntax to css() call with proper arguments
 * @param {Object} options - Transformation options
 * @param {Object} options.state - Babel plugin state
 * @param {Object} options.babel - Babel instance
 * @param {Object} options.path - Babel path to object expression
 * @param {Object} options.cssImport - CSS import information with importSource and cssExport
 */
function transformCsslessObjectExpression({ state, babel, path, cssImport });

/**
 * Transforms styled component calls
 */
function styledTransformer(path: BabelPath, state: any, options: any): void;

/**
 * Transforms keyframes animations
 */
function transformKeyframes(path: BabelPath, state: any): void;

/**
 * Transforms Global component styles
 */
function transformGlobal(path: BabelPath, state: any): void;

interface TransformerConfig {
  [packageName: string]: {
    [exportName: string]: [TransformerFunction, TransformerOptions];
  };
}

interface TransformerOptions {
  isWeb?: boolean;
  styledBaseImport?: [string, string];
  cssExport?: string;
  minify?: boolean;
  pure?: boolean;
}

const transformersSource = {
  '@emotion/css': vanillaTransformers,
  '@emotion/react': coreTransformers,
  '@emotion/styled': {
    default: [styledTransformer, { styledBaseImport: ['@emotion/styled/base', 'default'], isWeb: true }]
  },
  '@emotion/primitives': {
    default: [styledTransformer, { isWeb: false }]
  },
  '@emotion/native': {
    default: [styledTransformer, { isWeb: false }]
  }
};