-
Notifications
You must be signed in to change notification settings - Fork 94
Migrating from v2 to v3
v3 is currently in beta
If you do not use a config file, and:
- Pass options to plugins using the
--plugin.key=value
syntax, or - Use
--local-plugins
you will need to use a config file in v3.
If you used a config file in v2, you will need to migrate it to the v3 format. v3 uses https://github.com/michael-ciniawsky/postcss-load-config to load and parse the config files; complete docs may be found there. Here is a quick overview.
Your config file must be named postcss.config.js
(you can also use a .postcssrc
file, or add your config to the package.json
; that will not be covered here).
If you are currently using a JSON config file, we recommend switching to a JS config.
Example v2 config:
module.exports = {
parser: 'sugarss',
use: ['postcss-import', 'postcss-cssnext', 'cssnano'],
cssnano: {
autoprefixer: false
}
}
Migrating that to v3:
There are two ways to structure your v3 plugins; an array or an object.
array form
module.exports = {
parser: 'sugarss',
plugins: [
require('postcss-import')(),
require('postcss-cssnext')(),
require('cssnano')({
autoprefixer: false
})
]
}
object form
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
cssnano: {
autoprefixer: false
}
}
}
You can also export a function that will receive a context parameter, like this:
module.exports = function (ctx) {
return {
parser: ctx.file.extname === '.sss' ? 'sugarss' : null,
plugins: [
require('postcss-import')(),
require('postcss-cssnext')(),
require('cssnano')({
autoprefixer: false
})
]
}
}
<--add link to context
reference here-->