Bidirectionally connects TSX / JSX and CSS Modules. Place your cursor on one side, and its counterpart on the other side is highlighted automatically.
Features
TSX / JSX → CSS: Place the cursor inside a JSX element to highlight its className references and their definitions in the imported .module.css / .module.scss files.
CSS → TSX / JSX: Place the cursor on a .foo class definition to highlight references in a visible TSX / JSX document that imports that CSS Module.
Hover preview 🔍: Hovering styles.foo in TSX / JSX shows the matching CSS Module rule body in a popup. Works even when the CSS file is not open.
Go to Definition 🎯: Ctrl+Click (or F12) on styles.foo in TSX / JSX jumps to the .foo declaration in the imported CSS / SCSS file.
Overview ruler marker: Even when matches are off-screen, markers on the right side of the scrollbar show their location.
⚠️ Bidirectional highlighting only works when the counterpart file is already open in a visible editor (it does not open files automatically). The most natural setup is to keep both files side by side in a Split Editor. Hover and Go to Definition work even when the counterpart is closed.
Supported Patterns
import styles from './Button.module.css'; // or .module.scss
import theme from '../shared/Theme.module.scss';
// Highlights trigger when the cursor is on the patterns below
<div className={styles.container}>
<button className={styles.primaryBtn}>
<span className={`${styles.icon} ${styles.active}`}>
<div className={styles['with-dash']}>
<div className={`${styles.container} ${theme.surface}`}>
// Same behavior when the cursor is on the CSS Module side
.container { /* ... */ }
.primaryBtn { /* ... */ }
Settings
Setting
Default
Description
cssClasscope.highlightColor
rgba(255, 200, 0, 0.3)
Highlight color (used for background, outline, and overview ruler)
How it works
JSX analysis uses the innermost element's own className attribute. It ignores comments, string contents and references to locally shadowed import names.
CSS / SCSS analysis skips comments and quoted strings, so braces inside declarations do not truncate hover previews.
Files are connected through actual relative default imports, including imports in other directories and multiple CSS Modules. From CSS, the first visible importing TSX document is preferred over JSX; all split views of the selected documents are updated.
Each visible document is indexed and the index is reused for cursor movement while the document is unchanged, so highlighting stays responsive in large files. Edits refresh the highlights after a short debounce.
Requirements
VS Code ^1.109.0
TSX (.tsx) or JSX (.jsx) source files
For bidirectional highlighting, keep both files open in visible editors (Hover / Go to Definition work even when closed).
Known Limitations
Only relative default imports such as import styles from './Button.module.css' or ../shared/Theme.module.scss are resolved. Named imports, re-exports and path aliases are not supported.
Static property access (styles.foo) and string bracket access (styles['foo']) are recognized. Computed class names and values passed indirectly through variables are not evaluated.
CSS / SCSS scanning does not compile Sass: interpolated selector names, parent-selector suffix expansion (&-suffix) and generated classes are not resolved.
Only .tsx and .jsx extensions are scanned (plain .ts / .js are not supported).
Plain CSS outside of CSS Modules is out of scope.
Development
See README_DEV.md for build, test, benchmark and release notes.
