A much leaner and thorough npm package for trimming unused CSS from CSS files based on the selectors matched in provided HTML files
Head over to https://rmrf-css.vercel.app for a more comprehensive, simple, UI-based trimming and downloading of used styles for your provided website URL.
- Clone the repository
git clone https://github.com/ogbotemi-2000/rmrf-css.git
- Or install the package locally via npm
npm install rmrf-css
Both options above are quick and direct - the package has zero dependencies, no npm install required
The browser-based version is direct and progressive with short texts when necessary to guide its usage.
The section below comprises guides for using the package programatically
const rem_css = require('rmrf-css');
rem_css({
html: /* array of html filenames or a filename */,
css: /* array of css filenames or a filename */
out: /* output directory for the trimmed css files */
})
/* defaults to {html:'./', css:'css', out:'dist'}.
* the output directory is created if it does not exist
*/
rem_css()Include the code block below in your package.json file for it to work
...
"scripts": {
...
"rmrf-css": "node ./node_modules/rmrf-css/index"
...
}
...It is invoked as
npm run rmrf-css -- -html <html file names or folder path> -css <similar but for css> -out <output folder>An example - npm run rmrf-css -- -h 'index.html, sitemap.html' -c public/css -o dist, the double dashes are required for proper behaviour
node path/to/rmrf-css/index -h index.html -c 'tailwind.css, all.css' -o output-folderThe arguments can also be provided in the long version
node path/to/rmrf-css/index.js --html 'index.html, 404.html' --css 'tailwind.css, all.css' -output output-folderThe arguments above can be anything, what matters is that their initial letters - 'h', 'c', 'o' as speciified in the
index.jsfile remain in the same position:
... argv(['-h', '-c', '-o'], ['./', 'css', 'dist']) ...-
The code warns with a message when it takes over 6000ms when boosting the trimming operation. This happens when the number of unique selectors to be audited is great and it is done to avoid long-running behaviour that produces unwanted results. If such edge case happens and it seems to be inconvenient to you, please discuss the workarounds it suggests here
-
Such a workaround for the edge case mentioned above will involve breaking the detected unique selectors into smaller chunks and invoking the scripts directly thereof with the last provided arguments used.
-
Modifying the performance threshold time of 6000ms or the "boost" mentioned above may follow this proprotion:
[Defaults] 500,000 bytes per cycle as boost ≡ (Should take at most 6000ms)
<New bytes per run via for loop> ≡ <New threshold time>
Assume any value you want for either unknown above and cross-multiply, solve to obtain other unknown
Distributed under the EPUL License. See 'LICENSE.txt' for more information
Copyright © 2024 Ogbotemi Akin Ogungbamila
Ogbotemi Akin Ogungbamila
- Twitter: @ogbotemi_o
- W3C CSS Specification for selectors: For the documents from which the algorithm used in validating used CSS selectors was created