Autoprefixer not working

[ChazUK]

Describe the bug

I'm trying to use CSS modules with SCSS and have come up against an issue where the autoprefixer is not working on storybook, but working correctly when I run NextJS.

The mask-image property is not being prefixed to support Chrome and the webkit browsers.

Your minimal, reproducible example

https://stackblitz.com/edit/nextjs-a7vvxx

Steps to reproduce

.storybook/main.js

module.exports = {
  stories: [
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-addon-next",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  staticDirs: ["../public"],
};

.browserlistrc

defaults
last 2 versions
not IE 11

scss

.playing {
  width: 50px;
  height: 50px;
  background: #FFFFFF;
  mask-image: url(https://upload.wikimedia.org/wikipedia/commons/0/03/Font_Awesome_5_solid_play-circle.svg);
  mask-mode: alpha;
}

deps

"dependencies": {
    "@mantine/core": "^4.2.12",
    "@mantine/hooks": "^4.2.12",
    "@mantine/next": "^4.2.12",
    "classnames": "^2.3.1",
    "date-fns": "^2.29.1",
    "framer-motion": "^6.5.1",
    "next": "12.2.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/addon-postcss": "^3.0.0-alpha.1",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@types/node": "18.0.6",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "babel-loader": "^8.2.5",
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.2",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-storybook": "^0.6.1",
    "postcss": "^8.4.14",
    "sass": "^1.54.0",
    "storybook-addon-next": "^1.6.7",
    "stylelint": "^14.9.1",
    "stylelint-config-idiomatic-order": "^8.1.0",
    "stylelint-config-prettier-scss": "^0.0.1",
    "stylelint-config-standard-scss": "^5.0.0",
    "typescript": "4.7.4",
    "typescript-plugin-css-modules": "^3.4.0"
  }

Expected behavior

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS, Chrome

storybook-addon-next version

1.6.7

Additional context

none

[github-actions[bot]]

This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.

[github-actions[bot]]

This issue has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.

[ChazUK]

😞

[a-tokyo]

facing this issue as well

[RyanClementsHax]

Regarding the upcoming release of storybook v7 and the accompanying framework api that replaces this addon. I'm switching this package into "keep the lights on" mode and directing everyone using this addon to switch to storybook's framework api.

Please report any issues you have with migrating though :)