Disallow or gracefully handle CSS selectors with hyphens (ie. ".main--red")

[silbinarywolf]

The problem
If you use hypens in your CSS selectors, it will generate a *.d.ts file that has compilation errors.
For example, the following SCSS file:

.main {
  border: 1px solid black;

  &--red {
    border-color: red;
  }
}

becomes:

// This file is automatically generated.
// Please do not change this file!
export const main: string;
export const main--red: string; // ERROR ON THIS LINE

The solution
At the very least, I think this tool should probably throw some kind of error. I'm not keen on the idea of making it transform into an identifier that doesn't map 1-1 with the original CSS selector name.

EDIT: I'd be interested to know what conventions you guys follow if it isn't BEM, ie. slight permutations on an element, such as it having an alternate color or skin.

[silbinarywolf]

After re-reading the README, this might not be an issue when you're developing with a Webpack console window open.

Feel free to close if you guys think adding your own error handling is redundant or out-of-scope here

[JiarongGu]

this really should remove the main--red instead of output it to file. I saw this issu and no reply, so I made my own type loader from this idea.

[markdalgleish]

Our (current) philosophy is that we shouldn’t modify your classes in any way. If it’s something that TypeScript doesn’t allow, TypeScript should tell you—otherwise we’ll need to bloat up this loader with duplicated logic for detecting invalid identifiers.

[JiarongGu]

Use css-loader with option camelCase actually convert the main--red to 2 set of keys mainRed and main--red, which both link to the same style. I did not mean to modify the existing class, but it should not be exported as a type file because its invaild TypeScript. You can access to the style with styles['main--red'] anyway without the type. for some people like to follow BEM pattern this should be acceptable or as a configuration.
The camelCase convertion css-loader using is https://github.com/sindresorhus/camelcase

[bushee]

I've just proposed PR #9 which addresses this issue.