PostCSS Reduce Transforms

PostCSS Reduce Transforms is a PostCSS plugin that optimizes CSS transform functions by reducing them to their simplest equivalent forms. It converts complex 3D transform functions to simpler 2D equivalents where possible, consolidates redundant parameters, and reduces matrix3d functions to matrix when appropriate.

Package Information

• Package Name: postcss-reduce-transforms
• Package Type: npm
• Language: JavaScript
• Installation: npm install postcss-reduce-transforms

Core Imports

const reduceTransforms = require('postcss-reduce-transforms');

For ES modules:

import reduceTransforms from 'postcss-reduce-transforms';

Basic Usage

const postcss = require('postcss');
const reduceTransforms = require('postcss-reduce-transforms');

// As part of a PostCSS processing chain
postcss([reduceTransforms()])
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css);
  });

// With other PostCSS plugins (typical usage)
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const reduceTransforms = require('postcss-reduce-transforms');

postcss([
  autoprefixer,
  reduceTransforms(), // Usually run after other transform plugins
])
  .process(css, { from: 'input.css', to: 'output.css' })
  .then(result => {
    // Optimized CSS with reduced transform functions
    console.log(result.css);
  });

Example transformation:

Input CSS:

h1 {
  transform: rotate3d(0, 0, 1, 20deg);
}

Output CSS:

h1 {
  transform: rotate(20deg);
}

Architecture

PostCSS Reduce Transforms is built around several key components:

• Plugin Creator Function: The main export that returns a configured PostCSS plugin instance with the postcssPlugin name and prepare() method
• Value Parser Integration: Uses postcss-value-parser to parse and manipulate CSS transform function syntax trees
• Reduction Engine: A map-based system with specialized reducer functions for each transform type (matrix3d, rotate3d, scale, etc.)
• AST Walker: Traverses parsed transform values and applies appropriate reductions using the walk() method
• Caching System: Internal value cache to avoid re-processing identical transform declarations
• CSS Variable Preservation: Special handling to preserve var() and env() functions during optimization

The plugin processes CSS declarations matching /transform$/i (including vendor prefixes) in the OnceExit phase, ensuring all transforms are optimized after the CSS has been fully processed.

Capabilities

Plugin Creator

Creates a PostCSS plugin instance that processes CSS transform declarations and optimizes them.

/**
 * Creates a PostCSS plugin that reduces CSS transform functions
 * @returns {import('postcss').Plugin} PostCSS plugin instance
 */
function reduceTransforms(): Plugin;

The plugin automatically processes all CSS declarations matching the pattern /transform$/i (including transform, Transform, -webkit-transform, etc.) and applies the following optimizations:

Matrix3D Reduction

Converts matrix3d functions to simpler matrix equivalents when possible.

Transformation Rule:

• matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) → matrix(a, b, c, d, tx, ty)

Example:

/* Input */
transform: matrix3d(20, 20, 0, 0, 40, 40, 0, 0, 0, 0, 1, 0, 80, 80, 0, 1);

/* Output */
transform: matrix(20, 20, 40, 40, 80, 80);

Rotate3D Reduction

Converts rotate3d functions to their axis-specific equivalents.

Transformation Rules:

• rotate3d(1, 0, 0, a) → rotateX(a)
• rotate3d(0, 1, 0, a) → rotateY(a)
• rotate3d(0, 0, 1, a) → rotate(a)

Examples:

/* Input */
transform: rotate3d(1, 0, 0, 45deg);
transform: rotate3d(0, 1, 0, 90deg);
transform: rotate3d(0, 0, 1, 180deg);

/* Output */
transform: rotateX(45deg);
transform: rotateY(90deg);
transform: rotate(180deg);

RotateZ Reduction

Converts rotateZ functions to simpler rotate equivalents.

Transformation Rule:

• rotateZ(rz) → rotate(rz)

Example:

/* Input */
transform: rotateZ(45deg);

/* Output */
transform: rotate(45deg);

Scale Reduction

Optimizes scale functions by removing redundant parameters.

Transformation Rules:

• scale(sx, sy) → scale(sx) when sx === sy
• scale(sx, 1) → scaleX(sx)
• scale(1, sy) → scaleY(sy)

Examples:

/* Input */
transform: scale(2, 2);
transform: scale(1.5, 1);
transform: scale(1, 0.8);

/* Output */
transform: scale(2);
transform: scaleX(1.5);
transform: scaleY(0.8);

Scale3D Reduction

Converts scale3d functions to their axis-specific equivalents when possible.

Transformation Rules:

• scale3d(sx, 1, 1) → scaleX(sx)
• scale3d(1, sy, 1) → scaleY(sy)
• scale3d(1, 1, sz) → scaleZ(sz)

Examples:

/* Input */
transform: scale3d(2, 1, 1);
transform: scale3d(1, 1.5, 1);
transform: scale3d(1, 1, 0.5);

/* Output */
transform: scaleX(2);
transform: scaleY(1.5);
transform: scaleZ(0.5);

Translate Reduction

Optimizes translate functions by removing zero values and converting to axis-specific functions.

Transformation Rules:

• translate(tx, 0) → translate(tx)
• translate(0, ty) → translateY(ty)

Examples:

/* Input */
transform: translate(100px, 0);
transform: translate(0, 50px);

/* Output */
transform: translate(100px);
transform: translateY(50px);

Translate3D Reduction

Converts translate3d functions to translateZ when X and Y are zero.

Transformation Rule:

• translate3d(0, 0, tz) → translateZ(tz)

Example:

/* Input */
transform: translate3d(0, 0, 10px);

/* Output */
transform: translateZ(10px);

Type Definitions

declare function reduceTransforms(): import("postcss").Plugin;
declare namespace reduceTransforms {
    let postcss: true;
}

CSS Variable Support

The plugin preserves CSS variables (var() and env() functions) without modification:

/* Input */
transform: scale(var(--scale-x), var(--scale-y));

/* Output - preserved as-is */
transform: scale(var(--scale-x), var(--scale-y));

Case Insensitive Processing

All transform function names are processed case-insensitively:

/* Input */
transform: ROTATEZ(90deg);
transform: SCALE3D(2, 1, 1);

/* Output */
transform: rotate(90deg);
transform: scaleX(2);

Performance Optimization

The plugin includes internal caching to avoid re-processing identical transform values, improving performance when the same transform declarations appear multiple times in a stylesheet.

Dependencies

• postcss-value-parser: ^4.2.0 - Used for parsing and manipulating CSS transform values
• postcss: ^8.4.32 - Peer dependency for PostCSS plugin system