tessl/npm-minify

Minifier of js, css, html and img files with CLI and programmatic interfaces

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

CSS Minification

Name: tessl/npm-minify
Author: tessl

Advanced CSS minification with support for multiple backends and automatic base64 image inlining for optimized web assets.

Capabilities

CSS Minifier Function

Minifies CSS data using configurable CSS minifiers with automatic image inlining.

/**
 * Minifies CSS data using configurable CSS minifiers
 * @param data - CSS source code to minify
 * @param userOptions - Configuration options for CSS and image processing
 * @returns Promise resolving to minified CSS code
 */
function minify.css(data: string, userOptions?: MinifyOptions): Promise<string>;

interface MinifyOptions {
  css?: {
    type?: 'lightningcss' | 'clean-css';
    'clean-css'?: CleanCSSOptions;
  };
  img?: {
    maxSize?: number; // Default: 102400 (100KB)
  };
}

Usage Examples:

import { minify } from "minify";

// Default minification using lightningcss
const css = `
  body {
    color: '#FFFFFF';
    margin: 0px;
  }
`;
const minified = await minify.css(css);
// Result: "body{color:\"#FFFFFF\";margin:0}"

// Using clean-css
const cleanResult = await minify.css(css, {
  css: {
    type: 'clean-css',
    'clean-css': {
      level: 2,
      compatibility: '*'
    }
  }
});

// With image inlining options
const withImages = await minify.css(cssWithImages, {
  css: {
    type: 'clean-css'
  },
  img: {
    maxSize: 50000 // 50KB limit for base64 inlining
  }
});

CSS Minifier Backends

LightningCSS (Default)

Modern, fast CSS minifier written in Rust with excellent performance.

// LightningCSS uses internal configuration
// No direct options exposure in minify package
interface LightningCSSMinification {
  minify: true;                      // Always enabled
  // Internal optimization settings managed automatically
}

Usage:

// Default behavior - no options needed
const result = await minify.css(cssCode);

// Explicit selection
const result = await minify.css(cssCode, {
  css: {
    type: 'lightningcss'
  }
});

Clean-CSS

Feature-rich CSS minifier with extensive configuration options and compatibility settings.

interface CleanCSSOptions {
  level?: number | object;           // Optimization level (0, 1, 2)
  compatibility?: string | object;   // Browser compatibility settings
  format?: string | object;          // Output formatting options
  inline?: string[];                 // Files to inline
  rebase?: boolean;                  // URL rebasing
  specialComments?: string | number; // Special comment handling
  sourceMap?: boolean;               // Source map generation
  
  // Level-specific options
  level?: {
    1?: {
      cleanupCharsets?: boolean;
      normalizeUrls?: boolean;
      optimizeBackground?: boolean;
      optimizeBorderRadius?: boolean;
      optimizeFilter?: boolean;
      optimizeFont?: boolean;
      optimizeFontWeight?: boolean;
      optimizeOutline?: boolean;
      removeEmpty?: boolean;
      removeNegativePaddings?: boolean;
      removeQuotes?: boolean;
      removeWhitespace?: boolean;
      replaceMultipleZeros?: boolean;
      replaceTimeUnits?: boolean;
      replaceZeroUnits?: boolean;
      roundingPrecision?: boolean | number;
      selectorsSortingMethod?: string;
      specialComments?: string | number;
      tidyAtRules?: boolean;
      tidyBlockScopes?: boolean;
      tidySelectors?: boolean;
    };
    2?: {
      mergeAdjacentRules?: boolean;
      mergeIntoShorthands?: boolean;
      mergeMedia?: boolean;
      mergeNonAdjacentRules?: boolean;
      mergeSemantically?: boolean;
      overrideProperties?: boolean;
      removeEmpty?: boolean;
      reduceNonAdjacentRules?: boolean;
      removeDuplicateFontRules?: boolean;
      removeDuplicateMediaBlocks?: boolean;
      removeDuplicateRules?: boolean;
      removeUnusedAtRules?: boolean;
      restructureRules?: boolean;
      skipProperties?: string[];
    };
  };
}

Usage:

const result = await minify.css(cssCode, {
  css: {
    type: 'clean-css',
    'clean-css': {
      level: {
        1: {
          specialComments: 0,  // Remove all comments
          removeWhitespace: true
        },
        2: {
          mergeAdjacentRules: true,
          removeEmpty: true,
          removeDuplicateRules: true
        }
      },
      compatibility: {
        properties: {
          colors: false,      // Disable color optimizations
          ieFilters: true     // Keep IE filters
        }
      }
    }
  }
});

Image Inlining

Automatic base64 image inlining for CSS assets to reduce HTTP requests.

interface ImageInliningOptions {
  maxSize?: number;                  // Maximum file size for inlining (bytes)
}

// Default options
const defaultImageOptions = {
  maxSize: 102400  // 100KB
};

Image Inlining Process:

Parses CSS for url() references to images
Checks image file size against maxSize threshold
Converts eligible images to base64 data URIs
Replaces original URLs with inline data URIs

Usage:

// CSS with image references
const cssWithImages = `
  .header {
    background-image: url('logo.png');
  }
  .icon {
    background: url('../icons/star.svg');
  }
`;

// Configure image inlining
const result = await minify.css(cssWithImages, {
  img: {
    maxSize: 50000  // 50KB limit
  }
});

// Result includes inlined images:
// .header{background-image:url(data:image/png;base64,iVBORw0K...)}

File-based CSS Processing

When processing CSS files (not just strings), automatic image inlining is applied.

// File processing automatically includes image inlining
const minifiedCSS = await minify('./styles.css', {
  css: {
    type: 'clean-css'
  },
  img: {
    maxSize: 25000  // 25KB limit for images
  }
});

Error Handling

CSS minification handles various error conditions:

Invalid CSS: Syntax errors in CSS are caught and reported
Missing Data: Throws assertion error if data parameter is empty
Clean-CSS Errors: Validation and processing errors from clean-css are propagated
Image Processing Errors: File access and conversion errors for image inlining
Configuration Errors: Invalid options are validated and reported

Error Examples:

// Empty data validation
try {
  await minify.css("");
} catch (error) {
  console.log(error); // AssertionError
}

// Clean-CSS specific errors
try {
  await minify.css('@import "missing.css";', {
    css: { type: 'clean-css' }
  });
} catch (error) {
  console.log(error); // 'Ignoring local @import of "missing.css" as resource is missing.'
}

// Image processing errors
try {
  await minify.css('.bg { background: url("nonexistent.png"); }');
} catch (error) {
  console.log(error.message); // File access error
}