posthtml-minify-classnames

    0.3.0 • Public • Published

    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

    TODO

    • Option to define own generator function.

    Install

    npm i posthtml-minify-classnames

    DownloadsWeekly Downloads

    281

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    304 kB

    Total Files

    16

    Last publish

    Collaborators

    • scrum
    • simonlc