Quickly view and edit CSS declarations in a popup by hovering or clicking on className attributes in React files. Boost your workflow with instant style previews!
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Fast CSS Edit is a Visual Studio Code extension designed to streamline and simplify the process of editing CSS class definitions directly from React component files. It enables developers to quickly navigate and modify CSS styles associated with class names in JSX or TSX files without switching between multiple files.
Inspired by the popularity of Tailwind CSS, which is loved for its practicality and the ability to quickly edit styles without switching between CSS files, this extension aims to fill a similar gap by providing fast and easy CSS editing directly within React components.
Direct CSS Editing from React Components
Hover over a CSS class name in a React component's className attribute to view its CSS definition in a popup.
Edit the CSS rule directly within the popup for quick adjustments.
Seamless Style File Detection
Automatically detects the relevant CSS or CSS module file based on import statements or naming conventions:
If a CSS file is imported, it uses the last imported CSS file as the style source.
If multiple CSS files are imported, the last imported file is used.
If no CSS file is imported, it falls back to a style file named after the component (configurable).
Supports mixed usage of CSS and CSS modules, correctly resolving class names.
Code Lens for Quick Navigation and Editing
Use Ctrl+Click on a CSS class name to jump directly to its definition in the style file.
If the class does not exist, it will be created at the end of the style file and the editor will scroll to it.
CSS Class Deletion Shortcut
Press Ctrl+Shift+D to delete a CSS class from the component's className attribute and remove its definition from the style file, ensuring clean and maintainable styles.
Configurable Class Name Detection
Supports different class name patterns for CSS, Sass, SCSS, and CSS modules.
Users can configure regex or other patterns to match their preferred coding style.
Usage
Open a React component file (.jsx or .tsx) with CSS classes in the className attribute.
Hover over a class name to see its CSS rule in a popup with an option to delete the class.
Use Ctrl+Click on a class name to jump to or create its CSS definition in the style file.
Use Ctrl+Shift+D to delete a class from both the component and the style file.
Configuration
Style File Naming Convention
Configure the default style file name pattern used when no CSS import is found.
CSS Module Identifier
Configure the identifier used for CSS modules (e.g., styles).
Example
// src/components/button/index.jsx
import styles from "./index.module.css";
export default function Button(props) {
return <button className={`base-button ${styles.btn}`} {...props} />;
}
