Merge pull request olegstepura#9 from Zalastax/PR-3

Emit exports.locals and update README

Author: timse

README.md

@@ -55,6 +55,8 @@ export const foo: string;
 export const barBaz: string;
 ```
 
+ `css-loader` exports mappings to `exports.locals` which is incompatible with the `namedExport`-option unless paired with `extract-text-webpack-plugin` or `style-loader`. They move the exported properties from `exports.locals` to `exports` making them reuired for `namedExport` to work, and `namedExport` required for them to work. *Always combine usage of `extract-text-webpack-plugin` or `style-loader` with the `namedExport`-option.*
+
 ## Usage
 
 Keep your `webpack.config` as is just instead of using `css-loader` use `typings-for-css-modules-loader`

src/cssModuleToInterface.js

@@ -47,8 +47,7 @@ export const generateGenericExportInterface = (cssModuleKeys, filename, indent)
 `export interface ${interfaceName} {
 ${interfaceProperties}
 }
-declare const styles: ${interfaceName};
 
-export default styles;
+export const locals: ${interfaceName};
 `);
 };

test/entry.ts

@@ -1,5 +1,5 @@
-import stylesBase from './example.css';
-import stylesCamelCase from './example-camelcase.css';
+import {locals as stylesBase} from './example.css';
+import {locals as stylesCamelCase} from './example-camelcase.css';
 import * as stylesNamedExport from './example-namedexport.css';
 import * as stylesCamelCasedNamedExport from './example-camelcase-namedexport.css';
 

test/example-camelcase.css.d.ts

@@ -3,6 +3,5 @@ export interface IExampleCamelcaseCss {
   'bar-baz': string;
   'barBaz': string;
 }
-declare const styles: IExampleCamelcaseCss;
 
-export default styles;
+export const locals: IExampleCamelcaseCss;

test/expected-example-camelcase.css.d.ts

@@ -3,6 +3,5 @@ export interface IExampleCamelcaseCss {
   'bar-baz': string;
   'barBaz': string;
 }
-declare const styles: IExampleCamelcaseCss;
 
-export default styles;
+export const locals: IExampleCamelcaseCss;

test/expected-example.css.d.ts

@@ -2,6 +2,5 @@ export interface IExampleCss {
   'foo': string;
   'bar-baz': string;
 }
-declare const styles: IExampleCss;
 
-export default styles;
+export const locals: IExampleCss;