or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-processing.mddevelopment-features.mdimport-mapping.mdindex.mdmacro-system.mdplugin-configuration.mdstyled-components.mdutility-functions.md
tile.json

css-processing.mddocs/

CSS Processing

CSS template literal and expression processing, minification, and optimization features.

Capabilities

CSS Template Literal Transformation

Transforms CSS template literals into optimized function calls with minification.

/**
 * Transforms CSS template literals and expressions
 * Input: css`styles` or css(styles)
 * Output: Optimized css() function calls with minified styles
 */
function transformCssCallExpression(path, state);

Basic Template Literal Processing:

Input:

const styles = css`
  font-size: 20px;
  background: green;
  padding: 10px;
`;

Output:

const styles = /*#__PURE__*/ css('font-size:20px;background:green;padding:10px;');

Complex Template Literal with Interpolations:

Input:

const primaryColor = 'blue';
const styles = css`
  color: ${primaryColor};
  padding: 10px;
  ${mediaQuery} {
    font-size: 16px;
  }
`;

Output:

const styles = /*#__PURE__*/ css(
  'color:',
  primaryColor,
  ';padding:10px;',
  mediaQuery,
  '{font-size:16px;}'
);

CSS Object Expression Processing

Transforms CSS object expressions while preserving dynamic values.

/**
 * Processes CSS object expressions
 * Input: css({ prop: value })
 * Output: Optimized css() calls
 */
function transformCssObjectExpression(path, state);

Object Style Processing:

Input:

const styles = css({
  fontSize: 20,
  backgroundColor: 'green',
  padding: '10px',
  ':hover': {
    opacity: 0.8
  }
});

Output:

const styles = /*#__PURE__*/ css({
  fontSize: 20,
  backgroundColor: 'green',
  padding: '10px',
  ':hover': {
    opacity: 0.8
  }
});

Nested CSS Expressions

Handles nested css expressions within template literals.

/**
 * Processes nested CSS expressions within template literals
 */
function transformNestedCssExpressions(path, state);

Nested CSS Example:

Input:

const baseStyles = css`
  padding: 10px;
`;

const extendedStyles = css`
  ${baseStyles}
  margin: 5px;
  ${css`
    border: 1px solid black;
    ${conditionalStyles && css`
      background: red;
    `}
  `}
`;

Output:

const baseStyles = /*#__PURE__*/ css('padding:10px;');

const extendedStyles = /*#__PURE__*/ css(
  baseStyles,
  ';margin:5px;',
  /*#__PURE__*/ css(
    'border:1px solid black;',
    conditionalStyles && /*#__PURE__*/ css('background:red;')
  )
);

CSS Minification

Automatic minification of CSS strings removing unnecessary whitespace.

/**
 * Minifies CSS template literals using Stylis compiler
 * Parses CSS, removes unnecessary whitespace, and replaces template with call expression
 * @param {Object} path - Babel path to TaggedTemplateExpression
 * @param {Object} t - Babel types helper
 */
function minify(path, t);

Minification Examples:

Input CSS:

font-size: 20px;
  
  background-color: blue;
  
  @media (min-width: 768px) {
    padding: 20px;
    margin: 10px;
  }

Output CSS:

font-size:20px;background-color:blue;@media(min-width:768px){padding:20px;margin:10px;}

CSS Property Optimization

Optimizes common CSS properties and values.

/**
 * Optimizes CSS properties and values
 */
function optimizeCssProperties(css);

Optimizations include:

  • Shorthand property expansion when beneficial
  • Unit normalization (0px → 0)
  • Color format optimization
  • Vendor prefix handling

Media Query Processing

Handles media queries within CSS template literals.

/**
 * Processes media queries in CSS template literals
 */
function processMediaQueries(path, state);

Media Query Example:

Input:

const responsive = css`
  font-size: 14px;
  
  @media (min-width: 768px) {
    font-size: 16px;
    ${css`
      padding: 20px;
    `}
  }
  
  @media (min-width: 1024px) {
    font-size: 18px;
  }
`;

Output:

const responsive = /*#__PURE__*/ css(
  'font-size:14px;@media(min-width:768px){font-size:16px;',
  /*#__PURE__*/ css('padding:20px;'),
  ';}@media(min-width:1024px){font-size:18px;}'
);

Keyframes Processing

Transforms keyframes definitions within CSS.

/**
 * Processes CSS keyframes animations
 */
function transformKeyframes(path, state);

Keyframes Example:

Input:

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

const fadeIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

const animatedStyles = css`
  animation: ${fadeIn} 0.3s ease-in-out;
`;

Output:

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

const animatedStyles = /*#__PURE__*/ css(
  'animation:',
  fadeIn,
  ' 0.3s ease-in-out;'
);

CSS Prop JSX Processing

Transforms CSS props in JSX elements when cssPropOptimization is enabled.

/**
 * Transforms CSS props in JSX expressions
 */
function transformCsslessArrayExpression(options);
function transformCsslessObjectExpression(options);

Array Expression in CSS Prop:

Input:

<div css={[
  baseStyles,
  { color: 'red', padding: 10 },
  conditional && dynamicStyles
]} />

Output:

<div css={/*#__PURE__*/ css(
  baseStyles,
  ';color:red;padding:10px;',
  conditional && dynamicStyles
)} />

Object Expression in CSS Prop:

Input:

<div css={{
  fontSize: 16,
  backgroundColor: 'blue',
  ':hover': { opacity: 0.8 }
}} />

Output:

<div css={/*#__PURE__*/ css({
  fontSize: 16,
  backgroundColor: 'blue',
  ':hover': { opacity: 0.8 }
})} />

CSS Processing Utilities

String Manipulation

/**
 * Joins string literals in expression arrays
 */
function joinStringLiterals(expressions);

/**
 * Appends string expressions to argument arrays
 */
function appendStringReturningExpressionToArguments(expressions, string);

Object to CSS Conversion

/**
 * Converts JavaScript objects to CSS strings
 * @param {Object} obj - Style object
 * @returns {string} CSS string representation
 */
function objectToString(obj);

Example:

Input object:

{
  fontSize: '16px',
  backgroundColor: 'blue',
  ':hover': {
    opacity: 0.8
  }
}

Output CSS:

font-size:16px;background-color:blue;:hover{opacity:0.8;}

Pure Function Annotations

/**
 * Adds /*#__PURE__*/ comments for dead code elimination
 */
function addPureAnnotation(expression);

The plugin adds /*#__PURE__*/ comments to CSS function calls to enable tree shaking:

const styles = /*#__PURE__*/ css('color:blue;');
const animation = /*#__PURE__*/ keyframes('from{opacity:0;}to{opacity:1;}');

This allows bundlers like webpack and Rollup to eliminate unused styles in production builds.