Skip to content

Upgrading postcss-loader 3 to 4

Breaking3.0.0 → 4.3.0Breaking12Deprecated1New7Fixed8Other2

Full comparisonBack to postcss-loader
BreakingUpgrade verdict

12 breaking changes.

In plain terms
  • sourceMap default value depends on the compiler.devtool option.
  • the inline value was removed for the sourceMap option, please use { map: { inline: true, annotation: false } } to achieve this.
  • exec option was renamed to the execute option.
  • the config option doesn't support Object type anymore, config.path and config.ctx options were removed.
Must act Top 4 of 13 that need code or config changes

Node.js requirement changed in 4.0.0: >= 6 → >= 10.13.0.

Adds cosmiconfig ^7.0.0, klona ^2.0.4, semver ^7.3.4.

Drops postcss, postcss-load-config.

Installs 32 packages in all (was 35).

What you must change

Breaking12
sourceMap default value depends on the compiler.devtool option.
sourceMapcompiler.devtool
4.0.0GitHub ReleaseOriginalView source
the inline value was removed for the sourceMap option, please use { map: { inline: true, annotation: false } } to achieve this.
inlinesourceMap
4.0.0GitHub ReleaseOriginalView source
exec option was renamed to the execute option.
execexecute
4.0.0GitHub ReleaseOriginalView source
the config option doesn't support Object type anymore, config.path and config.ctx options were removed.
configObjectconfig.pathconfig.ctx
4.0.0GitHub ReleaseOriginalView source
loader context in the config was renamed from webpack to webpackLoaderContext.
webpackwebpackLoaderContext
4.0.0GitHub ReleaseOriginalView source
minimum supported Node.js version is 10.13.
Node.js
4.0.0GitHub ReleaseOriginalView source
minimum supported webpack version is 4.
webpack
4.0.0GitHub ReleaseOriginalView source
postcss was moved to peerDependencies, you need to install postcss.
postcsspeerDependencies
4.0.0GitHub ReleaseOriginalView source
PostCSS (plugins/syntax/parser/stringifier) options was moved to the postcssOptions option, please look at docs.
PostCSSpluginssyntaxparserstringifierpostcssOptions
4.0.0GitHub ReleaseOriginalView source
source maps contain absolute paths in sources.
sources
4.0.0GitHub ReleaseOriginalView source
loader output only CSS, so you need to use css-loader/file-loader/raw-loader to inject code inside bundle.
css-loaderfile-loaderraw-loader
4.0.0GitHub ReleaseOriginalView source
argument in the config for Function notation (previously config.ctx) was changed, now it contains { file, mode, webpackLoaderContext }.
Functionconfig.ctx
4.0.0GitHub ReleaseOriginalView source

Deprecations to plan for

Deprecated1
Object syntax for the plugin option is soft deprecated, please migrate on Array syntax (plugins: ['postcss-present-env', ['cssnano', options]]).
ObjectpluginArray
4.0.0GitHub ReleaseOriginalView source