posthtml-minify-classnames
v1.0.0-alpha.0TypeScript
PostHTML plugin for minifying CSS selectors
0/weekUpdated 1 years agoMITUnpacked: 54.5 KB
Published by Simon Laroche
npm install posthtml-minify-classnames
Minify Classnames
Rewrites classnames and ids in HTML and CSS to reduce file size.
[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![License][license-shield]][license]
[![Downloads][npm-stats-shield]][npm-stats]
About
This PostHTML plugin minifies classnames and ids, reducing the weight of your HTML.
Examples
Installation
``sh`
npm i -D posthtml-minify-classnames
Usage
`js
import posthtml from 'posthtml'
import minify from 'posthtml-minify-classnames'
const html =
class="bar"
x-transition:enter="baz"
x-transition:enter-start="biz"
>baz
posthtml()
.use(minify({
filter: /^.bar/,
genNameClass: 'genNameEmoji',
genNameId: 'genNameEmoji',
customAttributes: ['x-transition:enter'],
}))
.process(html)
.then(result => {
console.log(result.html)
})
Result:
html
id="a"
class="bar"
x-transition:enter="b"
x-transition:enter-start="biz"
>baz`
$3
To use with external stylesheets, other plugins must be used, like posthtml-inline-assets and posthtml-style-to-file, or other build task plugins.
Options
You may use an options object to configure the plugin.
$3
Type:
\
Default: /^.js-/Define a regular expression that will be used to exclude names from processing.
Classes and IDs that match this will not be minified.
$3
Type:
\
Default: 'genName'The name generator to use for classes and IDs.
Possible values:
-
- 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#### Emoji based names
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).$3
Type:
String[]\
Default: []An array of strings containing custom attribute names that will have their values minified.
$3
Type:
\
Default: true`Whether to remove classes, attributes and other identifiers from the HTML that are not defined in the CSS.
Currently this only works for values in HTML attributes, it does not remove unused selectors from the CSS.
[npm]: https://www.npmjs.com/package/posthtml-minify-classnames
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-minify-classnames.svg
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-minify-classnames
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-minify-classnames.svg
[github-ci]: https://github.com/posthtml/posthtml-minify-classnames/actions/workflows/nodejs.yml
[github-ci-shield]: https://github.com/posthtml/posthtml-minify-classnames/actions/workflows/nodejs.yml/badge.svg
[license]: ./LICENSE
[license-shield]: https://img.shields.io/npm/l/posthtml-minify-classnames.svg