VSCode CSS Modules

VSCODECSSMODULES

VSCODECSSMODULES is a VSCode extension that provides autocompletion, hover information, and go-to-definition support for CSS Modules in JavaScript and TypeScript projects.

Features

• Autocomplete: Suggests CSS class names from .module.css files when using styles. in JavaScript and TypeScript files.
• Hover Information: Shows the originating CSS file when hovering over a class name.
• Go-to Definition: Allows navigation to the exact line where a CSS class is defined in a .module.css file.

Usage

• Ensure your project uses CSS Modules with .module.css files.
• Use styles.className in your JavaScript/TypeScript files to trigger IntelliSense.
• Hover over a class name to see its file location.
• Use Ctrl + Click (or Cmd + Click on macOS) to jump to the class definition.

Roadmap

Upcoming Features

• Support for Additional Frameworks

  • Vue (*.module.scss, *.module.less support)
  • Svelte (*.module.css in svelte components)
  • Angular (styles.module.css in component styles array)

• Enhanced Import Support

  • Dynamic imports (e.g., import("./styles.module.css"))
  • Alias imports (support for webpack and TypeScript path aliases)

• Performance Improvements

  • Optimized file scanning for large projects
  • Caching frequently used class names

• Configuration Options

  • Enable/disable features individually
  • Customizable CSS class detection rules

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request with enhancements or bug fixes.

License

MIT License