[Bug] Confusing / inaccurate output when running auto-config styling

[maslade]

Describe the bug

When running auto-config styling, it outputs some messages that seem to be incomplete or inaccurate.

1. I get a warning that says it didn't recognize any styling tools in my project. My webpack config is in webpack.config.js and has a fairly standard SASS setup:

        {
          test: /\.(s[ac]ss|css)$/i,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        },

2. The same warning says "Here's a list of things I know how to configure..." but doesn't list anything.
3. The above warning sounds like a failure, but then I get a green success box that says "What I did:" and shows no changes.
4. The above success box sounds like it did nothing, but when when I git diff, I see that it did in fact make changes. It looks like it configured style-loader and css-loader, but it doesn't work for my project.

After re-running a second time, I think I was confused on #2. It says "Here's a list of things.." and then presents an inline menu. But once you make your selection, the menu disappears so the final log makes it look like an empty list. I think it would be a little clearer to replace the menu with some text along the lines of "You manually selected SASS."

Steps to reproduce the behavior

1. Have a project with webpack.config.js configured with a SASS loader for importing scss files.
2. Run npx storybook@latest add @storybook/addon-styling-webpack

Expected behavior

It should work, or not. If it doesn't work, it shouldn't make changes or report success in output. If it does work, it shouldn't emit warnings. If it emits warnings, it should list supported packages.

Screenshots and/or logs

% npx @storybook/auto-config styling
Need to install the following packages:
@storybook/[email protected]
Ok to proceed? (y) y

npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported

╔ 👋 Hi there ════════════════════════════════════════════════════════════════════╗
║                                                                                 ║
║   I'm the configuration helper for "@storybook/addon-styling-webpack"!          ║
║                                                                                 ║
║   Hold on for a moment while I look at your project and get you all set up...   ║
║                                                                                 ║
╚═════════════════════════════════════════════════════════════════════════════════╝


╔ 💬 I need your help ═══════════════════════════════════════════════════════════════════╗
║                                                                                        ║
║   I didn't recognize any styling tools in your project that I know how to configure.   ║
║                                                                                        ║
║   Here's a list of things I know how to configure...                                   ║
║                                                                                        ║
╚════════════════════════════════════════════════════════════════════════════════════════╝

✔ Select the styling tools that I should configure › 

╔ ✨ SUCCESS ✨ ═════════════════════════════════════╗
║                                                    ║
║   I configured Storybook's Webpack as you asked!   ║
║                                                    ║
║   What I did:                                      ║
║                                                    ║
║                                                    ║
║   Next steps:                                      ║
║     - 🚀 Run: npm run storybook                    ║
║                                                    ║
╚════════════════════════════════════════════════════╝

host % git status
On branch storybook
Your branch is ahead of 'origin/storybook' by 1 commit.
  (use "git push" to publish your local commits)

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   .storybook/main.ts

no changes added to commit (use "git add" and/or "git commit -a")
host % git diff
diff --git a/.storybook/main.ts b/.storybook/main.ts
index cee6ec24..923dd7ec 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -14,7 +14,27 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
-    '@storybook/addon-styling-webpack'
+    '@storybook/addon-styling-webpack',
+    ({
+      name: "@storybook/addon-styling-webpack",
+
+      options: {
+        rules: [{
+      test: /\.css$/,
+      sideEffects: true,
+      use: [
+          require.resolve("style-loader"),
+          {
+              loader: require.resolve("css-loader"),
+              options: {
+                  
+                  
+              },
+          },
+      ],
+    },],
+      }
+    })
   ],
   webpackFinal: async (config) => {
     if ( config.resolve ) {

Environment

• OS: MacOS
• Node.js version: 18.20
• NPM version: 10.7

Additional context

Add any other context about the problem here.

[maslade]

I was able to fix the final result by updating test to include SASS extensions and use to include the sass-loader.