minify-selectors
Advanced tools
Post-processor that minifies classes and IDs in CSS, HTML and Javascript files.
Post-processor that minifies classes and IDs selector names in CSS, HTML and Javascript files. Each unique selector, and any subsequent occurances elsewhere, is converted into an ultracompact name.
Wrings out that little bit more out of your payload sizes and shave off a wee bit off file parse times. Additionally adds a certain degree of obfuscation to your selector names and stylesheets.
Source: [id='page--default'] { … }
.sidebar, .site-nav { … }
.sidebar .search:focus-within { … }
.sidebar--expanded a.is-active { … }
| Output: [id='a'], { … }
.b, .c { … }
.b .d:focus-within { … }
.e a.f { … }
|
Source: <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="c">
<div class="d a1">
<label for="y" class="F j">
Search app
</label>
<input type="text" id="y" class="A9 t Av">
</div>
</nav>
</body>
|
Source: 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('f');
}
|
For a full outline of capabilities and current limitations, see parse_selectors/info.md.
Please note: minify-selectors only supports regular CSS, HTML and JS files. minify-selectors should be one of the final steps in your build process — SASS/SCSS, LESS, Typescript, JQuery, Handlebars, etc. should be compiled or transpiled first into its respective vanilla form.
Install from npm:
npm i -g minify-selectors
Run in command line:
minify-selectors --input "example/dir/src" --output "example/dir/dist"
Install from npm:
npm i minify-selectors
Include minify-selectors in your package.json scripts:
"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:
npm run build
| Flag | Description |
|---|---|
--input (or -i)
| Directory or file to process. If a directory path is provided — any CSS, HTML and JS files in the given directory and sub-directories will be parsed. If only a filepath is provided — only the given file will be parsed. |
--output (or -o)
| Directory to ouput processed files to. Setting the output path to be the same as the input path will overwrite existing files. |
--alphabet
|
Custom sequence of characters to use when encoding. By default, selector names will be encoded using the following base 62 string: 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
|
--start-index
|
Index to start incrementing and encoding from. By default, this will begin from `0` (essentially `a` if using the default alphabet).
|
v0.11.3
<sub>25 May 2022</sub>
<script> tags<code> and comments 'filters' to the regex-level, HTML attributes regex extended to also 'ignore' <head>, <script> and <style> elementsFAQs
Post-processor that minifies classes and IDs in CSS, HTML, Javascript and SVG files.
The npm package minify-selectors receives a total of 1 weekly downloads. As such, minify-selectors popularity was classified as not popular.
We found that minify-selectors demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.