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

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

Install minify-selectors via npm:
```
npm i minify-selectors
```

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"
},

Run npm script command, for example:
```
npm run build
```

Running as a CLI tool

Install via homebrew:

brew tap adamgian/minify-selectors && brew install minify-selectors

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