CSS Optimization Pipeline

Design a module that optimizes CSS strings using a modern optimizer, merges duplicate rules, normalizes media queries, and produces accurate source maps with contextual warnings.

Capabilities

Optimizes nested and duplicate rules

• Given CSS with nested selectors and repeated blocks, returns an optimized CSS string where nesting is flattened, duplicates merged, and minification applied when requested. @test

Normalizes media query range syntax

• Converts media queries using not (width < 768px) into the compatible not all and (width < 768px) form in the optimized output. @test

Chains and fixes source maps

• When provided with an input source map string and filename, returns an updated source map whose sources and sourcesContent reference the original file and preserve mapping offsets for the transformed CSS. @test

Contextual warning reporting

• Returns an array of warnings, each containing message text and the CSS snippet around the issue; clean input produces an empty warning list. @test

Implementation

@generates

API

export interface OptimizeOptions {
  css: string;
  filename?: string;
  minify?: boolean;
  inputMap?: string;
}

export interface OptimizationWarning {
  message: string;
  line: number;
  column: number;
  snippet: string;
}

export interface OptimizeResult {
  css: string;
  map?: string;
  warnings: OptimizationWarning[];
}

export function optimizeStyles(options: OptimizeOptions): OptimizeResult;

Dependencies { .dependencies }

@tailwindcss/node { .dependency }

Provides the CSS optimization and source map utilities needed for modern CSS features.