5 releases (stable)
2.6.0 | Mar 7, 2024 |
---|---|
2.4.0 | Feb 18, 2023 |
2.3.3 | Feb 4, 2023 |
2.1.3 | Jan 17, 2023 |
0.2.0 | Oct 21, 2022 |
#2078 in Web programming
Used in 2 crates
22KB
487 lines
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.5MB
~163K SLoC