Skip to content

Instantly share code, notes, and snippets.

@fpauser
Created March 2, 2016 17:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fpauser/b39e923c4428af69ed86 to your computer and use it in GitHub Desktop.
Save fpauser/b39e923c4428af69ed86 to your computer and use it in GitHub Desktop.
ember-addon with postcss
/* jshint node: true */
'use strict';
var PostcssCompiler = require('broccoli-postcss');
var path = require('path');
var checker = require('ember-cli-version-checker');
var merge = require('merge');
var mergeTrees = require('broccoli-merge-trees');
var autoprefixer = require('autoprefixer');
var cssnext = require('postcss-cssnext');
var cssnested = require('postcss-nested');
var cssimport = require('postcss-import');
function PostcssPlugin(optionsFn) {
this.name = 'ember-cli-postcss';
this.optionsFn = optionsFn;
}
PostcssPlugin.prototype.toTree = function (tree, inputPath, outputPath, inputOptions) {
var inputTrees = [tree];
var options = merge({}, this.optionsFn, inputOptions);
if (options.includePaths) {
inputTrees = inputTrees.concat(this.options.includePaths);
}
var plugins = options.plugins;
var map = options.map;
var ext = options.extension || 'css';
var paths = options.outputPaths;
var trees = Object.keys(paths).map(function(file) {
var input = path.join(inputPath, file + '.' + ext);
var output = paths[file];
return new PostcssCompiler(inputTrees, input, output, plugins, map);
});
return mergeTrees(trees);
};
module.exports = {
name: 'pcms-ui-v2',
shouldSetupRegistryInIncluded: function() {
return !checker.isAbove(this, '0.2.0');
},
postcssOptions: function() {
var env = process.env.EMBER_ENV;
var options = (this.app && this.app.options && this.app.options.postcssOptions) || {};
var envConfig = this.project.config(env).postcssOptions;
if (envConfig) {
console.warn("Deprecation warning: postcssOptions should be moved to your ember-cli-build");
merge(options, envConfig);
}
// Set defaults if none were passed
options.map = options.map || {};
options.plugins = options.plugins || [
{ module: autoprefixer, options: { browsers: ['last 2 version'] } },
{ module: cssimport },
{ module: cssnested },
{ module: cssnext, options: { sourcemap: true } }
];
options.inputFile = options.inputFile || 'app.css';
options.outputFile = options.outputFile || this.project.name() + '.css';
return options;
},
setupPreprocessorRegistry: function(type, registry) {
registry.add('css', new PostcssPlugin(this.postcssOptions()));
},
included: function included(app) {
this._super.included.apply(this, arguments);
// see: https://github.com/ember-cli/ember-cli/issues/3718
if (typeof app.import !== 'function' && app.app) {
app = app.app;
}
this.app = app;
if (this.shouldSetupRegistryInIncluded()) {
this.setupPreprocessorRegistry('parent', app.registry);
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment