HTML Style to Class Attributes - VSC Extension

This Visual Studio Code extension helps developers extract inline styles from style attributes in HTML elements, replace them with class attributes, and store the extracted styles in a separate CSS file. Additionally, the extension provides a feature to merge multiple class attributes into a single class attribute within each HTML element.

Features

• Extract Inline Styles: Detects and extracts inline styles from HTML documents, replacing them with CSS class names.
• Generate CSS File: Creates a CSS file with the extracted styles ready for reuse.
• Merge Class Attributes: Merges multiple class attributes within the same HTML element into a single attribute, removing duplicates and preserving other attributes like onclick and href.

Installation

1. Install the extension from the VS Code Marketplace or manually using the .vsix file.
2. Open an HTML, PHP, or any other editable file and trigger the commands via:
   • Keyboard shortcut:
     • Alt+X to extract inline styles (also performs "Merge Class Attributes" after extraction).
     • Alt+M to merge class attributes.
   • Right-click the context menu:
     • Extract Inline Styles, or
     • Merge Class Attributes.
   • Command Palette:
     • Ctrl+Shift+P > "Extract Inline Styles."
     • Ctrl+Shift+P > "Merge Class Attributes."

Usage

Extract Inline Styles

1. Open any HTML, PHP, or editable file with inline styles.
2. Use the command to to convert the inline styles into reusable CSS classes automatically.
3. The extension will generate a new .css file, containing the extracted styles, and update the HTML file by replacing the inline styles with class names.
4. If an HTML element contains multiple class attributes, they will be merges into a single class attribute, while those other HTML attributes (such as onclick and href) remain intact.

Example

Before

<h3 style="text-align: center; font-weight: bold;" class="class1">Header</h3>

After:

<h3 class="class1 s2c-0">Header</h3>

.s2c-0 {
    text-align: center;
    font-weight: bold;
}

Merge Class Attributes

1. If an HTML element contains multiple class attributes, use the "Merge Class Attributes" command to merge them into a single class attribute.
2. The extension ensures that all class names are merged and duplicates removed, while those other HTML attributes (such as onclick and href) remain intact.

Example:

Before:

<div class="class1" onclick="doSomeFunction(event, 'byElementID_1')" class="class2 class3">Content</div>

After:

<div class="class1 class2 class3" onclick="doSomeFunction(event, 'byElementID_1')">Content</div>

Key Bindings:

Extract Inline Styles: Alt+X
Merge Class Attributes: Alt+M

License:

This project is licensed under a License Agreement - see the LICENSE for details.