Miss any of our Open RFC calls?Watch the recordings here! »

posthtml-minify-classnames

0.2.3 • Public • Published

posthtml-minify-classnames

NPM Deps Build Coverage

posthtml-minify-classnames is a PostHTML plugin that rewrites classnames and ids inside of html and css files to reduce file size.

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

Use cases include:

posthtml-minify-classnames supports svg href attributes.

Before:

<html>
  <style>
    #some-id {
      text-transform: uppercase;
    }
    .header__intro {
      color: blue;
    }
    .card--profile {
      background: white;
    }
    .js-overlay {
      display: none;
    }
    #js-button {
      color: blue;
    }
    @media (min-width: 768px) {
      .header__intro {
        color: gray;
      }
    }
  </style> 
  <body>
    <svg style="display:none">
      <symbol id="icon-location"><path d=""></path></symbol>
    </svg>
    <h1 id="some-id">Title</h1>
    <p class="header__intro">OMG</p>
    <div class="js-overlay"></div>
    <div id="js-button"></div>
    <div class="card--profile">
      card content
    </div>
    <svg>
      <use href="#icon-location"></use>
    </svg>
    <label for="username">Click me</label>
    <input type="text" id="username">
  </body>
</html>

After:

<html>
  <style>
    #a {
      text-transform: uppercase;
    }
    .a {
      color: blue;
    }
    .b {
      background: white;
    }
    .js-overlay {
      display: none;
    }
    #js-button {
      color: blue;
    }
    @media (min-width: 768px) {
      .a {
        color: gray;
      }
    }
  </style> 
  <body>
    <svg style="display:none">
      <symbol id="b"><path d=""></path></symbol>
    </svg>
    <h1 id="a">Title</h1>
    <p class="a">OMG</p>
    <div class="js-overlay"></div>
    <div id="js-button"></div>
    <div class="b">
      card content
    </div>
    <svg>
      <use href="#b"></use>
    </svg>
    <label for="c">Click me</label>
    <input type="text" id="c">
  </body>
</html>

Installation

npm i -D posthtml-minify-classnames

Usage

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.

var posthtml = require('posthtml');
var minifyClassnames = require('posthtml-minify-classnames');
 
posthtml()
  .use(minifyClassnames({
    filter: /^.js-/,
    genNameClass: 'genNameEmoji',
    genNameId: 'genNameEmoji'
  }))
  .process(`
    <style>
      #foo { color: red }
      .bar { color: blue }
    </style>
    <div id="foo" class="bar">baz</div>
  `)
  .then(function (result) {
    console.log(result.html); //=> '<style>#a { color: red } .bar { color: blue }</style><div id="a" class="bar">baz</div>'
  });

Options

filter

Type: regex, Default: /^.js-/

genNameClass & genNameId

Type: string, Default: 'genName'

Available options: 'genName', 'genNameEmoji', 'genNameEmojiString', false

  • '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

Example:

<html>
  <style>
    #🚧🕥🏉 {
      text-transform: uppercase;
    }
    .☘👙📙 {
      color: blue;
    }
    .⏲📂⚗ {
      background: white;
    }
    .js-overlay {
      display: none;
    }
    #js-button {
      color: blue;
    }
    @media (min-width: 768px) {
      .☘👙📙 {
        color: gray;
      }
    }
  </style> 
  <body>
    <svg style="display:none">
      <symbol id="👂🗨🌹"><path d=""></path></symbol>
    </svg>
    <h1 id="🚧🕥🏉">Title</h1>
    <p class="☘👙📙">OMG</p>
    <div class="js-overlay"></div>
    <div id="js-button"></div>
    <div class="⏲📂⚗">
      card content
    </div>
    <svg>
      <use href="#👂🗨🌹"></use>
    </svg>
    <label for="🏻🔐🙍">Click me</label>
    <input type="text" id="🏻🔐🙍">
  </body>
</html>

Future: Option to define own generator function.

Contributing

See PostHTML Guidelines and contribution guide.

License MIT

Install

npm i posthtml-minify-classnames

DownloadsWeekly Downloads

361

Version

0.2.3

License

MIT

Unpacked Size

22.9 kB

Total Files

10

Last publish

Collaborators

  • avatar