CrshOverride / ember-component-css

An Ember CLI addon which allows you to specify CSS inside of component pod directories

ember-component-css

An Ember CLI addon which allows you to specify a component-specific style sheet inside of component pod directories

The announcement from EmberConf 2015

Installation

ember install ember-component-css

Usage

This addon allows you to specify a style sheet inside of your component's pod folder.

Rules defined in the style-sheet will automatically be namespaced with an autogenerated class. That autogenerated class will also be injected into your component's classNames property. This enables you to worry less about rules clashing across component styles.

For example, given this app/my-component/styles.css file:

& {  // ampersand refers to the component itself (parent selector)
  padding: 2px;
}
.urgent {
  color: red;
}

Your generated CSS output will look something like:

.my-component-a34fba {
  padding: 2px;
}
.my-component-a34fba .urgent {
  color: red;
}

A typical component invocation that looks like this:

{{my-component}}

will generated markup like:

<div class="my-component-a34fba"></div>

With Preprocessors

To use this addon with a CSS pre-processor, import pod-styles into your base stylesheet. (see your pre-processor docs)

// app/styles/app.scss
@import "pod-styles";

// app/styles/app.less
@import "pod-styles";

// app/styles/app.styl
@import 'pod-styles'

And that is it! The pod-styles file is generated during the build and will then be pulled into your other stylesheet to be processed like normal.

Note: If you are using more then one type of component style files (ie a .less file and a .scss file) then you will need to add the extension to the @import. Otherwise the extension can be left off.

Approved preprocessors:

• ember-cli-sass
• ember-cli-less
• ember-cli-stylus

Configuration

You can set the following configuration options in your config/environment.js file:

ENV['ember-component-css'] = {
  option: 'value'
}

namespacing(enabled)

Defaults to true. Set this option to false to disable the namespacing feature of Ember Component CSS.

ENV['ember-component-css'] = {
  namespacing: false
}

This changes the default behavior changes in two ways:

1. The autogenerated component class is no longer added to your component's HTML
2. Your pod CSS files are no longer are namespaced using the autogenerated component class.