Class Link

Navigate and refactor BEM CSS classes across React TSX components and SCSS modules.

Class Link connects your component markup, typed cls helper, and .module.scss styles into one workflow: jump to definitions, find references, rename symbols in sync, scaffold new components, and add BEM blocks and elements without leaving the editor.

Features

Cross-file navigation

• Go to Definition — jump from cls usage in TSX to the matching selector in the SCSS module.
• Find All References — list every TSX and SCSS occurrence of a BEM block, element, or modifier.
• Rename — rename a class across TSX and SCSS in one operation.

Works in both directions: from TSX (cls.block().element()) and from SCSS selectors.

Component scaffolding

Right-click a folder in the Explorer and choose New Component... to generate:

BEM class editing

With the cursor on a JSX element, use the editor context menu:

• New Class Name... — create a new BEM block or element. The extension updates TSX, inserts the SCSS rule, and opens the stylesheet beside your component.
• Select Class Name... — pick an existing block or element from the SCSS module and apply it to the selected JSX element.

Auto-generated cls types

When a .module.scss file changes, Class Link regenerates the companion .styles.ts file so the cls helper stays in sync with your class names.

Customizable templates

Run Class Link: Edit Template from the Command Palette to customize the files created for new components. Templates are stored in .vscode/class-link/ and support these placeholders:

Expected project layout

Class Link assumes a co-located component structure:

MyComponent/
├── index.ts
├── MyComponent.tsx
├── MyComponent.module.scss
└── MyComponent.styles.ts

TSX files use a cls helper imported from the .styles.ts file:

import { cls } from './MyComponent.styles';

export const MyComponent: React.FC = () => (
	<div className={cls.myComponent.block()}>Hello</div>
);

The SCSS module uses standard BEM naming:

.my-component {
	/* block */
}

.my-component__title {
	/* element */
}

.my-component--active {
	/* modifier */
}

Requirements

• A workspace with package.json (the extension activates when one is present).
• tsconfig.json in the workspace root (used for TSX parsing).
• @andreyskn/bem in your project for the generated .styles.ts files.

Commands

Known limitations

• Modifier creation from the context menu is not yet supported.
• New Class Name / Select Class Name require the cursor to be on a line containing JSX.

Development

npm install
npm run compile   # type-check, lint, and bundle
npm run watch     # rebuild on change
npm test          # run extension tests

Press F5 in VS Code to launch an Extension Development Host.

License

MIT