postcss-loader webpack config uses outdated options object #661
Description
This bug was discovered when attempting to use @storybook/addon-postcss
with Storybook 6.3.
There are deprecation warnings that postcss will require addon-postcss to function in Storybook 7.
Describe the bug
The options object for postcss-loader changed in v4.0.
To Reproduce
OLD:
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: (
await getPostCssConfig({
useModules: false
})
).plugins
}
Expected behavior
NEW:
{
loader: 'postcss-loader',
options: {
sourceMap: true,
postcssOptions: { // This property is now required
plugins: (
await getPostCssConfig({
useModules: false
})
).plugins
}
}
Screenshots
Omitting this new postcssOptions
property will result in the following error:
Additional context
This error happens at build-time within the @design-systems/storybook
plugin.
I have not explored further than that right now.
In the modify-webpack.js
file, updating the postcss-loader to use the postcssOptions
object will fully fix this issue.
This fix will break compatibility with postcss-loader v3.0 and lower, however this should not be a problem as postcss-loader is a controlled dependency of @design-systems/bundle
.