Inline Styles to CSS

Inline Styles to CSS is a VS Code extension that extracts inline styles from HTML files and moves them to a separate CSS file, replacing the styles with automatically generated classes. Additionally, the extension preserves existing class attributes in the HTML, appending new classes when necessary.

Features

• Detects and extracts inline styles in HTML files.
• Automatically generates unique CSS classes based on the inline style’s position.
• Adds new classes to the HTML without overwriting existing class attributes.
• Creates a corresponding .css file for the .html file (or updates the existing file).
• Preserves other HTML attributes and the order of attributes like class and id.

Usage Example

Before using the extension:

<div style="color: red; background-color: yellow;" class="existing-class">
    My content
</div>

After using the extension:

HTML file:

<div class="existing-class class-div-123">
    My content
</div>

.class-div-123 {
    color: red;
    background-color: yellow;
}

How to Use

1. Open an .html file in VS Code.
2. Run the Inline to CSS command:
   • Open the command palette with Ctrl+Shift+P (or Cmd+Shift+P on macOS).
   • Type Inline to CSS and select the command.
3. The extension will generate a corresponding .css file for the HTML file and replace the inline styles with classes in the HTML.

Additional Notes:

• Common Errors: If you see the error message "No active editor found.", ensure that an HTML file is open and active in the editor.
• Compatibility: This extension was developed and tested in Visual Studio Code, but it may be compatible with other editors based on VS Code.