New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

minify-selectors

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

minify-selectors

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

2.8.2
latest
Source
npm

Version published: 2 weeks ago

Maintainers: 0

Created: 3 years ago

Source

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" ]`

Keywords

FAQs

What is minify-selectors?

Is minify-selectors well maintained?

Package last updated on 27 Jan 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install