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
clsusage 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:
| File | Purpose |
|---|---|
ComponentName.tsx |
React component with cls wired up |
ComponentName.module.scss |
SCSS module with an initial block |
ComponentName.styles.ts |
Typed cls export via @andreyskn/bem |
index.ts |
Barrel re-export |
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:
| Variable | Description |
|---|---|
{{COMPONENT_NAME}} |
React component name (PascalCase) |
{{COMPONENT_CLASS_NAME}} |
CSS class name (camelCase in TSX, kebab-case in SCSS) |
{{CLASS_NAMES_TYPE}} |
TypeScript Record of class names from the SCSS file |
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.jsonin the workspace root (used for TSX parsing).@andreyskn/bemin your project for the generated.styles.tsfiles.
Commands
| Command | Description |
|---|---|
| New Component... | Scaffold a new component in the selected folder (Explorer context menu) |
| New Class Name... | Add a BEM block or element to the selected JSX element |
| Select Class Name... | Apply an existing class from the SCSS module to the selected JSX element |
| Class Link: Edit Template | Open and edit component file templates |
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.