Name Last Update
..
lib Loading commit data...
node_modules Loading commit data...
CHANGELOG.md Loading commit data...
LICENSE Loading commit data...
README.md Loading commit data...
index.js Loading commit data...
package.json Loading commit data...

npm node deps tests coverage code style chat

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