CSS Selectors using hyphens aren't compile-time checked due to square bracket access about css-modules-typescript-loader HOT 5 OPEN

The following alternate generated syntax will give compile-time errors with hyphen values.

// This file is automatically generated.
// Please do not change this file!
const enum CssExports {
	'item' = 'item',
	'list' = 'list',
	'root' = 'root',
	'text' = 'text',
	'text--small' = 'text--small',
	'title' = 'title',
	'title--small' = 'title--small',
}
declare const cssExports: typeof CssExports;
export = cssExports;

[tsl] ERROR in C:\javascript\my-component.tsx(28,33)
      TS2339: Property 'titlae--small' does not exist on type 'typeof CssExports'.

Potential problems

• const enum can have problems with isolatedModules
  • babel/babel#8741

from css-modules-typescript-loader.

@jahredhope I'm happy to make a PR + tests if you guys are willing to accept it.
If I put in the effort will this get merged?

from css-modules-typescript-loader.

I explored this option and it can fail in cases where users simply passed the entire styles variable to another value.

ie. we're utilizing this in a project using Aurelia (with an aim to move slowly to React), so for our Aurelia components, we can't expose the CSS modules object to the templater of that particular framework.

@autoinject
@useView(PLATFORM.moduleName('./my-component.html'))
export class MyComponent  {
	private readonly styles = styles;
}

I'm going to close this.

from css-modules-typescript-loader.

Nevermind, I think I have a nice solution / patch to this problem.
We just define an index signature that returns void.

For example:

// This file is automatically generated.
// Please do not change this file!
interface CssExports {
  [key: string]: void; // <- this makes typos give you an error
  'orb': string;
  'orb-active-user': string;
  'orb-exited-user': string;
  'orb-list': string;
}
declare const cssExports: CssExports;
export = cssExports;

ERROR in components\entity-search\entity-search.tsx
components/entity-search/entity-search.tsx
[tsl] ERROR in components\entity-search\entity-search.tsx(945,7)
      TS2322: Type 'void' is not assignable to type 'string'.

from css-modules-typescript-loader.

This approach has problems as pointed out by @MattsJones in his comment:
#29 (comment)

Needs further investigation.

from css-modules-typescript-loader.