diff --git a/README.md b/README.md
index 30a303c..44b349b 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,17 @@
 # babel-plugin-react-css-modules
 
-[![GitSpo Mentions](https://gitspo.com/badges/mentions/gajus/babel-plugin-react-css-modules?style=flat-square)](https://gitspo.com/mentions/gajus/babel-plugin-react-css-modules)
 [![Travis build status](http://img.shields.io/travis/gajus/babel-plugin-react-css-modules/master.svg?style=flat-square)](https://travis-ci.org/gajus/babel-plugin-react-css-modules)
 [![NPM version](http://img.shields.io/npm/v/babel-plugin-react-css-modules.svg?style=flat-square)](https://www.npmjs.org/package/babel-plugin-react-css-modules)
 [![Canonical Code Style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical)
 [![Gitter](https://img.shields.io/gitter/room/babel-plugin-react-css-modules/Lobby.svg?style=flat-square)](https://gitter.im/babel-plugin-react-css-modules/Lobby)
 [![Twitter Follow](https://img.shields.io/twitter/follow/kuizinas.svg?style=social&label=Follow)](https://twitter.com/kuizinas)
 
+> # Looking for maintainers
+>
+> This project is not actively maintained by the original author. However, I am happy to nominate new maintainers.
+> If you wish to contribute to `babel-plugin-react-css-modules`, please begin by raising PRs that fix existing issues.
+> PRs must pass CI/CD tests, include tests (if they change behavior or fix a bug), and include documentation.
+
 <img src='http://github.com/.README/babel-plugin-react-css-modules.png' height='150' />
 
 Transforms `styleName` to `className` using compile time [CSS module](#css-modules) resolution.
@@ -163,7 +168,7 @@ NODE_ENV=production ./test
 ## How does it work?
 
 1. Builds index of all stylesheet imports per file (imports of files with `.css` or `.scss` extension).
-1. Uses [postcss](https://github.com/postcss/postcss) to parse the matching CSS files.
+1. Uses [postcss](https://github.com/postcss/postcss) to parse the matching CSS files into a lookup of CSS module references.
 1. Iterates through all [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) element declarations.
 1. Parses the `styleName` attribute value into anonymous and named CSS module references.
 1. Finds the CSS class name matching the CSS module reference:
@@ -194,7 +199,7 @@ Configure the options for the plugin within your `.babelrc` as follows:
 |`context`|`string`|Must match webpack [`context`](https://webpack.js.org/configuration/entry-context/#context) configuration. [`css-loader`](https://github.com/webpack/css-loader) inherits `context` values from webpack. Other CSS module implementations might use different context resolution logic.|`process.cwd()`|
 |`exclude`|`string`|A RegExp that will exclude otherwise included files e.g., to exclude all styles from node_modules `exclude: 'node_modules'`|
 |`filetypes`|`?FiletypesConfigurationType`|Configure [postcss syntax loaders](https://github.com/postcss/postcss#syntaxes) like sugarss, LESS and SCSS and extra plugins for them. ||
-|`generateScopedName`|`?GenerateScopedNameConfigurationType`|Refer to [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names). If you use this option, make sure it matches the value of `localIdentName` in webpack config. See this [issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/108#issuecomment-334351241) |`[path]___[name]__[local]___[hash:base64:5]`|
+|`generateScopedName`|`?GenerateScopedNameConfigurationType`|Refer to [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names). If you use this option, make sure it matches the value of `localIdentName` [in webpack config](https://webpack.js.org/loaders/css-loader/#localidentname). See this [issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/108#issuecomment-334351241) |`[path]___[name]__[local]___[hash:base64:5]`|
 |`removeImport`|`boolean`|Remove the matching style import. This option is used to enable server-side rendering.|`false`|
 |`webpackHotModuleReloading`|`boolean`|Enables hot reloading of CSS in webpack|`false`|
 |`handleMissingStyleName`|`"throw"`, `"warn"`, `"ignore"`|Determines what should be done for undefined CSS modules (using a `styleName` for which there is no CSS module defined).  Setting this option to `"ignore"` is equivalent to setting `errorWhenNotFound: false` in [react-css-modules](https://github.com/gajus/react-css-modules#errorwhennotfound). |`"throw"`|
@@ -239,7 +244,7 @@ To add support for different CSS syntaxes (e.g. SCSS), perform the following two
   npm install postcss-scss --save-dev
   ```
 
-2. Add a filetype syntax mapping to the Babel plugin configuration
+2. Add a `filetypes` syntax mapping to the Babel plugin configuration. For example for SCSS:
 
   ```json
   "filetypes": {
@@ -249,7 +254,7 @@ To add support for different CSS syntaxes (e.g. SCSS), perform the following two
   }
   ```
 
-  And optionaly specify extra plugins
+  And optionally specify extra plugins:
 
   ```json
   "filetypes": {
@@ -262,7 +267,9 @@ To add support for different CSS syntaxes (e.g. SCSS), perform the following two
   }
   ```
 
-  Postcss plugins can have options specified by wrapping the name and an options object in an array inside your config
+  > NOTE: [`postcss-nested`](https://github.com/postcss/postcss-nested) is added as an extra plugin for demonstration purposes only. It's not needed with [`postcss-scss`](https://github.com/postcss/postcss-scss) because SCSS already supports nesting.
+
+  Postcss plugins can have options specified by wrapping the name and an options object in an array inside your config:
 
   ```json
     "plugins": [
@@ -490,3 +497,32 @@ To enable live reloading of the CSS:
 > Note:
 >
 > This is a [webpack](https://webpack.github.io/) specific option. If you are using `babel-plugin-react-css-modules` in a different setup and require CSS live reloading, raise an issue describing your setup.
+
+### I get a "Cannot use styleName attribute for style name '`[X]`' without importing at least one stylesheet." error
+
+First, ensure that you are correctly importing the CSS file following the [conventions](#conventions).
+
+If you are correctly importing but using different CSS (such as SCSS), this is likely happening because your CSS file wasn't able to be successfully parsed. You need to [configure a syntax loader](#configurate-syntax-loaders).
+
+### I get a "Could not resolve the styleName '`[X]`' error but the class exists in the CSS included in the browser.
+
+First, verify that the CSS is being included in the browser. Remove from `styleName` the reference to the CSS class that's failing and view the page. Search through the `<style>` tags that have been added to the `<head>` and find the one related to your CSS module. Copy the code into your editor and search for the class name.
+
+Once you've verified that the class is being rendered in CSS, the likely cause is that the `babel-plugin-react-css-modules` is unable to find your CSS class in the parsed code. If you're using different CSS (such as SCSS), verify that you have [configured a syntax loader](#configurate-syntax-loaders).
+
+However, if you're using a syntaxes such as [`postcss-scss`](https://github.com/postcss/postcss-scss) or [`postcss-less`](https://github.com/webschik/postcss-less), they do not compile down to CSS. So if you are programmatically building a class name (see below), webpack will be able to generate the rendered CSS from SCSS/LESS, but `babel-plugin-react-css-modules` will not be able to parse the SCSS/LESS.
+
+A SCSS example:
+
+```scss
+$scales: 10, 20, 30, 40, 50;
+
+@each $scale in $scales {
+  .icon-#{$scale} {
+    width: $scale;
+    height: $scale;
+  }
+  }
+```
+
+`babel-plugin-react-css-modules` will not receive `icon-10` or `icon-50`, but `icon-#{$scale}`. That is why you receive the error that `styleName` `"icon-10"` cannot be found.
diff --git a/src/conditionalClassMerge.js b/src/conditionalClassMerge.js
index 617599c..cb7bbf5 100644
--- a/src/conditionalClassMerge.js
+++ b/src/conditionalClassMerge.js
@@ -12,6 +12,7 @@ export default (
   classNameExpression: any,
   styleNameExpression: any,
 ): any => {
+  // classNameExpression ? (classNameExpression + ' ') : '' + styleNameExpression
   return binaryExpression(
     '+',
     conditionalExpression(
diff --git a/src/findMatchedFiletype.js b/src/findMatchedFiletype.js
new file mode 100644
index 0000000..b74a0b2
--- /dev/null
+++ b/src/findMatchedFiletype.js
@@ -0,0 +1,25 @@
+// @flow
+
+export default (sourceFilePath: string, filetypes: $ReadOnlyArray<string>): ?string => {
+  // Try to match as the RegExp pattern
+  for (const pattern of filetypes) {
+    if (!pattern.match(/^\.[a-z0-9A-Z]+?$/)) {
+      if (sourceFilePath.match(new RegExp(pattern))) {
+        return pattern;
+      }
+    }
+  }
+
+  const extensionDotIndex = sourceFilePath.lastIndexOf('.');
+
+  if (extensionDotIndex > -1) {
+    const extension = sourceFilePath.substr(extensionDotIndex);
+    const index = filetypes.indexOf(extension);
+
+    if (index > -1) {
+      return filetypes[index];
+    }
+  }
+
+  return null;
+};
diff --git a/src/getClassName.js b/src/getClassName.js
index 1bf05fb..823ce16 100644
--- a/src/getClassName.js
+++ b/src/getClassName.js
@@ -120,6 +120,7 @@ export default (styleNameValue: string, styleModuleImportMap: StyleModuleImportM
         return getClassNameFromMultipleImports(styleName, styleModuleImportMap, handleMissingStyleName);
       }
 
+      // There is only one imported CSS module file.
       const styleModuleMap: StyleModuleMapType = styleModuleImportMap[styleModuleImportMapKeys[0]];
 
       if (!styleModuleMap[styleName]) {
diff --git a/src/index.js b/src/index.js
index 305d941..477026b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,6 +15,7 @@ import requireCssModule from './requireCssModule';
 import resolveStringLiteral from './resolveStringLiteral';
 import replaceJsxExpressionContainer from './replaceJsxExpressionContainer';
 import attributeNameExists from './attributeNameExists';
+import findMatchedFiletype from './findMatchedFiletype';
 import createSpreadMapper from './createSpreadMapper';
 import handleSpreadClassName from './handleSpreadClassName';
 
@@ -130,12 +131,12 @@ export default ({
     return filename.match(new RegExp(exclude));
   };
 
+  // decide whether the import statement should be processed as CSS module
   const notForPlugin = (path: *, stats: *) => {
     stats.opts.filetypes = stats.opts.filetypes || {};
 
-    const extension = path.node.source.value.lastIndexOf('.') > -1 ? path.node.source.value.substr(path.node.source.value.lastIndexOf('.')) : null;
-
-    if (extension !== '.css' && Object.keys(stats.opts.filetypes).indexOf(extension) < 0) {
+    // @HACK
+    if (path.node.source.value.indexOf('babel-plugin-react-css-modules') === 0) {
       return true;
     }
 
@@ -145,7 +146,10 @@ export default ({
       return true;
     }
 
-    return false;
+    const filetypeKeys = Object.keys(stats.opts.filetypes);
+    filetypeKeys.push('.css');
+
+    return !findMatchedFiletype(filename, filetypeKeys);
   };
 
   return {
diff --git a/src/requireCssModule.js b/src/requireCssModule.js
index 0268a43..d77c25a 100644
--- a/src/requireCssModule.js
+++ b/src/requireCssModule.js
@@ -18,6 +18,7 @@ import type {
   GenerateScopedNameConfigurationType,
   StyleModuleMapType
 } from './types';
+import findMatchedFiletype from './findMatchedFiletype';
 import optionsDefaults from './schemas/optionsDefaults';
 
 type FiletypeOptionsType = {|
@@ -36,10 +37,9 @@ type OptionsType = {|
 |};
 
 const getFiletypeOptions = (cssSourceFilePath: string, filetypes: FiletypesConfigurationType): ?FiletypeOptionsType => {
-  const extension = cssSourceFilePath.substr(cssSourceFilePath.lastIndexOf('.'));
-  const filetype = filetypes ? filetypes[extension] : null;
+  const matchedKey = findMatchedFiletype(cssSourceFilePath, Object.keys(filetypes));
 
-  return filetype;
+  return matchedKey ? filetypes && filetypes[matchedKey] : null;
 };
 
 // eslint-disable-next-line flowtype/no-weak-types
diff --git a/src/resolveStringLiteral.js b/src/resolveStringLiteral.js
index b1d4f32..f62e42a 100644
--- a/src/resolveStringLiteral.js
+++ b/src/resolveStringLiteral.js
@@ -41,7 +41,6 @@ export default (
     } else {
       throw new Error('Unexpected attribute value:' + destinationAttribute.value);
     }
-
     path.node.openingElement.attributes.splice(path.node.openingElement.attributes.indexOf(sourceAttribute), 1);
   } else {
     sourceAttribute.name.name = destinationName;
diff --git a/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/bar.less b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/bar.less
new file mode 100644
index 0000000..6586489
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/bar.less	
@@ -0,0 +1,3 @@
+@color: #f00;
+
+.a {background-color: @color;}
diff --git a/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/bar.md.less b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/bar.md.less
new file mode 100644
index 0000000..6586489
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/bar.md.less	
@@ -0,0 +1,3 @@
+@color: #f00;
+
+.a {background-color: @color;}
diff --git a/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/input.js b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/input.js
new file mode 100644
index 0000000..25d6c7d
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/input.js	
@@ -0,0 +1,3 @@
+import './bar.md.less';
+
+<div styleName="a"></div>;
diff --git a/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/options.json b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/options.json
new file mode 100644
index 0000000..0e3777a
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/options.json	
@@ -0,0 +1,15 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]",
+        "filetypes": {
+          "\\.md\\.less$": {
+            "syntax": "postcss-less"
+          }
+        }
+      }
+    ]
+  ]
+}
diff --git a/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/output.js b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/output.js
new file mode 100644
index 0000000..e77b991
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves less stylesheets matching RegExp/output.js	
@@ -0,0 +1,5 @@
+"use strict";
+
+require("./bar.md.less");
+
+<div className="bar-md__a"></div>;
diff --git a/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/bar.md.css b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/bar.md.css
new file mode 100644
index 0000000..07a8534
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/bar.md.css	
@@ -0,0 +1 @@
+.a {background-color: #f00;}
diff --git a/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/foo.css b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/foo.css
new file mode 100644
index 0000000..07a8534
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/foo.css	
@@ -0,0 +1 @@
+.a {background-color: #f00;}
diff --git a/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/input.js b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/input.js
new file mode 100644
index 0000000..d00c4be
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/input.js	
@@ -0,0 +1,4 @@
+import barMd from './bar.md.css';
+import base from './styles/base.css';
+
+<div styleName="barMd.a base.b"></div>;
diff --git a/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/options.json b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/options.json
new file mode 100644
index 0000000..5adefe5
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/options.json	
@@ -0,0 +1,16 @@
+{
+  "plugins": [
+    [
+      "../../../../src",
+      {
+        "generateScopedName": "[name]__[local]",
+        "filetypes": {
+          "\\.md\\.less$": {
+            "syntax": "postcss-less"
+          },
+          "styles/.*?\\.css$": {}
+        }
+      }
+    ]
+  ]
+}
diff --git a/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/output.js b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/output.js
new file mode 100644
index 0000000..882cb0a
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/output.js	
@@ -0,0 +1,9 @@
+"use strict";
+
+var _barMd = _interopRequireDefault(require("./bar.md.css"));
+
+var _base = _interopRequireDefault(require("./styles/base.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+<div className="bar-md__a base__b"></div>;
diff --git a/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/styles/base.css b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/styles/base.css
new file mode 100644
index 0000000..f454509
--- /dev/null
+++ b/test/fixtures/react-css-modules/resolves namespaced styleName matching RegExp/styles/base.css	
@@ -0,0 +1 @@
+.b {background-color: #0f0;}
\ No newline at end of file