diff --git a/index.js b/index.js
index 1cecfa7..30fb05c 100644
--- a/index.js
+++ b/index.js
@@ -11,7 +11,7 @@ let VersionChecker = require("ember-cli-version-checker");
 module.exports = {
 
   _getStyleFunnel: function() {
-    return new Merge([this._getPodStyleFunnel(), this._getClassicStyleFunnel()], {
+    return new Merge([this._getPodStyleFunnel(), this._getClassicStyleFunnel(),this._getColocatedComponentsStyleFunnel()], {
       annotation: 'Merge (ember-component-css merge pod and classic styles)'
     });
   },
@@ -34,6 +34,15 @@ module.exports = {
     });
   },
 
+  _getColocatedComponentsStyleFunnel: function() {
+    return new Funnel(this.projectRoot, {
+      srcDir: 'components',
+      include: ['**/*.{' + this.allowedStyleExtensions + ',}'],
+      allowEmpty: true,
+      annotation: 'Funnel (ember-component-css grab colocated components files)'
+    });
+  },
+
   _podDirectory: function() {
     return this.appConfig.podModulePrefix && !this._isAddon() ? this.appConfig.podModulePrefix.replace(this.appConfig.modulePrefix, '') : '';
   },
diff --git a/lib/component-names.js b/lib/component-names.js
index 1215214..8c61a36 100644
--- a/lib/component-names.js
+++ b/lib/component-names.js
@@ -2,6 +2,7 @@
 'use strict';
 
 var md5 = require('md5');
+var path = require('path');
 
 module.exports = {
   path: function(actualPath, classicStyleDir) {
@@ -11,7 +12,12 @@ module.exports = {
     if (actualPath.includes(classicStyleDir)) {
       terminator = '.';
       pathSegementToRemove = 'styles/' + classicStyleDir + '/';
-    }
+    } else { // Colocated component stylesheet
+      var pathInfo = path.parse(actualPath);
+      if (pathInfo.name !== 'styles') {
+        terminator = '.';
+      }  
+    } 
 
     return actualPath.substr(0, actualPath.lastIndexOf(terminator)).replace(pathSegementToRemove, '');
   },