shrink-css-classes
v0.1.0
Published
Minify CSS class names in HTML and style blocks
Maintainers
something_with_codeReadme
shrink-css-classes
Minify CSS class names in HTML and <style> blocks. Perfect for reducing email HTML size.
Installation
npm install shrink-css-classesUsage
import { shrinkCssClasses } from 'shrink-css-classes'
const html = `
<html>
<head>
<style>
.header { color: red; }
.footer { color: blue; }
@media (max-width: 600px) {
.header { font-size: 14px; }
}
</style>
</head>
<body>
<div class="header">Hello</div>
<div class="footer">World</div>
</body>
</html>
`
const minified = shrinkCssClasses(html)
// Result: .header → .a, .footer → .bAPI
shrinkCssClasses(html, options?)
Parameters:
html(string): Input HTML stringoptions(object, optional): Configuration options
Options:
interface ShrinkCssClassesOptions {
prefix?: string // Prefix for generated class names (default: '')
suffix?: string // Suffix for generated class names (default: '')
classNameGenerator?: (index: number) => string // Custom generator function
}Returns: string - HTML with minified class names
Examples
Default (a, b, c, ..., z, aa, ab, ...)
shrinkCssClasses(html)
// .header → .a
// .footer → .bWith Prefix
shrinkCssClasses(html, { prefix: '_' })
// .header → ._a
// .footer → ._bWith Suffix
shrinkCssClasses(html, { suffix: '-' })
// .header → .a-
// .footer → .b-Custom Generator
shrinkCssClasses(html, {
classNameGenerator: (index) => `c${index}`
})
// .header → .c0
// .footer → .c1Features
- ✅ Minifies class names in HTML elements
- ✅ Updates class names in
<style>blocks - ✅ Handles media queries
- ✅ Supports multiple classes per element
- ✅ Configurable prefix/suffix
- ✅ Custom class name generators
- ✅ TypeScript support
Use Cases
- Email HTML optimization (reduce file size)
- Obfuscating class names
- Reducing payload size for web components
License
MIT