New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
minify-selectors
Advanced tools
minify-selectors - npm Package Compare versions
Comparing version 0.11.3 to 1.0.0-beta.2
| { | ||
| "name": "minify-selectors", | ||
| "version": "0.11.3", | ||
| "version": "1.0.0-beta.2", | ||
| "description": "Post-processor that minifies classes and IDs in CSS, HTML and Javascript files.", | ||
@@ -5,0 +5,0 @@ "author": { |
223
README.md
@@ -0,6 +1,17 @@ | ||
| [1]: https://github.com/adamgian/minify-selectors/releases/latest | ||
| [2]: https://img.shields.io/npm/v/minify-selectors?color=blue&label=Latest%20release | ||
| [3]: https://www.apache.org/licenses/LICENSE-2.0 | ||
| [4]: https://img.shields.io/badge/License-Apache%202.0-green.svg | ||
| [![Latest release version][2]][1] | ||
| [![Apache 2.0 license][4]][3] | ||
| # minify-selectors | ||
| 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. | ||
| 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 one. | ||
| 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. | ||
| 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. | ||
@@ -12,30 +23,67 @@ <br> | ||
| ## Examples | ||
| ## Features | ||
| ### CSS | ||
| For a full outline of capabilities and current limitations, see [parse_selectors/info.md](crates/parse_selectors/info.md). | ||
| ### Comprehensive out of the box selector support | ||
| minify-selectors aims to minify all obvious selectors right out of the gate. Any extra work configuring should be to assist minify-selectors to identify additional and/or ambigious selectors. | ||
| #### CSS (or embedded style) example | ||
| <table> | ||
| <tr><td><p><sub>Source:</sub></p> | ||
| <pre lang="scss"> | ||
| <tr> | ||
| <td> | ||
| <p><sub>Source:</sub></p> | ||
| <pre lang="scss"> | ||
| [id='page--default'] { … } | ||
| .sidebar, .site-nav { … } | ||
| .sidebar .search:focus-within { … } | ||
| .sidebar--expanded a.is-active { … } | ||
| </pre> | ||
| </td><td><p><sub>Output:</sub></p> | ||
| <pre lang="scss"> | ||
| .sidebar--expanded a.is-active { … }<!-- | ||
| --></pre> | ||
| </td> | ||
| <td> | ||
| <p><sub>Output:</sub></p> | ||
| <pre lang="scss"> | ||
| [id='a'], { … } | ||
| .b, .c { … } | ||
| .b .d:focus-within { … } | ||
| .e a.f { … } | ||
| </pre> | ||
| </td></tr> | ||
| .e a.f { … }<!-- | ||
| --></pre> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| ### HTML | ||
| #### JS (or embedded script) example | ||
| <table> | ||
| <tr><td><p><sub>Source:</sub></p> | ||
| <pre lang="html"> | ||
| <tr> | ||
| <td><p><sub>Source:</sub></p> | ||
| <pre lang="js"> | ||
| for (let link of document.querySelectorAll('a.anchor')) { | ||
| link.classList.remove('is-active'); | ||
| }<!-- | ||
| --></pre> | ||
| </td> | ||
| <td> | ||
| <p><sub>Output:</sub></p> | ||
| <pre lang="js"> | ||
| for (let link of document.querySelectorAll('a.Bd')) { | ||
| link.classList.remove('f'); | ||
| }<!-- | ||
| --></pre> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| #### HTML example | ||
| <table> | ||
| <tr> | ||
| <td> | ||
| <p><sub>Source:</sub></p> | ||
| <pre lang="html"> | ||
| <body id="page--default"> | ||
@@ -52,6 +100,8 @@ <nav class="site-nav"> | ||
| </nav> | ||
| </body> | ||
| </pre> | ||
| </td><td valign="top"><p><sub>Output:</sub></p> | ||
| <pre lang="html"> | ||
| </body><!-- | ||
| --></pre> | ||
| </td> | ||
| <td valign="top"> | ||
| <p><sub>Output:</sub></p> | ||
| <pre lang="html"> | ||
| <body id="a"> | ||
@@ -66,28 +116,85 @@ <nav class="c"> | ||
| </nav> | ||
| </body> | ||
| </pre> | ||
| </td></tr> | ||
| </body><!-- | ||
| --></pre> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| ### JS | ||
| ### Opt-in/opt-out selector encoding | ||
| <sub>Available in v1.0.0</sub> | ||
| 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 CSS selector names | ||
| - `__class--` or `__id--` — for "name only" selectors, use '\_\_class--' for class selectors and '\_\_id--' for ID selectors | ||
| <table> | ||
| <tr><td><p><sub>Source:</sub></p> | ||
| <pre lang="js"> | ||
| for (let link of document.querySelectorAll('a.anchor')) { | ||
| link.classList.remove('is-active'); | ||
| } | ||
| </pre> | ||
| </td><td><p><sub>Output:</sub></p> | ||
| <pre lang="js"> | ||
| for (let link of document.querySelectorAll('a.Bd')) { | ||
| link.classList.remove('f'); | ||
| } | ||
| </pre> | ||
| </td></tr> | ||
| <tr> | ||
| <td> | ||
| <p><sub>Source:</sub></p> | ||
| <pre lang="html"> | ||
| <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> | ||
| <!-- | ||
| --></pre> | ||
| </td> | ||
| <td valign="top"> | ||
| <p><sub>Output:</sub></p> | ||
| <pre lang="html"> | ||
| <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> | ||
| <!-- | ||
| --></pre> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| For a full outline of capabilities and current limitations, see [parse_selectors/info.md](crates/parse_selectors/info.md). | ||
| 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 CSS selector names | ||
| - `__ignore--` — for selectors that are "name only" | ||
| <table> | ||
| <tr> | ||
| <td> | ||
| <p><sub>Source:</sub></p> | ||
| <pre lang="html"> | ||
| <nav class="site-nav"> | ||
| <a href="/faq/#__ignore--new-user"><a> | ||
| <nav><!-- | ||
| --></pre> | ||
| </td> | ||
| <td valign="top"> | ||
| <p><sub>Output:</sub></p> | ||
| <pre lang="html"> | ||
| <nav class="c"> | ||
| <a href="/faq/#new-user"><a> | ||
| </div><!-- | ||
| --></pre> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <br> | ||
@@ -103,22 +210,10 @@ | ||
| ### CLI | ||
| ### Via npm and npm scripts | ||
| 1. Install from npm: | ||
| 1. Install via npm: | ||
| ```shell | ||
| npm i -g minify-selectors | ||
| ``` | ||
| 2. Run in command line: | ||
| ```shell | ||
| minify-selectors --input "example/dir/src" --output "example/dir/dist" | ||
| ``` | ||
| ### npm scripts | ||
| 1. Install from npm: | ||
| ```shell | ||
| npm i minify-selectors | ||
| ``` | ||
| 2. Include minify-selectors in your package.json scripts: | ||
| 2. Include minify-selectors in your package.json 'scripts' property: | ||
| ```json | ||
@@ -132,3 +227,3 @@ "scripts": { | ||
| 2. Run npm script: | ||
| 3. Run npm script command, for example: | ||
| ```shell | ||
@@ -138,2 +233,14 @@ npm run build | ||
| ### Running as CLI tool | ||
| 1. Install via homebrew: | ||
| ```shell | ||
| brew tap adamgian/minify-selectors && brew install minify-selectors | ||
| ``` | ||
| 2. Run in command line: | ||
| ```shell | ||
| minify-selectors --input "example/dir/src" --output "example/dir/dist" | ||
| ``` | ||
| <br> | ||
@@ -160,3 +267,3 @@ | ||
| <td> | ||
| 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. | ||
| Directory to process. Any CSS, HTML and JS files in the given directory and sub-directories will be parsed. | ||
| </td> | ||
@@ -177,3 +284,4 @@ </tr> | ||
| <td> | ||
| Custom sequence of characters to use when encoding. <br><br>By default, selector names will be encoded using the following base 62 string: <code>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</code> | ||
| String sequence of characters to use when encoding. | ||
| <br><br>Default: <code>"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"</code> | ||
| </td> | ||
@@ -186,3 +294,4 @@ </tr> | ||
| <td> | ||
| Index to start incrementing and encoding from. <br><br>By default, this will begin from <code>`0`</code> (essentially <code>`a`</code> if using the default alphabet). | ||
| Index to start incrementing and encoding from. | ||
| <br><br>Default: <code>0</code> | ||
| </td> | ||
@@ -189,0 +298,0 @@ </tr> |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by15.58%
22192
- Number of lines in readme file
- increased by59.56%
292
No dependency changes