Hulk.js

Lightweight, zero-dependency minification library for HTML, CSS, SVG, JavaScript, and JSON content.

Features

• 🚀 Zero runtime dependencies - Pure JavaScript implementation
• ⚡ Fast and efficient - Regex-based transformations
• 🎯 Simple API - Single function with extension-based routing
• 📦 Tiny footprint - Minimal bundle size
• ✅ Well-tested - 100% code coverage with 41 comprehensive tests
• 🔧 ES Modules - Modern module system support
• 💪 Advanced optimizations - Aggressive minification with safe defaults

Installation

npm install @proctorio/hulk

Usage

import minify__ from '@proctorio/hulk';

// Minify HTML
const html = '<div>  <p>  Hello  </p>  </div>';
const minifiedHtml = minify__(html, 'html');
// Result: '<div><p>Hello</p></div>'

// Minify CSS with advanced optimizations
const css = `
  .class {
    color: #ffffff;
    margin: 0px;
    padding: 0.5em;
  }
`;
const minifiedCss = minify__(css, 'css');
// Result: '.class{color:#fff;margin:0;padding:.5em}'

// Minify JavaScript
const js = `
  function test() {
    // This is a comment
    return 42;
  }
`;
const minifiedJs = minify__(js, 'js');
// Result: 'function test() {\n  return 42;\n}'

// Minify JSON
const json = '{\n  "key": "value"\n}';
const minifiedJson = minify__(json, 'json');
// Result: '{"key":"value"}'

// Minify SVG
const svg = '<svg>  <circle cx="50" cy="50" r="40"/>  </svg>';
const minifiedSvg = minify__(svg, 'svg');
// Result: '<svg><circle cx="50" cy="50" r="40"/></svg>'

API

minify__(content, extension)

Minifies the provided content based on the file extension.

Parameters:

• content (string): The content to minify
• extension (string): File type - 'html', 'css', 'svg', 'js', or 'json'

Returns:

• (string): Minified content, or empty string if input is not a string

Supported Extensions:

• html - Removes whitespace, comments, and optimizes attributes
• css - Removes comments, whitespace, and optimizes spacing
• svg - Removes whitespace and comments
• js - Removes comments and trailing whitespace
• json - Uses native JSON.stringify for minification

Minification Features

CSS Optimizations

• ✅ Zero unit removal: 0px → 0, 0rem → 0 (all CSS units)
• ✅ Leading zero removal: 0.5em → .5em
• ✅ Trailing semicolon removal: color:red;} → color:red}
• ✅ Hex color compression: #ffffff → #fff, #112233 → #123
• ✅ Whitespace optimization: Removes spaces around {}:; and after colons
• ✅ Preserved features: calc() function spaces, !important flags, string content

HTML Optimizations

• ✅ Attribute spacing: class = "foo" → class="foo"
• ✅ Tag spacing: <div > → <div>
• ✅ Default type removal: Strips type="text/javascript" from <script> tags
• ✅ Boolean attributes: checked="checked" → checked
• ✅ Whitespace collapsing: Multiple spaces reduced to single space
• ✅ Comment removal: HTML comments are stripped

SVG Optimizations

• ✅ Number precision: Removes .0 from whole numbers (10.0 → 10)
• ✅ Trailing zeros: 1.500 → 1.5
• ✅ Leading zeros: 0.5 → .5
• ✅ Attribute spacing: Optimizes spaces around equals signs
• ✅ Preserved features: xml:space attributes, path data precision

JavaScript Optimizations

• ✅ Comment removal: Single-line and multi-line comments
• ✅ Trailing whitespace: Removed per line
• ✅ Preserved features: Template literals, strings with comment-like syntax

JSON Optimizations

• ✅ Native JSON.stringify: Reliable and safe minification
• ✅ Fallback handling: Returns original if JSON is invalid
• ✅ Nested structure support: Handles complex objects

Examples

Before and After

CSS Example:

/* Before */
.button {
  color: #ffffff;
  margin: 0px;
  padding: 0.5rem 10px 0em;
  border-radius: 0.25em;
}

/* After */
.button{color:#fff;margin:0;padding:.5rem 10px 0;border-radius:.25em}

HTML Example:

<!-- Before -->
<script type="text/javascript">
  <input type="checkbox" checked="checked" disabled="disabled" />
</script>

<!-- After -->
<script><input type="checkbox" checked disabled/></script>

SVG Example:

<!-- Before -->
<svg width = "100.0" height = "50.0">
  <circle cx="10.500" cy="0.5" r="5"/>
</svg>

<!-- After -->
<svg width="100" height="50"><circle cx="10.5" cy=".5" r="5"/></svg>

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Development

Prerequisites

• Node.js >= 16.0.0
• npm >= 7.0.0

Setup

git clone https://github.com/proctorio/hulk.js
cd hulk.js
npm install

Scripts

# Build (copies src/ to lib/)
npm run build

# Run tests
npm test

# Run tests with coverage
npm run coverage

# Lint code
npm run lint

# Check linting without fixing
npm run lint:check

# Pre-publish checks (build + test)
npm run prepublishOnly

Testing

The project uses Jest with 100% code coverage requirement. Test results and coverage reports are generated in standardized formats:

• Test Results: npm test generates test-results.xml in JUnit format (.test_output/test-results.xml)
• Coverage Reports: npm run coverage generates:
  • Cobertura XML format (cobertura-coverage.xml)
  • LCOV format (lcov.info and HTML report in lcov-report/)

All 41 tests cover:

• ✅ All minification functions (HTML, CSS, SVG, JS, JSON)
• ✅ Advanced CSS optimizations (zero units, hex colors, leading zeros)
• ✅ HTML attribute optimizations (boolean attributes, default types)
• ✅ SVG number precision optimizations
• ✅ Edge cases (empty content, invalid input, special characters)
• ✅ Type validation and error handling
• ✅ Comment preservation in strings
• ✅ CSS calc() function handling
• ✅ Template literals in JavaScript

Publishing

This package is published to npm as @proctorio/hulk.

To publish a new version:

# Update version in package.json
npm version patch  # or minor, or major

# Build and test
npm run prepublishOnly

# Publish to npm
npm publish

The package includes only necessary files for distribution:

• lib/ - Compiled source code
• LICENSE - Apache 2.0 license
• README.md - Documentation

Development files (tests, configuration, etc.) are excluded via .npmignore.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please ensure:

• All tests pass (npm test)
• Code coverage remains at 100% (npm run coverage)
• Code follows the linting rules (npm run lint)

Author

Proctorio

Support

For issues and questions, please visit the GitHub Issues page.