https://github.com/ebryn/ember-component-css not working as expected

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{#link-to 'contacts'}}Contacts{{/link-to}}
<br>
<br>

compiled_css.css

.contact-bio-7305e53c {
  padding: 5px;
  border: 1px solid blue; }
  .contact-bio-7305e53c p {
    color: blue; }

.contact-box-8e39ccec {
  padding: 5px;
  border: 1px solid red; }
  .contact-box-8e39ccec p {
    color: red; } # because this after contact-bio p .. these styles take over! :'(

.contact-name-77d9f840 {
  padding: 5px;
  border: 1px solid green; }
  .contact-name-77d9f840 p {
    color: green; }

/*# sourceMappingURL=sass-pods-example.css.map */

contact-bio.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

contact-bio.styles.scss

& {
  padding: 5px;
  border: 1px solid green;

  p { color: green; }
}

contact-bio.template.hbs

<p>
  {{bio}}
</p>

contact-box.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

contact-box.styles.scss

& {
  padding: 5px;
  border: 1px solid red;


}

p { color: red; }

contact-box.template.hbs

<p>Contact Box</p>
{{contact-name name=contact.name}}
{{contact-bio bio=contact.bio}}

contact-name.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

contact-name.styles.scss

& {
  padding: 5px;
  border: 1px solid green;

  p { color: green; }
}

contact-name.template.hbs

<p>
  {{name}}
</p>

contacts.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [
      {
        name: "Garrett",
        bio: "Awesome!"
      }
    ]
  }
});

contacts.template.hbs

{{#each model as |contact|}}
  {{contact-box contact=contact}}
{{/each}}

router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('contacts', {});
});

export default Router;

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

twiddle.json

{
  "version": "0.4.11",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js"
  }
}