Auto CSS Class/ID Generator

See CHANGELOG.md for full details.

Automatically creates CSS selectors for new classes and ids typed in HTML, CSS-in-JS, and more—updating or creating CSS files as needed.

Usage Examples

HTML Example

<div class="my-class" id="main"></div>
<span class="custom-span"></span>

React (styled-components) Example

import styled from "styled-components";
const Button = styled.button`
  .my-btn {
    color: red;
  }
  #main-btn {
    background: blue;
  }
`;

React (emotion) Example

import { css } from "@emotion/react";
const style = css`
  .emotion-class {
    margin: 0;
  }
  #emotion-id {
    padding: 1rem;
  }
`;

Custom CSS Example

.my-class {

## Duplicate Selector Handling
#main {

The extension automatically removes duplicate selectors before writing to your CSS file, ensuring each selector appears only once.

1. Open your project folder in VS Code.
2. Create or open an HTML file and add class or id attributes, or add CSS-in-JS blocks in JS/TS/JSX/TSX files.
3. Save the file.
4. The extension will prompt you to create or select a CSS file and add any new selectors.

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

• Prompts only on save (by design for performance).
• 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.
• CSS-in-JS selector extraction supports styled-components and emotion blocks; other libraries may require future updates.

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)
• JS (.js) [CSS-in-JS]
• TS (.ts) [CSS-in-JS]

Release Notes

Q: What file types are supported? A: HTML, HTM, EJS, PHP, Twig, ERB, Vue, JSX, TSX, JS, and TS (including CSS-in-JS blocks).

Auto CSS Class/ID Generator

[Screenshot Placeholder: Add a GIF or image here]

Popup Behavior Update: The extension now shows the confirmation popup only once per file per session. Subsequent saves update your CSS file silently in the background for a smoother workflow.

Instantly generate and sync CSS selectors from HTML, React, and CSS-in-JS. Save time, avoid duplicates, and boost your workflow!

Features

• Auto-generates CSS selectors for new classes/ids in HTML, React, and CSS-in-JS
• Syncs selectors to your CSS file automatically or manually
• Batch/manual sync for multi-file projects
• Smart diffing: avoids duplicate selectors
• Preview selectors before updating CSS
• Supports styled-components, emotion, and more
• Customizable selector template
• Accessibility and error handling
• Fast performance (debounced sync, caching)

Quick Usage

1. Add new classes or ids in your HTML, React, or CSS-in-JS files
2. Save the file
3. Extension prompts to update or create a CSS file
4. Review and confirm new selectors in the preview

Manual Sync: Run Auto CSS: Sync Selectors from the Command Palette

Batch Sync: Run Auto CSS: Batch Sync Selectors to update multiple files at once

Settings (in VS Code)

• defaultCssFile: Default CSS file for selector updates
• customCssFilePaths: List of CSS files to choose from
• selectorTemplate: Customize generated selector format
• ignoreSelectors: Patterns to exclude selectors
• autoRemoveUnusedSelectors: Remove unused selectors during sync
• stylelintEnabled: Lint selectors before saving

Comparison

More Info

• See CHANGELOG.md for updates
• For advanced usage, settings, and troubleshooting, see the FAQ below

FAQ & Advanced

(Add common questions, advanced settings, and troubleshooting tips here)