Merge pull request #21 from scriby/master

Fix an issue with imported CSS modules

Author: timse

src/index.js

@@ -40,7 +40,15 @@ module.exports = function(input) {
     const filename = this.resourcePath;
     const cssModuleInterfaceFilename = filenameToTypingsFilename(filename);
 
-    let cssModuleKeys = Object.keys(this.exec(content, this.resource));
+    const keyRegex = /"([^"]+)":/g;
+    let match;
+    const cssModuleKeys = [];
+
+    while (match = keyRegex.exec(content)) {
+      if (cssModuleKeys.indexOf(match[1]) < 0) {
+        cssModuleKeys.push(match[1]);
+      }
+    }
 
     let cssModuleDefinition;
     if (!query.namedExport) {

test/entry.ts

@@ -3,6 +3,7 @@ import {locals as stylesCamelCase} from './example-camelcase.css';
 import * as stylesNamedExport from './example-namedexport.css';
 import * as stylesCamelCasedNamedExport from './example-camelcase-namedexport.css';
 import './example-no-css-modules.css';
+import * as compose from './example-compose.css';
 
 const foo = stylesBase.foo;
 const barBaz = stylesBase['bar-baz'];
@@ -15,3 +16,5 @@ const fooNamedExport = stylesNamedExport.foo;
 
 const fooCamelCaseNamedExport = stylesCamelCasedNamedExport.foo;
 const barBazCamelCaseNamedExport = stylesCamelCasedNamedExport.barBaz;
+
+const composed = compose.test;

test/example-compose.css

@@ -0,0 +1,3 @@
+.test {
+  composes: shared-style from './example-shared.css';
+}

test/example-shared.css

@@ -0,0 +1,3 @@
+.shared-style {
+  color: black;
+}

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

@@ -0,0 +1 @@
+export const test: string;

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

@@ -0,0 +1 @@
+export const sharedStyle: string;

test/webpack.config.babel.js

@@ -7,11 +7,12 @@ module.exports = {
   module: {
     loaders: [
       { test: /\.ts$/, loaders: ['babel', 'ts'] },
-      { test: /example.css$/, loader: '../src/index.js?modules' },
-      { test: /example-camelcase.css$/, loader: '../src/index.js?modules&camelCase' },
-      { test: /example-namedexport.css$/, loader: '../src/index.js?modules&namedExport' },
-      { test: /example-camelcase-namedexport.css$/, loader: '../src/index.js?modules&camelCase&namedExport' },
-      { test: /example-no-css-modules.css$/, loader: '../src/index.js' },
+      { test: /example\.css$/, loader: '../src/index.js?modules' },
+      { test: /example-camelcase\.css$/, loader: '../src/index.js?modules&camelCase' },
+      { test: /example-namedexport\.css$/, loader: '../src/index.js?modules&namedExport' },
+      { test: /example-camelcase-namedexport\.css$/, loader: '../src/index.js?modules&camelCase&namedExport' },
+      { test: /example-no-css-modules\.css$/, loader: '../src/index.js' },
+      { test: /example-compose\.css$/, loader: '../src/index.js?modules&camelCase&namedExport' }
     ]
   }
 };