minify-selectors

minify-selectors

Post-processor that minifies classes and IDs in CSS, HTML and Javascript files.

Each unique identifier is assigned an index which is converted into an ultra compact CSS valid selector.

Examples

CSS (source):

#page--default { … }
.sidebar, .site-nav { … }
.sidebar .search:focus-within { … }
.sidebar--expanded a.is-active { … }

CSS (output):

#AA { … }
.AB, .AC { … }
.AB .AD:focus-within { … }
.AE a.AD { … }

HTML (source):

<main id="page--default">
    <nav class="site-nav">
        <div class="search has-content">
            <label for="site-search" class="text--muted text--center">…</label>
            <input type="text" id="site-search" class="form-input--single form-input--lg border--thick">
        </div>
    </nav>
</main>

HTML (output):

<main id="AA">
    <nav class="AC">
        <div class="AD B2">
            <label for="Ay" class="D3 D4">…</label>
            <input type="text" id="Ay" class="C9 CH Di">
        </div>
    </nav>
</main>

JS (source)

for (let link of document.querySelectorAll('a.anchor')) {
    link.classList.remove('is-active');
}

JS (output)

for (let link of document.querySelectorAll('a.Bd')) {
    link.classList.remove('AD');
}

For a full outline of capabilities and current limitations, see TODO

Usage

Install from npm

npm i minify-selectors

Running in the command line

minify-selectors --input "example/dir/src" --output "example/dir/dist"

For more CLI options, see the 'Options' section below.

Options

Changelog

v0.4.3

_{16 Apr 2022}

Updates:

• Handle errors gracefully on directory creation and file writes (refactor)
• Only try to find CSS selectors within style tags in HTML files + ignore attribute selectors (should be processed separately) — saves on logic trying to prevent false positives elsewhere (feature)
• Reassign integer types of certain variables (refactor)
• Add binary for Windows x32 (feature)
• Binaries published onto npm (feature)

Fixes:

• binary-install scripts