#css #selectors #minifier #cli

build minify_selectors

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

5 releases (stable)

2.4.0 Feb 18, 2023
2.3.3 Feb 4, 2023
2.1.2 Jan 17, 2023
1.1.0 Oct 21, 2022
0.11.3 May 26, 2022

#225 in Web programming

Apache-2.0

210KB
4.5K SLoC

Latest release version  Apache 2.0 license

minify-selectors

Post-processor that minifies class and ID selector names in CSS, HTML, Javascript and SVG files. minify-selectors aims to offer comprehensive out of the box support with minimal fuss.

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.


What it can do

HTML and SVGs

Input

<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="b">
    <div class="c a1">
      <label for="y" class="F j">
        Search app
      </label>
      <input type="text" id="y" class="A9 t Av">
    </div>
  </nav>
</body>

Input

<svg xmlns="http://www.w3.org/2000/svg">                 ‎
  <style>
    .icon-background { … }
  </style>
  <g class="icon">
    <circle class="icon-background" fill="url(#dotted)"
      />
  </g>
</svg>

Output:

<svg xmlns="http://www.w3.org/2000/svg">                 ‎
  <style>
    .dz { … }
  </style>
  <g class="d8">
    <circle class="dz" fill="url(#Y)" />
  </g>
</svg>

CSS (and HTML embedded styles)

Input

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

Output:

.a, .b { … }                                             ‎
.a .c:focus-within { … }
.d a.e { … }
#a { … }

JS (and HTML embedded scripts)

Input

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('e');
}

Opt-in or opt-out of selector encoding

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 selector names
  • __class-- or __id-- for "name only" selectors, use '__class--' for class selectors and '__id--' for ID selectors

Input

<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 selector names
  • __ignore-- for selectors that are "name only"

Input

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

Output:

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

How to use

Please note:

  • minify-selectors only supports regular CSS, HTML, JS and SVG files. SASS/SCSS, LESS, TypeScript, JQuery, Handlebars, etc. should be compiled or transpiled first into its respective vanilla form.
  • minify-selectors is currently limited to UTF-8 encoded files.

Via npm and npm scripts

  1. Install minify-selectors via npm:

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

    "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 a 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"
    

Command line options

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

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

Default: 0
--parallel Optional
Enable concurrent processing.

Default: false
--sort Optional
Reorder selectors by frequency before minifying.

Default: true
--custom-class-attribute Optional
Custom HTML and SVG attributes that contain a space-separated list of classes.
--custom-id-attribute Optional
Custom HTML and SVG attributes that contain an ID (or space-separated list of IDs).
--custom-selector-attribute Optional
Custom HTML and SVG attributes that contain a selector string.
--custom-anchor-attribute Optional
Custom HTML and SVG attributes that contain a URL.
--custom-style-attribute Optional
Custom HTML and SVG attributes that contain CSS styles.
--custom-script-attribute Optional
Custom HTML and SVG attributes that contain JS code.

Dependencies

~7MB
~168K SLoC