Feature request: Load postcss.config.js from .storybook folder if available

[wheelmaker24]

Hey,

would it be possible to load a postcss.config.js file from the .storybook folder if available?

My usecase would be that we want to export our package without autoprefixer and focusVisible polyfills as the consuming packages should do so. Storybook then needs a place to add these polyfills. A .storybook/postcss.config.js file could add these loaders and extend the main postcss.config.js file.

With this the plugin would work the same way as Storybook does when adding a .babelrc file into the .storybook folder.

If you think that this features makes sense, I would be happy to help – if you could point me into the right direction to start :)

Best, Nik

[renato-dawnlight]

My use case: the postcss config that I use for my ui-library is different than then one I expect my consumer app (which includes Storybook) to use.

[Laruxo]

I also have the same need. As a workaround, I found that you can load postcss plugins in the addon configuration using postcssOptions:

  addons: [
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
          postcssOptions: {
            plugins: [
              require('tailwindcss')(),
              require('autoprefixer')(),
            ],
          },
        },
        cssLoaderOptions: { importLoaders: 1 },
      },
    },
  ]

[thiemeljiri]

This didn't work for me. It's very sad that this preset wasn't updated in 2 years now! Screw this deprecated addons and presets. They took me more than a day of my life! 😡

I've fixed it in a minute, when I realised I can do this myself via webpackFinal.

module.exports = {
  "stories": ["../app/**/*.stories.@(js|jsx|ts|tsx|mdx)", "../styles/**/*.stories.@(mdx)"],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  core: {
    builder: "webpack5"
  },
  webpackFinal: async (config) => {
    config.module = {
      ...(config.module || {}),
      rules: [
        ...(config.module.rules.filter(rule => rule.test.toString() !== /\.css$/.toString()) || []),
        {
          test: /\.(scss|css)$/i,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            'resolve-url-loader',
            'sass-loader'
          ]
        },
      ]
    };

    return config;
  }
};