A much leaner and quicker npm package for trimming unused CSS from CSS files based on the selectors matched in provided HTML files
Head over to https://rem-css.infinityfreeapp.com 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'}.
* 'dist' 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']) ...-
Regular expressions, used by the code, that are of this form
[^, }]+\}appear to perform less thoroughly in Node.js than in the browser, use the browser-based version of this code for a comprehensive removal of unused styles -
A performance drop may be detected by the package for large CSS files of over 1MB, follow the prompts it shows to use an alternative workaround
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