Macro transformers for different emotion packages and babel-plugin-macros integration, providing compile-time optimizations for various emotion APIs.
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;
}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;
`;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;
`;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;
`;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;
}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;
}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;
}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;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;`;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;
}