#css #selectors #minifier #cli

app minify_selectors

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

1 unstable release

Uses new Rust 2021

0.11.3 May 26, 2022

#644 in Web programming

Apache-2.0

41KB
1K SLoC

Latest release version  Apache 2.0 license

minify-selectors

Post-processor that minifies classes and IDs selector names in CSS, HTML and Javascript files. Each unique selector, and any subsequent occurances elsewhere, is converted into an ultracompact one.

Enhance your front-end assets and build optimisations pipeline — wring even more out from your already minified and optimised payload sizes. Additionally, can offer a certain degree of obfuscation to your code.


Features

For a full outline of capabilities and current limitations, see parse_selectors/info.md.

Comprehensive out of the box selector support

minify-selectors aims to minify all obvious selectors right out of the gate. Any extra work configuring should be to assist minify-selectors to identify additional and/or ambigious selectors.

CSS (or embedded style) example

Source:

[id='page--default'] { … }                               ‎
.sidebar, .site-nav { … }
.sidebar .search:focus-within { … }
.sidebar--expanded a.is-active { … }

Output:

[id='a'], { … }                                          ‎
.b, .c { … }
.b .d:focus-within { … }
.e a.f { … }

JS (or embedded script) example

Source:

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

Output:

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

HTML example

Source:

<body id="page--default">
  <nav class="site-nav">
    <div class="search has-content">
      <label for="site-search" class="text--muted text--c
        enter">
        Search app
      </label>
      <input type="text" id="site-search" class="form-inp
        ut--single form-input--lg border--thick">
    </div>
  </nav>
</body>

Output:

<body id="a">                                            ‎
  <nav class="c">
    <div class="d a1">
      <label for="y" class="F j">
        Search app
      </label>
      <input type="text" id="y" class="A9 t Av">
    </div>
  </nav>
</body>

Opt-in/opt-out selector encoding

Available in v1.0.0

In cases where minify-selectors is unable to parse selectors, for example: in custom HTML attributes or JS variables. Or forcing a selector to be encoded when it otherwise would not be, such as in a HTML code element or comments. You can prefix your selector names so that minify-selectors knows to parse it and how to encode it:

  • .__-- or #__-- — instead of the selector type ('#' or '.') before CSS selector names
  • __class-- or __id-- — for "name only" selectors, use '__class--' for class selectors and '__id--' for ID selectors

Source:

<main class="page page-dark">                            ‎
  <button
    class="btn btn-warning"
    data-toggle="modal"
    data-target="#__--prompt-delete-user">
  </button>
</main>
<script>
  view.className = isDarkMode
    ? '__class--page __class--page--dark'
    : '__class--page __class--page--light';
</script>

Output:

<main class="b2 b3">                                     ‎
  <button
    class="a4 a7"
    data-toggle="modal"
    data-target="#bc">
  </button>
</main>
<script>
  view.className = isDarkMode
    ? 'b2 b3'
    : 'b2 b4;
</script>

Or, you do not want minify-selectors to encode certain selectors (for reasons such as SEO). You can prefix your selector names so minify-selectors will leave the name as is (the prefix will be omitted):

  • .__ignore-- and #__ignore-- — instead of the selector type ('#' or '.') before CSS selector names
  • __ignore-- — for selectors that are "name only"

Source:

<nav class="site-nav">                                   ‎
  <a href="/faq/#__ignore--new-user"><a>
<nav>

Output:

<nav class="c">                                          ‎
  <a href="/faq/#new-user"><a>
</div>

Usage

Please note: minify-selectors only supports regular CSS, HTML and JS files. minify-selectors should be one of the final steps in your build process — SASS/SCSS, LESS, Typescript, JQuery, Handlebars, etc. should be compiled or transpiled first into its respective vanilla form.

Via npm and npm scripts

  1. Install via npm:

    npm i minify-selectors
    
  2. Include minify-selectors in your package.json 'scripts' property:

    "scripts": {
      "build": "npm run build:webpack && npm run build:minify-selectors",
      "build:minify-selectors": "minify-selectors --input \"example/dir/src/\" --output \"example/dir/dist/\"",
      "build:webpack": "webpack --config config/webpack-prod.config.js"
    },
    
  3. Run npm script command, for example:

    npm run build
    

Running as CLI tool

  1. Install via homebrew:

    brew tap adamgian/minify-selectors && brew install minify-selectors
    
  2. Run in command line:

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

Options

Flag Description
--input (or -i) Directory to process. Any CSS, HTML and JS files in the given directory and sub-directories will be parsed.
--output (or -o) Directory to ouput processed files to. Setting the output path to be the same as the input path will overwrite existing files.
--alphabet String sequence of characters to use when encoding.

Default: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
--start-index Index to start incrementing and encoding from.

Default: 0

Dependencies

~8.5MB
~204K SLoC