How to configure Ember CLI to use uncss

Question

I have a hard time to configure Ember CLI to use uncss. The setup:

> ember new foobar
> cd foobar
> bower install --save-dev bootstrap
> ember generate route index

app/templates/index.hbs

<h1>Hello World!</h1>

Brocfile.js

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp();

app.import('vendor/bootstrap/dist/css/bootstrap.css');

module.exports = app.toTree();

What do I have to do to use https://github.com/sindresorhus/broccoli-uncss? The assets part of http://iamstef.net/ember-cli/ says that it's easy but it doesn't describe how to actually do it.

Answer 1

It's not well documented in broccoli-uncss readme, but if you look at the index.js and test.js, you would get the idea.

Basically you pass in a tree as the first parameter, and an options hash as the second parameter, And options hash should have an html option, telling where the index.html is. In your case I think what Oliver said is true. You could use the html in your dist folder. I am not sure how to integrate that with the ember-cli, but my guess is probably you need an ember-cli add-on, http://reefpoints.dockyard.com/2014/06/24/introducing_ember_cli_addons.html.

var uncss = require('broccoli-uncss');

var cssTree = uncss('dist`, {
// html file to uncss, or this could be a live link to the html
html: ['dist/index.html']
});

// you might somewhat merge this with ember-cli app tree here.

module.exports = cssTree;

Answer 2

Please correct me if I'm wrong...

I assume uncss won't work as expected in a "templating environment"!

Let's say you have an outer and an inner template. The outer looks like

<div class="outer">
    {{outlet}}
</div>

and the inner template would look like

<h1>Text</h1>

In your css file you would maybe write something like

.outer h1 { 
    background: red; 
}

As far as I know uncss would dismiss this css rule because uncss is not able to find it in either one of your templates.