tessl/npm-emotion--babel-plugin

A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

CSS Processing

Name: tessl/npm-emotion--babel-plugin
Author: tessl

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.

Install with Tessl CLI

npx tessl i tessl/npm-emotion--babel-plugin

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

tessl/npm-emotion--babel-plugin

css-processing.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

CSS Processing

Capabilities

CSS Template Literal Transformation

CSS Object Expression Processing

Nested CSS Expressions

CSS Minification

CSS Property Optimization

Media Query Processing

Keyframes Processing

CSS Prop JSX Processing

CSS Processing Utilities

String Manipulation

Object to CSS Conversion

Pure Function Annotations

css-processing.mddocs/