Kebab case support for CSS selectors

[KaneFreeman]

Enhancement

Package Version: 4.0.0

Code

widget.m.css

.selecter-1 { }

.selecter2 { }

widget.m.css.d.ts

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:

export const selecter2: string;

You generate a class with static members. These can be defined with quotes around them, allowing for kebab case.

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:

import * as css from '../styles/widget.m.css';

to:

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'.