intuit / intuit/design-systems-cli

postcss-loader webpack config uses outdated options object

Open
#661 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
419
Forks
89
PR merge metrics
No merged PRs in 30d

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:
```javascript
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: (
await getPostCssConfig({
useModules: false
})
).plugins
}
```

**Expected behavior**

NEW:
```javascript
{
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](https://user-images.githubusercontent.com/18297343/125525976-23a3eb46-8da1-4c4c-a33d-1a35ea243e39.png)

**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`.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.