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
- Select a portion of HTML code in your editor
- Right-click and select "Extract Styles with Smart AutoCSS" from the context menu
- Wait for the extraction process to complete (a status bar will indicate progress)
- 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
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
- Open VS Code
- Press
Ctrl+P
to open the Quick Open dialog
- Type
ext install smart-autocss
and press Enter
- Click Install to install the extension
Building from Source
- Clone the repository:
git clone https://github.com/FireXCore/smart-autocss.git
- Navigate to the directory:
cd smart-autocss
- Install dependencies:
npm install
- Compile the extension:
npm run compile
- 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