6 releases (stable)

2.6.0	Mar 7, 2024
2.4.0	Feb 18, 2023
2.1.2	Jan 17, 2023
1.1.0	Oct 21, 2022
0.11.3	May 26, 2022

#722 in Build Utils

118 downloads per month

Apache-2.0

215KB
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"

Configuration

Command line options

Option	Description
`--input`, `-i`	Directory to process. Any CSS, HTML, JS and SVG files in the given directory and sub-directories will be parsed.
`--output`, `-o`	Directory to place processed files into. Setting the output path to be the same as the input path will overwrite existing files.
`--config`, `-c`	Alternatively instead of using CLI arguments, an external JSON config file can be provided instead. See section below: 'External JSON config options' for more information.
`--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 descending frequency before assigning indexes and minifying. Default: `true`
`--custom-id-attribute`	^Optional Custom HTML and SVG attributes that contain an ID (or space-separated list of IDs). For example, in Bootstrap you may have `data-bs-target="#exampleModal"` and `data-bs-parent="#accordionExample"` Usage: `--custom-id-attribute data-bs-target data-bs-parent`
`--custom-class-attribute`	^Optional Custom HTML and SVG attributes that contain a space-separated list of classes.
`--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.

External JSON config options

An example config file:

{
    "input": "/User/Adam/Github/project/dist",
    "output": "/User/Adam/Github/project/dist",
    "parallel": true,
    "customAttributes": {
        "id": [
            "data-bs-target",
            "data-bs-parent"
        ]
    }
}

Option	Description
`input`	Directory to process. Any CSS, HTML, JS and SVG files in the given directory and sub-directories will be parsed.
`output`	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 descending frequency before assigning indexes and minifying. Default: `true`
`customAttributes.id`	^Optional Custom HTML and SVG attributes that contain an ID (or space-separated list of IDs). Usage: `"id": [ "foo", ..., "baz" ]`
`customAttributes.class`	^Optional Custom HTML and SVG attributes that contain a space-separated list of classes. Usage: `"class": [ "foo", ..., "baz" ]`
`customAttributes.selector`	^Optional Custom HTML and SVG attributes that contain a selector string. Usage: `"selector": [ "foo", ..., "baz" ]`
`customAttributes.anchor`	^Optional Custom HTML and SVG attributes that contain a URL. Usage: `"anchor": [ "foo", ..., "baz" ]`
`customAttributes.style`	^Optional Custom HTML and SVG attributes that contain CSS styles. Usage: `"style": [ "foo", ..., "baz" ]`
`customAttributes.script`	^Optional Custom HTML and SVG attributes that contain JS code. Usage: `"script": [ "foo", ..., "baz" ]`

Dependencies

~6–14MB
~221K SLoC