Smart AutoCSS

Smart AutoCSS is a VSCode extension that extracts inline styles and related CSS from selected HTML elements to create structured, organized CSS files.

Features

• Simple Selection: Just select your HTML code, right-click, and choose "Extract Styles with Smart AutoCSS"
• Comprehensive Style Extraction:
  • Extracts inline styles from selected elements
  • Identifies class names and IDs within the selection
  • Searches all project CSS for related styles
  • Avoids duplicating existing styles
• Persistent Output: Styles are added to a single file (SmartAutoCSS-[ProjectName].css) without overwriting existing content
• Optimized Performance: Uses asynchronous processing and caching to handle large projects efficiently

Usage

1. Select a portion of HTML code in your editor
2. Right-click and select "Extract Styles with Smart AutoCSS" from the context menu
3. Wait for the extraction process to complete (a status bar will indicate progress)
4. A new tab will open showing the extracted CSS in the SmartAutoCSS-[ProjectName].css file

Example

If you select this HTML:

<div id="main" class="container box" style="color: red; padding: 10px;">
    <p class="text">Hello, World!</p>
</div>

The extension will generate:

/* Extracted from inline styles */
.smart-auto-css-123 {
    /* From: <div id="main" class="container box" style="color: red; padding: 10px;"> */
    color: red;
    padding: 10px;
}

/* Extracted from project styles */
/* From: styles.css */
.container {
    display: flex;
    justify-content: center;
}

.box {
    border: 1px solid #ccc;
    margin: 20px;
}

.text {
    font-size: 16px;
    font-weight: bold;
}

Configuration Options

This extension can be customized with the following settings:

• smartAutocss.outputFileName: Template for the output filename (default: SmartAutoCSS-[ProjectName].css)
• smartAutocss.classPrefix: Prefix for generated class names from inline styles (default: smart-auto-css)
• smartAutocss.includeCssFiles: Whether to search for styles in CSS files (default: true)
• smartAutocss.includeStyleTags: Whether to search for styles in <style> tags (default: true)

Requirements

• VSCode 1.60.0 or higher

License

Copyright (c) 2025 FireXCore, Author: Farbod Akvan

This extension is provided under a custom license that allows for personal and non-commercial use only. See the LICENSE.md file for full details.

Installation

1. Open VS Code
2. Press Ctrl+P to open the Quick Open dialog
3. Type ext install smart-autocss and press Enter
4. Click Install to install the extension

Building from Source

1. Clone the repository: git clone https://github.com/FireXCore/smart-autocss.git
2. Navigate to the directory: cd smart-autocss
3. Install dependencies: npm install
4. Compile the extension: npm run compile
5. Package the extension: npm run package

Extension Development

• Press F5 to open a new window with your extension loaded
• Set breakpoints in your code for debugging
• Find output from your extension in the debug console

Release Notes

1.0.0

Initial release of Smart AutoCSS:

• Extract inline styles from HTML elements
• Find and extract related styles from project CSS files
• Generate organized CSS file with comments
• Avoid duplicates when appending to existing files