[Bug] Not compatible with storybook 7

[PascalvdHoek]

Describe the bug

Im trying to install this add on with storybook 7, but getting npm conflicts. It keeps asking for versions 6.5.8, but im at 7.0.0-rc.8

Steps to reproduce the behavior

1. add storybook at 7.0.0-rc.8
2. add storybook styling
3. See error

Expected behavior

Hopefully make it compatible with 7.0.0-rc8

Screenshots and/or logs

If applicable, add screenshots and/or logs to help explain your problem.

Additional context

some example errors:

[ShaunEvening]

Hey @PascalvdHoek

I'm just working out a few details to release v1.0.0 which will be compatible with SB 7 🎉

you can use it now by running: npm install -D @storybook/addon-styling@next

this will get you version 1.0.0-next.1

[PascalvdHoek]

Great it works with hte @next and a downgrade to sass-loader@10.4.1

[abdouthetif]

I have the same problem but i can't downgrade to sass-loader@10.4.1 because i'm using @symfony/webpack-encore@4.2.0 which needs sass-loader@^13.0.0

[stevensacks]

I am using 1.0.0-next.1 and Storybook with Webpack 5 and get the following error when I set cssModules: true as per the docs.

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules should be one of these:
   boolean | "local" | "global" | "pure" | "icss" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashSalt?, localIdentHashFunction?, localIdentHashDigest?, localIdentHashDigestLength?, hashStrategy?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, exportLocalsConvention?, exportOnlyLocals? }
   -> Allows to enable/disable CSS Modules or ICSS and setup configuration.
   -> Read more at https://github.com/webpack-contrib/css-loader#modules
   Details:
    * options.modules should be a boolean.
    * options.modules should be one of these:
      "local" | "global" | "pure" | "icss"
    * options.modules should be an object:
      object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashSalt?, localIdentHashFunction?, localIdentHashDigest?, localIdentHashDigestLength?, hashStrategy?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, exportLocalsConvention?, exportOnlyLocals? }
    at validate (/Users/me/project/node_modules/schema-utils/dist/validate.js:105:11)
    at Object.getOptions (/Users/me/project/node_modules/webpack/lib/NormalModule.js:588:18)
    at Object.loader (/Users/me/project/node_modules/css-loader/dist/index.js:22:27)

This error does not happen with Storybook built with Vite. Only Webpack.

[ShaunEvening]

@storybook/addon-styling@1.0.0 has been released which is upgrade for Storybook 7 🎉

@stevensacks your issue has been fixed for v1.0.0 😁

[stevensacks]

@Integrayshaun I updated to 1.0.0, but still getting this error:

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].use[1]!./src/components/Button/styles.module.css undefined
 - options.modules should be one of these:
   boolean | "local" | "global" | "pure" | "icss" | object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashSalt?, localIdentHashFunction?, localIdentHashDigest?, localIdentHashDigestLength?, hashStrategy?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, exportLocalsConvention?, exportOnlyLocals? }
   -> Allows to enable/disable CSS Modules or ICSS and setup configuration.
   -> Read more at https://github.com/webpack-contrib/css-loader#modules
   Details:
    * options.modules should be a boolean.
    * options.modules should be one of these:
      "local" | "global" | "pure" | "icss"
    * options.modules should be an object:
      object { auto?, mode?, localIdentName?, localIdentContext?, localIdentHashSalt?, localIdentHashFunction?, localIdentHashDigest?, localIdentHashDigestLength?, hashStrategy?, localIdentRegExp?, getLocalIdent?, namedExport?, exportGlobals?, exportLocalsConvention?, exportOnlyLocals? }

I tried clearing my storybook cache, and then tried nuking from orbit (deleting node_modules, package-lock.json then npm install), but still happening.

Here's my relevant main.ts configuration:

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

const config: StorybookConfig = {
    addons: [
        {
            name: '@storybook/addon-styling',
            options: {
                cssModules: true,
                postCss: true,   
            },
        },
        '@storybook/addon-links',
        '@storybook/addon-essentials',
    ],
    // ...
};

In Storybook 6, I was using storybook-css-modules and @storybook/addon-postcss without issue.

We have Tailwind and CSS Modules. Latest versions of everything (including SB 7.0.4)

[ShaunEvening]

I have no idea what happened but when 1.0.0 was published it didn't have the css-loader changes to make modules work 💀

I've just published 1.0.1 that includes the fix