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

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.

[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

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