Skip to content

postcss-loader webpack config uses outdated options object #661

Open
@fattslug

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:
Screen Shot 2021-07-13 at 2 14 39 PM

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.

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions