Kebab case support for CSS selectors
- Dominant language
- TypeScript
- Stars
- 9
- Forks
- 28
- PR merge metrics
- No merged PRs in 30d
Description
**Enhancement**
Package Version: 4.0.0
**Code**
`widget.m.css`
```css
.selecter-1 { }
.selecter2 { }
```
`widget.m.css.d.ts`
```typescript
export const selecter2: string;
```
**Expected behavior:**
A type definition should be generated for `.selector-1`.
**Actual behavior:**
Currently `.selector-1` is ignored and no type definition is generated.
**Suggestion**
This would be a **breaking change**, but would solve this issue without having to convert the names to something else (and potentially causing conflicts).
Instead of the current definition files that are generated:
```typescript
export const selecter2: string;
```
You generate a class with static members. These can be defined with quotes around them, allowing for kebab case.
```typescript
export default class css {
static 'selector-1': string;
static selector2: string;
}
```
Imports for the CSS would be where the **breaking change** occurs. You would need to change the import from:
```typescript
import * as css from '../styles/widget.m.css';
```
to:
```typescript
import css from '../styles/widget.m.css';
```
But the type check will still work.
* css['selector-1'] - `Valid`
* css.selector2 - `Valid`
* css['selector-n'] - `Property 'selector-n' does not exist on type 'typeof css'.`
Contributor guide
Assessment
This issue has not been assessed yet.