ember-cli-css-preprocess

Preprocess your stylesheets with multiple preprocessors.

Currently supported preprocessors:

• postcss
• node-sass
• less

Please feel free to fork in order to add more processors!

You can determine in which order the stylesheets are processed!

Installation

1ember install ember-cli-css-preprocess

Usage

Basic configuration

All the configuration for this plugin is stored in the ember-cli-build.js in the root-directory of your ember application.

Search for the following lines:

1    var app = new EmberApp(defaults, {
2        // Add options here
3    ...

And add the the basic options:

1    var app = new EmberApp(defaults, {
2        // Add options here
3        styleProcessorOptions: {
4            processors: [],
5            extension: 'css'
6        }
7    ...

Adding a preprocessor

Currently there a two available preprocessors which you can chain in any order (even multiple times if you want).

Supported processors:

• node-sass
• postcss
• less

To add on simply pass in an object to the processors-Array containing a type-Property with the processor title. Furthermore you have to install the corresponding npm-module with the same name (e.g. npm install autoprefixer --save-dev).

Adding a Sass Preprocessor:

1    var app = new EmberApp(defaults, {
2        // Add options here
3        styleProcessorOptions: {
4            processors: [
5                {
6                    type: 'node-sass',
7                    sourcemaps: true,  // enables sourcemaps
8                    options: {}
9                }
10            ],
11            extension: 'scss'
12        }
13    ...

By changing the extension-property you can specify the extension of your stylesheets. Because we are only processing our sheets with Sass we set the extension to scss.

Annotation: You can also pass all setting you could pass to node-sass by setting the options-object in the processor object. By default the only settings are the includePath which is set to your styles-folder and the sourcemap settings if sourcemaps is set to true. This allows you to include any stylesheet in your folder with the @import-rule

Adding a PostCSS Preprocessor:

1    var app = new EmberApp(defaults, {
2        // Add options here
3        styleProcessorOptions: {
4            processors: [
5                {
6                    type: 'postcss',
7                    plugins: [
8                        {
9                            module: require('autoprefixer'),
10                            options: {
11                                browsers: [
12                                    'last 2 versions'
13                                ]
14                            }
15                        }
16                    ]
17                }
18            ],
19            extension: 'css'
20        }
21    ...

This is a basic postcss implementation using the autoprefixer plugin.

The plugin-array is filled with objects with the module and the options properties. The latter obviously contains the options which are passed into the module/plugin when processing your stylesheets.

Annotation: Before requiring any postcss-plugin you have to install it via npm (e.g. npm install autoprefixer --save).

You can also add a custom parser or syntax by adding it to the processor object. Here is an example which uses the postcss-scss parser (for adding a syntax, use the syntax property):

1    var app = new EmberApp(defaults, {
2        // Add options here
3        styleProcessorOptions: {
4            processors: [
5                {
6                    type: 'postcss',
7                    parser: require('postcss-scss'),
8                    //syntax: require('postcss-scss'),
9                    plugins: [
10                        {
11                            module: require('autoprefixer'),
12                            options: {
13                                browsers: [
14                                    'last 2 versions'
15                                ]
16                            }
17                        }
18                    ]
19                }
20            ],
21            extension: 'css'
22        }
23    ...

Adding a less Preprocessor:

1    var app = new EmberApp(defaults, {
2        // Add options here
3        styleProcessorOptions: {
4            processors: [
5                {
6                    type: 'less'
7                }
8            ],
9            extension: 'css'
10        }
11    ...

To include any less plugin you can make use of the plugins-array, it is handled like the postcss-plugin array.

Using multiple processors:

1    var app = new EmberApp(defaults, {
2        // Add options here
3        styleProcessorOptions: {
4            processors: [
5                {
6                    type: 'node-sass'
7                },
8                {
9                    type: 'postcss',
10                    plugins: [
11                        {
12                            module: require('autoprefixer'),
13                            options: {
14                                browsers: [
15                                    'last 2 versions'
16                                ]
17                            }
18                        }
19                    ]
20                }
21            ],
22            extension: 'css'
23        }
24    ...

This example should clarify how to chain preprocessors. The position inside the processors-array determines the order in which the stylesheets are processed by each preprocessors (from top to bottom).

Using multiple input stylesheets

Multiple stylesheets are added by using the outputPaths-property (, which is not part of the styleProcessorOptions-property).

Configuring Output Paths (Ember CLI Reference)

In addition to the default configuration you can add an extension to your css-value.

1... // styleProcessorOptions
2            extension: 'scss' // specified extension, overrides default: css
3        },
4        outputPaths: {
5            app: {
6                css: {
7                    'app': 'assets/lel.css', // will parse app/styles/app.scss
8                    'amk.css': 'assets/toll.css', //will parse app/styles/amk.css
9                    'hippo.less': 'assets/eichhorn.css', //will parse app/styles/hippo.less
10                    'trolol/bars': 'assets/foo.css' //will parse app/trolol/bars.scss
11                }
12            }
13        }
14

Setup processor to parse specific files only (Filter):

1    var app = new EmberApp(defaults, {
2        // Add options here
3        styleProcessorOptions: {
4            processors: [
5                {
6                    type: 'postcss',
7                    filter: ['test.css'],
8                    plugins: [
9                        {
10                            module: require('autoprefixer'),
11                            options: {
12                                browsers: [
13                                    'last 2 versions'
14                                ]
15                            }
16                        }
17                    ]
18                },
19                {
20                    type: 'node-sass'
21                }
22            ],
23            extension: 'css'
24        }
25    ...

With this setup the postcss processor will only process the file test.css. The filter property can either be a string or an array of strings.

An example for using the glob pattern:

1    var app = new EmberApp(defaults, {
2        // Add options here
3        styleProcessorOptions: {
4            processors: [
5                {
6                    type: 'node-sass',
7                    filter: ['*.scss']
8                },
9                {
10                    type: 'less',
11                    filter: ['*.less']
12                }
13            ],
14            extension: 'css'
15        },
16        outputPaths: {
17            app: {
18                css: {
19                    'app': 'assets/lel.css', // input file contents will equal input file contents
20                    'amk.css': 'assets/toll.css', // input file contents will equal input file contents
21                    'hippo.less': 'assets/eichhorn.css', // will only be processed by less processor
22                    'trolol.scss': 'assets/foo.css' // will only be processed by less processor
23                }
24            }
25        }
26    ...

Resources

Github: BroccoliCachingWriter