[Bug] Storybook not reading the postcss.config.js file

[venecialopez]

I have storybook 6 setup with Postcss 8 and Webpack 5. For some reason, it's not reading the postcss.config.js file (tried adding console logs or breaking the plugin names and it's like nothing happened).

My main.js:

module.exports = {
  stories: ['../src/components/**/*.stories.@(js|jsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
    '@storybook/addon-jest',
    'storybook-addon-next-router',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  core: {
    builder: 'webpack5',
  },
  // todo: check if these configs can be related to jsconfig and other config files
  webpackFinal: (config) => {
    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../src'),
      '~api': path.resolve(__dirname, '../src/api'),
      '~common-components': path.resolve(__dirname, '../src/components/common'),
      '~components': path.resolve(__dirname, '../src/components/layouts'),
      '~constants': path.resolve(__dirname, '../src/constants'),
      '~context': path.resolve(__dirname, '../src/context'),
      '~containers': path.resolve(__dirname, '../src/containers'),
      '~lib': path.resolve(__dirname, '../src/lib'),
      '~services': path.resolve(__dirname, '../src/services'),
      '~utils': path.resolve(__dirname, '../src/lib/utils'),
      '~scripts': path.resolve(__dirname, '../src/lib/scripts'),
      '~transformers': path.resolve(__dirname, '../src/lib/transformers'),
      '~test': path.resolve(__dirname, '../test'),
      '/img': path.resolve(__dirname, '../public/img'),
      'next/config': path.join(__dirname, './mocks/next-config.js'),
    };
    config.resolve.fallback = {
      http: false,
    };
    const nextConfig = require('../next.config.js');
    return { ...config, ...nextConfig };
  },
};

My postcss.config.js:

module.exports = {
  plugins: [
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
    [
      'postcss-pxtorem',
      {
        rootValue: 16,
        unitPrecision: 5,
        propList: ['*'],
        selectorBlackList: [],
        replace: true,
        mediaQuery: false,
        minPixelValue: 0,
        exclude: '/node_modules/i',
      },
    ],
  ],
};

### Expected behavior

The `postcss.config.js` file should be read by storybook.

### Environment

 - Node.js version: v16.10.0
 - Storybook version: 6.3.11
 - Postcss version: 8.3.9
 - Webpack version: 5

[blowsie]

related https://github.com/storybookjs/addon-postcss/issues/27

[albertpurnama]

@venecialopez How do you know that your storybook doesn't load the postcss config file?

I'm currently debugging my own postcss + storybook issues and wondering if this is the same issue as what I'm experiencing