Storybook compatibility with Gatsby, CSS Modules, TailwindCSS, and AntD

[do-kevin]

Many issues cropped up when I tried to get Storybook working in Gatsby with TailwindCSS and AntD. There were errors about style injection, CSS modules not working, unknown words, and unrecognized CSS syntax. I am sharing this for whoever else has the same/similar setup and especially for myself. So here's what I had to resolve my issues. There's probably still some fine-tuning I will have to do.

.storybook/main.js

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "storybook-addon-gatsby",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
          plugins: () => [require("autoprefixer"), require("tailwindcss")],
        },
      },
    },
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  staticDirs: ["../static", "../src/images"],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
  webpackFinal: async (config, { mode }) => {
    config.module.rules.push({
      test: /\.css|\.less$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            importLoaders: 1,
            modules: true,
          },
        },
        {
          loader: "less-loader",
          options: {
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      ],
    });

    return config;
  },
};

.storybook/preview.js

import "../src/styles/antd.less";
import "!style-loader!css-loader!postcss-loader!../src/styles/global.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};