pseudo-states only actived after rerender the storybook canvas

[PeterChen1997]

I use the sass react component in storybook. Everything works fine with storybook-addon-pseudo-states.

But after manual edit the webpack finals process. The state display broken..

I just replaced the @storybook/preset-scss with manual config. No other changes.

The hover state will not active by default. But after I click the function in storybook function bar, it works fine.

before:

after:

Here is my main.ts

before:

import path from 'path';
import type { StorybookConfig } from '@storybook/react-webpack5';
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    {
      name: '@storybook/preset-scss',
      options: {
        cssLoaderOptions: {
          modules: { localIdentName: '[path][name]__[local]' },
        },
      },
    },
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    'storybook-addon-pseudo-states',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      builder: {
        useSWC: true,
      },
    },
  },
  swc: () => ({
    jsc: {
      transform: {
        react: {
          runtime: 'automatic',
        },
      },
    },
  }),
  docs: {
    autodocs: 'tag',
  },
  webpackFinal: async (config) => {
    const newConfig = config;
    return newConfig;
  },
};
export default config;

after:

import path from 'path';

import type { StorybookConfig } from '@storybook/react-webpack5';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    'storybook-addon-pseudo-states',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      builder: {
        useSWC: true,
      },
    },
  },
  swc: () => ({
    jsc: {
      transform: {
        react: {
          runtime: 'automatic',
        },
      },
    },
  }),
  docs: {
    autodocs: 'tag',
  },
  webpackFinal: async (config) => {
    const newConfig = config;

    if (newConfig.module?.rules) {
      newConfig.module.rules = [
        ...newConfig.module.rules,
        {
          test: /\.s[ac]ss$/i,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: '[path][name]__[local]',
                },
                sourceMap: true,
              },
            },
            {
              loader: 'sass-loader',
            },
          ],
        },
      ];
    }

    return newConfig;
  },
};

export default config;

[PeterChen1997]

I found that the hover style only injected after I click the function bar. before:

after: