postcss-loader webpack config uses outdated options object

[fattslug]

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.