posthtml-minify-classnames

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

Why ?

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

Support

• Tiny code competitions e.g., https://a-k-apart.com/
• Embeded devices like router admin panels e.g., http://www.dd-wrt.com/
• Mobile and responsive sites to keep the latency low e.g., https://developers.google.com/web/showcase/2015/googleplus
• SVG href attributes.

Examples

• Basic
• GenName

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.