Package Exports

postcss-load-plugins
postcss-load-plugins/lib/plugins.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-load-plugins) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Load Plugins

Install

npm i -D postcss-load-plugins

Usage

npm i -S|-D postcss-plugin

Install plugins and save them to your package.json dependencies/devDependencies.

`package.json`

Create postcss section in your projects package.json.

App
  |– client
  |– public
  |
  |- package.json

{
  "postcss": {
    "plugins": {
      "postcss-plugin": {}
    }
  }
}

`.postcssrc`

Create a .postcssrc file.

App
  |– client
  |– public
  |
  |- (.postcssrc|.postcssrc.json|.postcssrc.yaml)
  |- package.json

JSON

{
  "plugins": {
    "postcss-plugin": {}
  }
}

YAML

plugins:
  postcss-plugin: {}

`postcss.config.js` or `.postcssrc.js`

You may need some JavaScript logic to generate your config. For this case you can use a file named postcss.config.js or .postcssrc.js.

App
  |– client
  |– public
  |
  |- (postcss.config.js|.postcssrc.js)
  |- package.json

Plugins can be loaded in either using an {Object} or an {Array}.

`{Object}`

module.exports = (ctx) => ({
  plugins: {
    'postcss-plugin': ctx.plugin
  }
})

`{Array}`

module.exports = (ctx) => ({
  plugins: [
    require('postcss-plugin')(ctx.plugin)
  ]
})

Options

Plugin options can take the following values.

{}: Plugin loads with defaults

'postcss-plugin': {} || null

⚠️ {} must be an empty object

{Object}: Plugin loads with options

'postcss-plugin': { option: '', option: '' }

false: Plugin will not be loaded

'postcss-plugin': false

Order

Plugin order is determined by declaration in the plugins section.

{
  plugins: {
    'postcss-plugin': {}, // plugins[0]
    'postcss-plugin': {}, // plugins[1]
    'postcss-plugin': {}  // plugins[2]
  }
}

Context

When using a function (postcss.config.js), it is possible to pass context to postcss-load-plugins, which will be evaluated before loading your plugins. By default ctx.env (process.env.NODE_ENV) and ctx.cwd (process.cwd()) are available.

Examples

postcss.config.js

module.exports = (ctx) => ({
  plugins: {
    postcss-import: {},
    postcss-modules: ctx.modules ? {} : false,
    cssnano: ctx.env === 'production' ? {} : false
  }
})

const { readFileSync } = require('fs')

const postcss = require('postcss')
const pluginsrc = require('postcss-load-plugins')

const css = readFileSync('index.css', 'utf8')

const ctx = { modules: true }

pluginsrc(ctx).then((plugins) => {
  postcss(plugins)
    .process(css)
    .then((result) => console.log(result.css))
})

Maintainers

Michael Ciniawsky

Mateusz Derks

Contributors

Diogo Franco

postcss-load-plugins