Autoload Plugins for PostCSS
OTHER License
npm i -D postcss-load-plugins
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)
]
})
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
Plugin order is determined by declaration in the plugins section.
{
plugins: {
'postcss-plugin': {}, // plugins[0]
'postcss-plugin': {}, // plugins[1]
'postcss-plugin': {} // plugins[2]
}
}
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.
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))
})