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

CSS (and HTML embedded styles)

JS (and HTML embedded scripts)

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

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"

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"

Configuration

Command line options

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