// ...awesome-component/component.js

import Component from '@ember/component';
import JSS, { TaglessJSS } from 'ember-cli-jss';
import stylesheet from './stylesheet';

export default Component.extend(JSS, {
  stylesheet,
  jssNames: ['wrapper'],
  jssNameBindings: ['isShow:show'],
  jssObservedProps: ['color'],

  color: 'blue',
  isShow: true,

  actions: {
    changeColor(color) {
      this.set('color', color);
    },
  },
});

// For tag-less component use TaglessJSS
export default Component.extend(TaglessJSS, {
  stylesheet,
  jssObservedProps: ['color'],
  tagName: '',
  color: 'blue',

  actions: {
    changeColor(color) {
      this.set('color', color);
    },
  },
});

// ...awesome-component/stylesheet.js

import { StyleSheet } from 'ember-cli-jss';

export default new StyleSheet({
  wrapper: {
    width: 600,
    display: 'none',
  },

  show: {
    display: 'block',
  },

  content: {
    color: data => data.color,
  },
});

// ...app/initializers/ember-cli-jss.js

import jss from 'jss';
import preset from 'jss-preset-default';

export function initialize() {
  jss.setup(preset());
}

export default {
  name: 'ember-cli-jss',
  initialize,
};