Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ember-cli-postcss

Package Overview
Dependencies
Maintainers
1
Versions
45
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-cli-postcss

Use postcss to process your css with a large selection of JavaScript plug-ins.

  • 3.4.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
29K
increased by68.16%
Maintainers
1
Weekly downloads
 
Created
Source

ember-cli-postcss

Build Status npm version Ember Observer Score

Use postcss to process your css with a large selection of plug-ins.

Installation

ember install ember-cli-postcss

Usage

The add-on can be used in two ways:

  • on individual files, referred to as “compile”
  • on all CSS files, referred to as “filter”

Note: it’s possible to use both compile and filter.

Compile

This step will look for either app.css or <project-name>.css in your styles directory. Additional files to be processed can be defined in the output paths configuration object for your application:

const app = new EmberApp(defaults, {
  outputPaths: {
    app: {
      html: 'index.html',
      css: {
        'app': '/assets/app.css',
        'print': '/assets/print.css'
      }
    }
  }
}
Filter

This step will run at the end of the build process on all CSS files, including the merged vendor.css file and any CSS imported into the Broccoli tree by add-ons.

Files can be white-listed and/or black-listed by using the respective include and exclude options. Each accepts an array of file globs, which are then passed on to Broccoli Funnel. An example can be seen in the sample configuration below.

Configuring Plug-ins

There are two steps to setting up postcss with ember-cli-postcss:

  1. install and require the node modules for any plug-ins
  2. provide the node module and plug-in options as a postcssOptions object in ember-cli-build.js

The postcssOptions object should have a “compile” and/or “filter” property, which will have the properties enabled and plugins, which is an array of objects that contain a module property and an options property:

Browser Targets

Some postcss plug-ins, like autoprefixer, allow you to configure which browsers to target for transpilation. When using Ember CLI >= 2.13.0, the browser targets configuration found in the file config/targets.js will be added to each plug-in’s options (as options.browsers). This browser list can be overwritten on a plug-in by plug-in basis. You can learn more about the targets feature on the Ember.js blog.

postcssOptions: {
  compile: {
    enabled: true, // defaults to true
    browsers: ['last 3 versions'], // this will override config found in config/targets.js
    plugins: [
      {
        module: <module>,
        options: {
          ...
        }
      }
    ]
  },
  filter: {
    enabled: true, // defaults to false
    map: false, // defaults to inline, false in production
    browsers: ['last 3 versions'], // this will override config found in config/targets.js
    include: ['styles/*.css'],
    exclude: ['vendor/bootstrap/**/*'],
    plugins: [
      {
        module: <module>,
        options: {
          ...
        }
      }
    ]
  }
}

Example

Install the autoprefixer plug-in:

npm i --save-dev autoprefixer

Specify some plug-ins in your ember-cli-build.js:

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

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        enabled: false,
        browsers: ['last 3 versions'], // this will override config found in config/targets.js
      },
      filter: {
        enabled: true,
        plugins: [
          {
            module: autoprefixer,
            options: {
              browsers: ['last 2 versions'] // this will override the config, but just for this plugin
            }
          }
        ]
      }
    }
  });
  return app.toTree();
};

Keywords

FAQs

Package last updated on 12 Jul 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc