CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-swc--plugin-emotion

SWC plugin for emotion css-in-js library that provides compile-time transformations to optimize emotion-based styling code

—

Pending
Overview
Eval results
Files

css-transformations.mddocs/

CSS Function Transformations

Transformations for emotion css function calls and template literals, including automatic labeling, source map generation, and CSS minification.

Capabilities

CSS Template Literal Transformation

Transforms emotion CSS template literals into optimized function calls.

/**
 * Transforms template literal CSS into function calls
 * Input: css`styles...`
 * Output: css("minified-styles", "label:context", "sourcemap")
 */

Transformation Examples:

// Input
import { css } from "@emotion/react";

const buttonStyles = css`
  color: blue;
  font-size: 16px;
  /* This is a comment */
  padding: 8px;
`;

// Output (with autoLabel: "always", sourceMap: true)
const buttonStyles = css(
  "color:blue;font-size:16px;padding:8px;",
  "label:buttonStyles;",
  "/*# sourceMappingURL=data:application/json;base64,... */"
);

CSS Object Transformation

Transforms emotion CSS object calls with automatic enhancements.

/**
 * Transforms CSS object calls with labels and source maps
 * Input: css({ styles })
 * Output: css({ styles }, "label:context", "sourcemap")
 */

Transformation Examples:

// Input
import { css } from "@emotion/react";

const flexStyles = css({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between'
});

// Output (with autoLabel: "dev-only" in development)
const flexStyles = css(
  {
    display: 'flex',
    alignItems: 'center', 
    justifyContent: 'space-between'
  },
  "label:flexStyles;"
);

Namespace CSS Transformation

Transforms CSS calls from namespace imports.

/**
 * Transforms CSS from namespace imports
 * Input: emotion.css`styles...`
 * Output: emotion.css("minified-styles", "label:context", "sourcemap")
 */

Transformation Examples:

// Input
import * as emotion from "@emotion/react";

const cardStyles = emotion.css`
  border: 1px solid #ccc;
  border-radius: 4px;
`;

// Output
const cardStyles = emotion.css(
  "border:1px solid #ccc;border-radius:4px;",
  "label:cardStyles;"
);

CSS Minification

The plugin automatically minifies CSS strings by removing comments and unnecessary whitespace.

/**
 * CSS minification process:
 * 1. Remove single-line comments (// comments)
 * 2. Remove multi-line comments (/* comments */)
 * 3. Trim whitespace around colons, semicolons, braces
 * 4. Preserve URL content with double slashes
 */

Minification Examples:

// Input CSS
const styles = css`
  /* Main styles */
  color: red;     // Primary color
  font-size: 16px;
  
  // Spacing
  margin: 0 auto;
  background-image: url('//domain.com/image.png');
`;

// Minified output
const styles = css(
  "color:red;font-size:16px;margin:0 auto;background-image:url('//domain.com/image.png');"
);

Label Generation for CSS

Automatic label generation for CSS functions based on context and configuration.

/**
 * Label generation for CSS functions
 * Uses variable names, function contexts, and file information
 * Sanitizes labels by replacing invalid characters with hyphens
 */

Label Context Examples:

// Variable declaration context
const primaryButton = css`color: blue;`;
// Label: "primaryButton"

// Object property context  
const styles = {
  header: css`font-size: 24px;`,
  footer: css`font-size: 12px;`
};
// Labels: "header", "footer"

// Function parameter context
function createButton(type) {
  const buttonStyle = css`padding: 8px;`;
  // Label: "buttonStyle"
}

// Class method context
class Component {
  getStyles() {
    const methodStyles = css`margin: 16px;`;
    // Label: "methodStyles"
  }
}

Source Map Generation for CSS

Inline source map generation for debugging transformed CSS.

/**
 * Source map generation creates base64-encoded inline maps
 * Maps transformed CSS back to original template literal positions
 * Only generated when sourceMap option is enabled
 */

Source Map Example:

// Input at line 15, column 20
const styles = css`color: red;`;

// Output with source map
const styles = css(
  "color:red;",
  "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uI... */"
);

// Decoded source map points back to:
// - file: "src/component.tsx"
// - line: 15
// - column: 20

Interpolation Handling

Template literal interpolation is preserved in transformations.

/**
 * Template literal interpolations are preserved as function arguments
 * Each interpolated expression becomes a separate argument
 */

Interpolation Examples:

// Input with interpolation
const color = 'blue';
const size = 16;

const styles = css`
  color: ${color};
  font-size: ${size}px;
  margin: ${size / 2}px;
`;

// Output
const styles = css(
  "color:",
  color,
  ";font-size:",
  size,
  "px;margin:",
  size / 2,
  "px;"
);

Supported CSS Import Patterns

The plugin recognizes these import patterns for CSS transformation:

/**
 * Supported import patterns:
 * - Named imports: import { css } from "@emotion/react"
 * - Default imports: import css from "@emotion/css" 
 * - Namespace imports: import * as emotion from "@emotion/react"
 * - CommonJS: const { css } = require("@emotion/react")
 */

Import Pattern Examples:

// Named import
import { css } from "@emotion/react";
const styles = css`color: red;`; // ✓ Transformed

// Default import  
import css from "@emotion/css";
const styles = css`color: blue;`; // ✓ Transformed

// Namespace import
import * as emotion from "@emotion/react";
const styles = emotion.css`color: green;`; // ✓ Transformed

// CommonJS
const { css } = require("@emotion/react");
const styles = css`color: yellow;`; // ✓ Transformed

Install with Tessl CLI

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

docs

configuration.md

css-transformations.md

global-jsx-transformations.md

index.md

styled-transformations.md

tile.json