Only the last stylesheet works. Not able to toggle between other stylesheets

[mdesilva]

I am using Storybook v7 and I see that only the styles from the last stylesheet that is defined in parameters.cssVariables.files are applied. For example, I see that the styles from both Nation and Sports are loaded but the one for Sports is always crossed out in the Chrome Devtools Inspector. I can see the other stylesheets in the dropdown but selecting them does nothing. Here are my Storybook config files:

main.ts

import type { StorybookConfig } from "@storybook/preact-webpack5";
import { resolve } from "path";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-interactions",
    "@etchteam/storybook-addon-css-variables-theme",
    {
      name: '@storybook/addon-styling',
      options: {
        postCss: true,
      },
    },
  ],
  framework: {
    name: "@storybook/preact-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["../static"],
  webpackFinal: async(config, { configType }) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: "style-loader", options: {injectType: "lazyStyleTag"}
        },
        "css-loader"
      ],
      include: resolve(__dirname, "/src/themes/")
    })

    return config;
  }
};

export default config;

preview.ts

import './global.css';
import '../src/utilities.css';
import '../src/components.css';
import SportsTheme from "../src/themes/sports.css";
import NationTheme from "../src/themes/nation.css";

import type { Preview } from "@storybook/preact";
import cssVariablesTheme from "@etchteam/storybook-addon-css-variables-theme";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    cssVariables: {
      files: {
        "Sports": SportsTheme,
        "Nation": NationTheme
      }
    }
  },
  decorators: [ cssVariablesTheme ]
};

export default preview;

[gavmck]

Are you loading the files anywhere else?

[DanWebb]

This may be related to use in mdx.

As the addon can't load correctly without a story the last stylesheet to load would be included but not changeable.

I'll close for now as this is a bit out of date but let us know if this is still an issue.