Skip to content

Support kebab-case to camelCase transform for completions and diagnostics #192

Description

@Blackpinned

Currently the extension supports both kebab-case and camelCase selectors independently, but doesn't handle the common pattern of writing kebab-case in CSS and consuming it as camelCase in TSX.

For example:

/* styles.module.css */
.my-wrapper { ... }
// component.tsx
styles.myWrapper // not recognized - no autocomplete or diagnostics
styles['my-wrapper'] // works but loses type safety benefits

This transform is standard CSS modules behaviour and is supported by css-loader via localsConvention: "camelCaseOnly" and by typescript-plugin-css-modules via classnameTransform: "camelCaseOnly".
A setting like reactTsScss.classnameTransform: "camelCase" mirroring the typescript-plugin-css-modules options (asIs, camelCase, camelCaseOnly, dashes, dashesOnly) would make this extension a complete drop-in replacement for that plugin.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions