[Bug] Postcss + CSS modules syntax error on import (unknown word)

[equinusocio]

Describe the bug

Error on rendering components with basic CSS (using Postcss and CSS Modules). See screenshot.

Here the CSS file:

  .Autocomplete {
    display: unset;
  }

  .OptionsList {
    max-block-size: var(--max-h);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

Addon configuration:

    {
      name: '@storybook/addon-styling',
      options: {
        cssModules: true,
        postCss: {
          implementation: require('postcss'),
        },
      },
    },

Steps to reproduce the behavior

1. Create a css module and import it inside a react typescript (tsx) component.

Expected behavior

No errors.

Screenshots and/or logs

Environment

• OS: [macOS]
• Node.js version: [16.18.1]
• NPM version: [8.19.3]
• Browser (if applicable): any
• Browser version (if applicable): any
• Device (if applicable): any

Additional context

With the old plugin addon-postcss everything worked as expected.

[ShaunEvening]

@equinusocio, this is a case of loaders being applied multiple times. can you share your main.(js|ts) with me?

[equinusocio]

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

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  docs: {
    autodocs: true,
  },
  features: {
    storyStoreV7: true,
  },
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    'storybook-css-modules-preset',
    'storybook-addon-themes',
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: false,
      },
    }, {
      name: '@storybook/addon-styling',
      options: {
        cssModules: true,
        postCss: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  webpackFinal: async (config) => {
    if (config && config.resolve && config.resolve.alias) {
      config.resolve.alias['@/components'] = path.resolve(__dirname, '../src/');
      return config;
    }
    return config;
  },
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
};

export default config;

[equinusocio]

Got it. I didn't try to remove addons one by one. The issue is caused by storybook-css-modules-preset. By removing it everything seems to work as expected. Thanks for the patience

[ShaunEvening]

That's great news @equinusocio! I'm glad you got it figured out 🎉