ember-cli-css-preprocess

    2.0.0-rc.0 • Public • Published

    ember-cli-css-preprocess

    Build Status dependencies Status devDependencies Status npm version

    Preprocess your stylesheets with multiple preprocessors.

    Currently supported preprocessors:

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

    You can determine in which order the stylesheets are processed!

    Installation

    ember 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:

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

    And add the the basic options:

        var app = new EmberApp(defaults, {
            // Add options here
            styleProcessorOptions: {
                processors: [],
                extension: 'css'
            }
        ...

    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:

        var app = new EmberApp(defaults, {
            // Add options here
            styleProcessorOptions: {
                processors: [
                    {
                        type: 'node-sass',
                        sourcemaps: true,  // enables sourcemaps
                        options: {}
                    }
                ],
                extension: 'scss'
            }
        ...

    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:

        var app = new EmberApp(defaults, {
            // Add options here
            styleProcessorOptions: {
                processors: [
                    {
                        type: 'postcss',
                        plugins: [
                            {
                                module: require('autoprefixer'),
                                options: {
                                    browsers: [
                                        'last 2 versions'
                                    ]
                                }
                            }
                        ]
                    }
                ],
                extension: 'css'
            }
        ...

    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):

        var app = new EmberApp(defaults, {
            // Add options here
            styleProcessorOptions: {
                processors: [
                    {
                        type: 'postcss',
                        parser: require('postcss-scss'),
                        //syntax: require('postcss-scss'),
                        plugins: [
                            {
                                module: require('autoprefixer'),
                                options: {
                                    browsers: [
                                        'last 2 versions'
                                    ]
                                }
                            }
                        ]
                    }
                ],
                extension: 'css'
            }
        ...

    Adding a less Preprocessor:

        var app = new EmberApp(defaults, {
            // Add options here
            styleProcessorOptions: {
                processors: [
                    {
                        type: 'less'
                    }
                ],
                extension: 'css'
            }
        ...

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

    Using multiple processors:

        var app = new EmberApp(defaults, {
            // Add options here
            styleProcessorOptions: {
                processors: [
                    {
                        type: 'node-sass'
                    },
                    {
                        type: 'postcss',
                        plugins: [
                            {
                                module: require('autoprefixer'),
                                options: {
                                    browsers: [
                                        'last 2 versions'
                                    ]
                                }
                            }
                        ]
                    }
                ],
                extension: 'css'
            }
        ...

    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.

    ... // styleProcessorOptions
                extension: 'scss' // specified extension, overrides default: css
            },
            outputPaths: {
                app: {
                    css: {
                        'app': 'assets/lel.css', // will parse app/styles/app.scss
                        'amk.css': 'assets/toll.css', //will parse app/styles/amk.css
                        'hippo.less': 'assets/eichhorn.css', //will parse app/styles/hippo.less
                        'trolol/bars': 'assets/foo.css' //will parse app/trolol/bars.scss
                    }
                }
            }
     

    Setup processor to parse specific files only (Filter):

        var app = new EmberApp(defaults, {
            // Add options here
            styleProcessorOptions: {
                processors: [
                    {
                        type: 'postcss',
                        filter: ['test.css'],
                        plugins: [
                            {
                                module: require('autoprefixer'),
                                options: {
                                    browsers: [
                                        'last 2 versions'
                                    ]
                                }
                            }
                        ]
                    },
                    {
                        type: 'node-sass'
                    }
                ],
                extension: 'css'
            }
        ...

    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:

        var app = new EmberApp(defaults, {
            // Add options here
            styleProcessorOptions: {
                processors: [
                    {
                        type: 'node-sass',
                        filter: ['*.scss']
                    },
                    {
                        type: 'less',
                        filter: ['*.less']
                    }
                ],
                extension: 'css'
            },
            outputPaths: {
                app: {
                    css: {
                        'app': 'assets/lel.css', // input file contents will equal input file contents
                        'amk.css': 'assets/toll.css', // input file contents will equal input file contents
                        'hippo.less': 'assets/eichhorn.css', // will only be processed by less processor
                        'trolol.scss': 'assets/foo.css' // will only be processed by less processor
                    }
                }
            }
        ...

    Resources

    Github: BroccoliCachingWriter

    Install

    npm i ember-cli-css-preprocess

    DownloadsWeekly Downloads

    132

    Version

    2.0.0-rc.0

    License

    MIT

    Unpacked Size

    172 kB

    Total Files

    22

    Last publish

    Collaborators

    • n1ru4l