Adding prefix option

README.md

@@ -58,6 +58,23 @@ Instead of emitting new TypeScript declarations, this will throw an error if a g
 
 This workflow is similar to using the [Prettier](https://github.com/prettier/prettier) [`--list-different` option](https://prettier.io/docs/en/cli.html#list-different).
 
+### Prefix
+
+It is possible to customize generated interface name with prefix.
+
+For example:
+
+```js
+{
+  loader: 'css-modules-typescript-loader',
+  options: {
+    prefix: 'I'
+  }
+}
+```
+
+will generate `ICssModules` interface name.
+
 ## With Thanks
 
 This package borrows heavily from [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader).

index.js

@@ -6,7 +6,7 @@ const LineDiff = require('line-diff');
 const bannerMessage =
   '// This file is automatically generated.\n// Please do not change this file!';
 
-const cssModuleExport = 'declare const cssExports: CssExports;\nexport = cssExports;\n';
+const cssModuleExport = (prefix) => `declare const cssExports: ${prefix}CssExports;\nexport = cssExports;\n`;
 
 const getNoDeclarationFileError = ({ filename }) =>
   new Error(
@@ -21,13 +21,13 @@ const getTypeMismatchError = ({ filename, expected, actual }) => {
   );
 };
 
-const cssModuleToInterface = (cssModuleKeys) => {
+const cssModuleToInterface = (cssModuleKeys, prefix) => {
   const interfaceFields = cssModuleKeys
     .sort()
     .map(key => `  '${key}': string;`)
     .join('\n');
 
-  return `interface CssExports {\n${interfaceFields}\n}`;
+  return `interface ${prefix}CssExports {\n${interfaceFields}\n}`;
 };
 
 const filenameToTypingsFilename = filename => {
@@ -68,7 +68,7 @@ module.exports = function(content, ...rest) {
   const { failed, success } = makeDoneHandlers(this.async(), content, rest);
 
   const filename = this.resourcePath;
-  const { mode = 'emit' } = loaderUtils.getOptions(this) || {};
+  const { mode = 'emit', prefix = '' } = loaderUtils.getOptions(this) || {};
   if (!validModes.includes(mode)) {
     return failed(new Error(`Invalid mode option: ${mode}`));
   }
@@ -88,7 +88,7 @@ module.exports = function(content, ...rest) {
     }
   }
 
-  const cssModuleDefinition = `${bannerMessage}\n${cssModuleToInterface(cssModuleKeys)}\n${cssModuleExport}`;
+  const cssModuleDefinition = `${bannerMessage}\n${cssModuleToInterface(cssModuleKeys, prefix)}\n${cssModuleExport(prefix)}`;
 
   if (mode === 'verify') {
     read((err, fileContents) => {

test/verify-prefix-declaration/__snapshots__/verify-prefix-declaration.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should have prefixed interface name 1`] = `
+"// This file is automatically generated.
+// Please do not change this file!
+interface ICssExports {
+  'hyphened-classname': string;
+  'otherClass': string;
+  'someClass': string;
+  'underscored_classname': string;
+  'validClass': string;
+}
+declare const cssExports: ICssExports;
+export = cssExports;
+"
+`;

test/verify-prefix-declaration/index.css

@@ -0,0 +1,16 @@
+.validClass {
+  position: relative;
+}
+
+.someClass {
+  position: relative;
+}
+
+.otherClass {
+  display: block;
+}
+
+.hyphened-classname,
+.underscored_classname {
+  color: papayawhip;
+}

test/verify-prefix-declaration/index.css.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface ICssExports {
+  'hyphened-classname': string;
+  'otherClass': string;
+  'someClass': string;
+  'underscored_classname': string;
+  'validClass': string;
+}
+declare const cssExports: ICssExports;
+export = cssExports;

test/verify-prefix-declaration/index.js

@@ -0,0 +1 @@
+import styles from './index.css';

test/verify-prefix-declaration/verify-prefix-declaration.test.js

@@ -0,0 +1,17 @@
+const fs = require('fs');
+const compiler = require('../compiler.js');
+
+test('Should have prefixed interface name', async () => {
+  expect.assertions(1);
+
+  await compiler(require.resolve('./index.js'), {
+    prefix: 'I'
+  });
+
+  const declaration = fs.readFileSync(
+    require.resolve('./index.css.d.ts'),
+    'utf-8'
+  );
+
+  expect(declaration).toMatchSnapshot();
+});