html2css-map is a command-line tool that extracts inline styles from HTML files, converts them into reusable CSS classes, and rewrites the HTML with cleaner, class-based markup.
- Scans
.htmlfiles for inline styles - Generates a css file with reusable classes
- Replaces inline styles with
class=""attributes - Deduplicates identical styles
- Dry-run mode to preview changes
- Optional JSON changelog log
You can install html2css-map as an npm package globally or as a devDependency:
npm install -g html2css-mapnpm install --save-dev html2css-mapAfter installation, you can run the tool via npm scripts or directly through the command line.
Add the following script to your package.json:
{
"scripts": {
"html2css": "html2css-map --input ./src --output ./custom.css"
}
}Run the script:
npm run html2css- Scan the
./srcfolder (change to your current directory) - Generate a
custom.cssfile (change to your preferred name)
Before:
<div style="color: red; font-size: 18px;">Hello</div>After:
<div class="html2css-style-1">Hello</div>custom.css:
.html2css-style-1 {
color: red;
font-size: 18px;
}- Works with Angular templates (.html files). However, it does not support Angular’s ngStyle directive.
- Works with standard .html files, extracting inline styles and converting them into reusable CSS classes.
| Option | Description |
|---|---|
--input, -i |
(Required) Path to the folder containing .html files to scan. |
--output, -o |
(Required) Path to the output CSS file to generate. |
--dry |
(Optional) If set, it will preview changes without modifying any files. |
--log |
(Optional) Path to generate a JSON changelog file that tracks changes made. |
Contributions are welcome! If you encounter issues or have ideas to enhance the library, feel free to submit an issue or pull request.