html2css-map

html2css-map

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.

Features

• Scans .html files 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

Installation

You can install html2css-map as an npm package globally or as a devDependency:

Global Installation

npm install -g html2css-map

Local Installation (Recommended)

npm install --save-dev html2css-map

Usage

After 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

This will:

• Scan the ./src folder (change to your current directory)
• Generate a custom.css file (change to your preferred name)

Example

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;
}

Compatibility

• 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.

CLI Options

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.

Contributing

Contributions are welcome! If you encounter issues or have ideas to enhance the library, feel free to submit an issue or pull request.