minify-selectors
Advanced tools
Changelog
v2.3.3
<sub>4 Feb 2023</sub>
--parallel option to enable concurrent file processingaria-controls HTML attributeReadme
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.
|
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>
|
|
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 { … }
|
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');
}
|
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> |
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.
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
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"
| 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
|
String sequence of characters to use when encoding.
Default: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
|
--start-index
|
Index to start incrementing and encoding from.
Default: 0
|
--parallel
| Enable concurrent processing. |
--disable-sort
| Skip reordering of selectors by frequency before minifying. |
FAQs
Post-processor that minifies classes and IDs in CSS, HTML, Javascript and SVG files.
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 1 open source maintainer 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
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.