posthtml-minify-classnames

PostHTML plugin for minifying classnames


Keywords
html, posthtml, posthtml-plugin, uglify, minify, mangle, compress, classnames, class, emoji
License
MIT
Install
npm install posthtml-minify-classnames@0.2.2

Documentation

posthtml-minify-classnames

This plugin rewrites classnames and ids inside of html and css files to reduce file size.

NPM Build Coverage

Why ?

Minifying classnames allows you to write verbose classnames in your source code, and distribute a smaller package to your users or application.

Support

Examples

Installation

npm i -D posthtml-minify-classnames

Usage

const posthtml = require('posthtml');
const minifyClassnames = require('posthtml-minify-classnames');
const html = `
  <style>
    #foo { color: red }
    .bar { color: blue }
    .baz { transition: all }
  </style>
  <div 
    id="foo" 
    class="bar"
    x-transition:enter="baz"
  >baz</div>
`;

posthtml()
  .use(minifyClassnames({
    filter: /^.bar/,
    genNameClass: 'genNameEmoji',
    genNameId: 'genNameEmoji',
    customAttributes: ['x-transition:enter']
  }))
  .process(html)
  .then(function (result) {
    console.log(result.html);
  });

=> result.html

<style>
  #a { color: red } 
  .bar { color: blue } 
  .b { transition: all; }
</style>

<div 
  id="a" 
  class="bar" 
  x-transition:enter="b"
>baz</div>

Note: To use with external sheets, other plugins must be used, like posthtml-inline-assets and posthtml-style-to-file, or other build task plugins.

Options

filter

Type: RegExp
Default: /^.js-/
Description: Regular expression that excludes names from processing

genNameClass & genNameId

Type: Boolean<false>|String<'genName'|'genNameEmoji'|'genNameEmojiString'>
Default: 'genName'
Description:

  • 'genName' Generates the smallest possible names
  • 'genNameEmoji' Generates small emoji based names
  • 'genNameEmojiString' Generates random emoji with 3 emojis in each
  • false Preserves names. Use this to ignore ids or classes

Note: While emoji visually looks like a great way to reduce the size of input values, they often use 3-4 bytes or more (some can be over 20 bytes for a single rendered glyph). The below example 3 emoji string values range between 10-12 bytes in size, that's equivalent to ASCII strings up to 12 characters long. Meanwhile base36(0-9,a-z) provides an "alphabet" of 36 characters and an equivalent length of 3 characters is more than enough for most users (36^3 = 46656).

customAttributes

Type: Array
Default: []
Description: Custom attribute names that will be involved in the process

removeUnfound

Type: boolean
Default: true
Description: Removes unfound or unused classes/attributes/identifiers

TODO

  • Option to define own generator function.