Auto CSS Class/ID Generator
Automatically creates CSS selectors for new classes and ids typed in HTML files, updating or creating CSS files as needed.
Features
- Automatically creates CSS selectors for new classes and ids in HTML, HTM, EJS, PHP, Twig, ERB, Vue, JSX, and TSX files.
- Prompts to create or select a CSS file if none exists in the workspace folder.
- Updates existing CSS files with new selectors, avoiding duplicates.
- Customizable selector template via settings.
- Manual sync command in Command Palette.
- Settings for default CSS file, auto-select last used file, custom CSS file paths, and ignore selector patterns.
- Multi-root workspace support: CSS file selection and creation is scoped to the active folder.
- Debounced sync for performance.
- Selector preview before updating CSS file.
- Enhanced error handling and user feedback via notifications.
- Accessibility improvements for prompts.
- Unit tests for core logic.
Usage
- Open your project folder in VS Code.
- Create or open an HTML file and add class or id attributes.
- Save the HTML file.
- The extension will prompt you to create or select a CSS file and add any new selectors.
Auto-create CSS selectors
- Create or edit a supported file (e.g.,
index.html).
- Add new classes or ids in your markup.
- Save the file.
- The extension will prompt you to select or create a CSS file (if none exists in the folder).
- New selectors are added to the CSS file automatically.
Manual Sync
- Open the Command Palette (
Ctrl+Shift+P or Cmd+Shift+P).
- Run
Auto CSS: Sync Selectors to manually update the CSS file with selectors from the current document.
Customization
- Go to VS Code settings and search for
autoCssClassIdGenerator.
- Set your selector template, default CSS file, custom CSS file paths, and ignore selector patterns as needed.
Multi-root Workspace
- Add multiple folders to your workspace.
- The extension will prompt/select CSS files only from the active folder and create new ones there if needed.
Requirements
- VS Code workspace must be opened as a folder (not just a single file)
Extension Settings
The extension can be customized via the following settings:
autoCssClassIdGenerator.selectorTemplate: Customize the format of generated CSS selectors.autoCssClassIdGenerator.defaultCssFile: Set a default CSS file for selector updates.autoCssClassIdGenerator.customCssFilePaths: Specify custom CSS file paths for selector updates.autoCssClassIdGenerator.ignoreSelectors: Patterns to exclude selectors from being added.autoCssClassIdGenerator.autoSelectLastUsedFile: Automatically select the last used CSS file for updates.
Selector Customization
You can customize the format of generated CSS selectors using the autoCssClassIdGenerator.selectorTemplate setting. Example:
"autoCssClassIdGenerator.selectorTemplate": "${selector} {\n /* Add your styles here */\n}"
The ${selector} variable will be replaced with the class or id selector.
Duplicate Selector Handling
The extension automatically removes duplicate selectors before writing to your CSS file, ensuring each selector appears only once.
Ignore Selectors
You can specify patterns in the autoCssClassIdGenerator.ignoreSelectors setting to exclude selectors from being added to CSS files. Supports wildcards (e.g. .ignore-*, #skipme).
Known Issues
Known Issues
- Prompts only on save (by design for performance).
- Does not support auto-generation for inline
<style> tags or CSS-in-JS.
- Some templating languages (e.g., custom frameworks) may not be detected if not listed in Supported File Types.
- Automated integration tests are not included due to VS Code workspace file access limitations; manual testing is recommended.
Supported File Types
The extension now works with the following file types:
- HTML (.html)
- HTM (.htm)
- EJS (.ejs)
- PHP (.php)
- Twig (.twig)
- ERB (.erb)
- Vue (.vue)
- JSX (.jsx)
- TSX (.tsx)
Release Notes
See CHANGELOG.md for a complete version history.
Semantic Versioning
This extension follows semantic versioning. Major, minor, and patch versions will be updated as features and fixes are added.
Extension Guidelines
See Extension Guidelines for best practices.
Testing
Unit Testing
Run npm test to execute automated unit tests for selector extraction and CSS update logic.
Manual Integration Testing
- Open a workspace in VS Code.
- Create or edit HTML, PHP, Vue, JSX, or TSX files.
- Save the file and verify the extension prompts, creates, and updates the CSS file as expected.
- Test the manual sync command from the Command Palette.
- Check that settings (selector template, default CSS file) work as intended.
Automated integration tests have been removed due to workspace file access limitations in the test runner. Manual integration testing is recommended for VS Code extensions.
User Feedback
The extension now provides notifications for errors and successful CSS updates, improving clarity and user experience.
Sync operations are now debounced to optimize performance and prevent redundant file updates during rapid saves.
Custom CSS File Location
You can specify a list of CSS file paths in the extension settings (autoCssClassIdGenerator.customCssFilePaths). When set, you will be prompted to choose which file to update with new selectors.
