Add CSS Modules support to webpack config

[tomaash]

CSS modules in TypeScript work as follows:

• import styles
  const style = require('./Home.module.css')

• use in JSX
  <div className={style.App}/>

This is not a breaking change, as it prefixes classes only for CSS files that follow file naming convention of *.module.css

Actual config taken from https://github.com/ro-savage/react-scripts-cssmodules so it has actually been tested elsewhere as well. To test my change, just create react app with this fork, and try to use CSS Modules syntax. If styling is applied, then it works.

We could have a more typescript-like css import support, but that would require adding an extra package https://github.com/Jimdo/typings-for-css-modules-loader .. I figured, let's get an easy barebones support merged first.

I published this version on NPM already as https://www.npmjs.com/package/react-scripts-ts-cm
I also have a working example app created with it here: https://github.com/tomaash/react-scripts-ts-cm-test

[tomaash]

Actually, this is being tentatively added to create-react-app itself, so I guess we can just wait when it lands there: facebook/create-react-app#2285

[Jack-Works]

Maybe we can make it further, see https://github.com/Quramy/typed-css-modules

[christikaes]

We should definitely add https://github.com/Jimdo/typings-for-css-modules-loader once we have css-modules. It's a drop in replacement for css-loader and generate TypeScript typings for CSS modules on the fly.

In the mean time I've created a fork of this that has the CSS Modules support + typings for css modules (Types for CSS are awesome!) https://www.npmjs.com/package/react-scripts-ts-css

[tomaash]

Closed in favor of: #197

[tomaash]

@christinakayastha Your PR lacks the support for compiling only .module.css files with css-modules. I fixed that in #197

[christikaes]

Nice! Good call (:

[tomaash]

Still, your fork is much more complete. If you adopted this .module recognition from my patch, I'd use it.

[tomaash]

Actually, there are multiple problems with the typings. They make css cross-dependent with typescript compilation, with leads to multiple issues (errors when you ignore d.ts to have hot reload) and also the need to keep the generated d.ts in the repo, as the yarn build does not pick them up the first time. I reverted to just using this vscode extension: https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules

[christikaes]

Oh cool I didn't know about that extension.

Yea after using it for a bit, I don't like having to keep the .d.ts files. (when you use sass you have: .scss -> .css -> .css.d.ts which is a bit much...)

[tomaash]

@christinakayastha I also discovered a more elegant way of making changes to create-react-app setup - using monkey patching :)
I use react-app-rewired and now my addons to react-scripts webpack are in a plugin. Much better!