Repository: create-react-app
Issue: Support css.myClass conversion to css['my-class']
Labels: issue: proposal,needs triage

## Background

Was reading Dan's comment: https://github.com/facebook/create-react-app/issues/99#issuecomment-234657710 and I think there's a valid specific override that could be useful.
As you'll see, it's too much code for a simple task that feels like it should be supported out of the box.

## Is your proposal related to a problem?

<!--
  Provide a clear and concise description of what the problem is.
  For example, "I'm always frustrated when..."
-->

When using CSS modules I have to either reference classes using bracket notation `css['my-class']` (which can impact readability for more complex accessors)
```jsx
<p className={css['my-class']} />
```
```css
.my-class { /* <<< */
  color: red;
}
```

<br />

Or I can use dot notation `css.myClass`. BUT **my CSS rule should also be camelCase**
```jsx
<p className={css.myClass} />
```
```css
.myClass { /* <<< */
  color: red;
}
```

<br />

And if I use dot notation `css.myClass` in JSX
```jsx
<p className={css.myClass} />
```
and kebab-case in CSS
```css
.my-class {
  color: red;
}
```
Then styles are not applied.

## Describe the solution you'd like

<!--
  Provide a clear and concise description of what you want to happen.
-->

Maybe we could have some sort of webpack overrides in package.json for specific use cases, such as `exportLocalsConvention: 'camelCase'` for css-modules. (I didn't give it too much thought, it's just a quick suggestion)

```json
{
  "react-scripts": {
    "webpack": {
      "css-modules": {
        "exportLocalsConvention": "camelCase"
      }
    }
  }
}
```

Something similar to jest's property in package.json
```json
{
  "jest": {
       "resetMocks": false
   }
}
```

## Describe alternatives you've considered

### Alternative 1
<!--
  Let us know about other solutions you've tried or researched.
-->

I tried [rewire](https://github.com/jhnns/rewire).
I created a file called build.js at root level, with this content:
```js
const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

const cssModulesOptions =
    config.module.rules[1].oneOf.at(-4).use[1].options.modules;
config.module.rules[1].oneOf.at(-4).use[1].options.modules = { // try to ignore that I'm accessing with `at(-4)` and not a smarter lookup, because it's just to simplify the example here and get the point accross.
    ...cssModulesOptions,
    exportLocalsConvention: 'camelCase',
};
```
Then in my package.json, I replaced `react-scripts build` by `node ./build.js`

That worked, but only for production builds.
When running a development version (`yarn dev`) the development CSS code doesn't convert to kebab-case. That's because `yarn dev` uses `react-scripts start` which in turn uses the original webpack config.

One solution to this development issue might be to use rewire-webpack ([as rewire's README suggests](https://github.com/jhnns/rewire)) but I haven't tried that yet.

### Alternative 2

Ejecting works fine too, but then you'd open pandora's box.