dojo / dojo/cli-build-app

Kebab case support for CSS selectors

Open
#193 0 comments 0 reactions 0 assignees View on GitHub
discussion enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.