or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

css-processing.md development-features.md import-mapping.md index.md macro-system.md plugin-configuration.md styled-components.md utility-functions.md

tile.json

Styled Components

Styled component transformation, optimization, and platform-specific features.

Capabilities

Styled Component Transformation

Transforms styled component definitions into optimized function calls.

/**
 * Transforms styled component calls with labeling and optimization
 * @param {BabelPath} path - AST path for styled component call
 * @param {Object} state - Plugin state
 * @param {Object} options - Transformation options
 */
function styledTransformer(path, state, options);

Basic Styled Component:

Input:

import styled from '@emotion/styled';

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

Output:

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

Styled Component with Props:

Input:

const Button = styled.button`
  padding: ${props => props.large ? '20px' : '10px'};
  background: ${props => props.primary ? 'blue' : 'gray'};
  ${props => props.disabled && css`
    opacity: 0.5;
    cursor: not-allowed;
  `}
`;

Output:

const Button = /*#__PURE__*/ styled('button', {
  label: 'Button'
})(props => ({
  padding: props.large ? '20px' : '10px',
  background: props.primary ? 'blue' : 'gray',
  ...(props.disabled && {
    opacity: 0.5,
    cursor: 'not-allowed'
  })
}));

Component-as-Selector Support

Enables using emotion styled components as CSS selectors within other styled components.

/**
 * Transforms component-as-selector references
 * Allows styled components to be used as CSS selectors
 */
function transformComponentAsSelector(path, state);

Component-as-Selector Example:

Input:

const BaseButton = styled.button`
  padding: 10px;
  background: gray;
`;

const IconButton = styled(BaseButton)`
  display: flex;
  align-items: center;
  
  ${BaseButton} {
    border: none;
  }
  
  &:hover ${BaseButton} {
    background: blue;
  }
`;

const Container = styled.div`
  ${BaseButton} + ${BaseButton} {
    margin-left: 10px;
  }
`;

Output:

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

const IconButton = /*#__PURE__*/ styled(BaseButton, {
  label: 'IconButton'
})({
  display: 'flex',
  alignItems: 'center',
  [BaseButton]: {
    border: 'none'
  },
  ['&:hover ' + BaseButton]: {
    background: 'blue'
  }
});

const Container = /*#__PURE__*/ styled('div', {
  label: 'Container'
})({
  [BaseButton + '+' + BaseButton]: {
    marginLeft: '10px'
  }
});

withComponent Method Processing

Handles .withComponent() method calls on styled components.

/**
 * Processes withComponent method calls
 * @param {BabelPath} path - CallExpression path for withComponent
 * @param {Object} state - Plugin state
 */
function processWithComponent(path, state);

withComponent Example:

Input:

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

const Link = Button.withComponent('a');
const Div = Button.withComponent('div');

Output:

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

const Link = Button.withComponent('a', {
  label: 'Link'
});
const Div = Button.withComponent('div', {
  label: 'Div'
});

Platform-Specific Styled Components

Different styled component handling for web, React Native, and primitives.

/**
 * Web styled components with full CSS support
 */
const webStyledMacro = createStyledMacro({
  importSource: '@emotion/styled/base',
  originalImportSource: '@emotion/styled',
  isWeb: true
});

/**
 * React Native styled components with limited CSS support
 */
const nativeStyledMacro = createStyledMacro({
  importSource: '@emotion/native',
  originalImportSource: '@emotion/native',
  isWeb: false
});

/**
 * Primitives styled components
 */
const primitivesStyledMacro = createStyledMacro({
  importSource: '@emotion/primitives',
  originalImportSource: '@emotion/primitives',
  isWeb: false
});

Platform-Specific Features:

Web styled components support:

Full CSS features (pseudo-selectors, media queries, etc.)
Component-as-selector functionality
CSS-in-JS optimizations

React Native styled components:

React Native compatible style properties only
No pseudo-selectors or media queries
Platform-specific style handling

Styled Component Factory

Creates styled component macros for different configurations.

/**
 * Creates a styled component macro with specific configuration
 * @param {Object} config - Styled macro configuration
 * @returns {TransformerMacro} Configured styled macro
 */
function createStyledMacro(config);

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

Custom Styled Macro:

const customStyledMacro = createStyledMacro({
  importSource: '@my-company/styled/base',
  originalImportSource: '@my-company/styled',
  isWeb: true
});

Styled Component Options

Configuration options for styled component transformations.

/**
 * Gets styled component options for transformation
 * @param {Object} babel - Babel types
 * @param {BabelPath} path - AST path
 * @param {Object} state - Plugin state
 * @returns {Object} Styled options object
 */
function getStyledOptions(babel, path, state);

interface StyledOptions {
  label?: string;
  shouldForwardProp?: (prop: string) => boolean;
  target?: string;
}

Styled Options Example:

Input:

const Button = styled('button', {
  shouldForwardProp: prop => prop !== 'primary'
})`
  background: ${props => props.primary ? 'blue' : 'gray'};
`;

Output:

const Button = /*#__PURE__*/ styled('button', {
  label: 'Button',
  shouldForwardProp: prop => prop !== 'primary'
})({
  background: props => props.primary ? 'blue' : 'gray'
});

Dynamic Styled Components

Handling of dynamic styled component creation.

/**
 * Transforms dynamic styled component calls
 * Handles styled(Component) and styled[tag] patterns
 */
function transformDynamicStyledCall(path, state);

Dynamic Styled Examples:

Input:

// Dynamic component
const StyledComponent = styled(BaseComponent)`
  padding: 10px;
`;

// Dynamic tag
const tag = 'div';
const StyledDiv = styled[tag]`
  margin: 5px;
`;

// Conditional styling
const ConditionalStyled = styled(condition ? 'button' : 'div')`
  background: red;
`;

Output:

const StyledComponent = /*#__PURE__*/ styled(BaseComponent, {
  label: 'StyledComponent'
})({
  padding: '10px'
});

const StyledDiv = /*#__PURE__*/ styled(tag, {
  label: 'StyledDiv'
})({
  margin: '5px'
});

const ConditionalStyled = /*#__PURE__*/ styled(condition ? 'button' : 'div', {
  label: 'ConditionalStyled'
})({
  background: 'red'
});

Styled Component Utilities

Label Generation

/**
 * Generates labels for styled components based on variable names
 * @param {BabelPath} path - AST path
 * @param {string} labelFormat - Label format string
 * @returns {string} Generated label
 */
function getLabelFromPath(path, labelFormat);

Label generation supports the same placeholders as CSS labeling:

[local]: Variable name
[filename]: File name without extension
[dirname]: Directory name

Target Class Name Generation

/**
 * Generates target class names for component-as-selector functionality
 * @param {BabelPath} path - AST path
 * @param {Object} state - Plugin state
 * @returns {string} Target class name
 */
function getTargetClassName(path, state);

This function generates unique class names that allow styled components to be used as CSS selectors in other styled components.

Styled Base Import Handling

/**
 * Handles styled base imports for optimized builds
 * Maps styled imports to base implementations when available
 */
function handleStyledBaseImport(importSource, state);

For production optimization, the plugin can map styled component imports to base implementations that exclude development-only features like labeling.

Version

Tile

Files