Docs: Point to styling-webpack addon in styling docs #24348

(cherry picked from commit abe0d61)

code/addons/themes/docs/api.md

@@ -7,7 +7,7 @@
 Takes your provider component, global styles, and theme(s)to wrap your stories in.
 
 ```js
-import { withThemeFromJSXProvider } from '@storybook/addon-styling';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 
 export const decorators = [
   withThemeFromJSXProvider({
@@ -36,7 +36,7 @@ Available options:
 Takes your theme class names to apply your parent element to enable your theme(s).
 
 ```js
-import { withThemeByClassName } from '@storybook/addon-styling';
+import { withThemeByClassName } from '@storybook/addon-themes';
 
 export const decorators = [
   withThemeByClassName({
@@ -62,7 +62,7 @@ Available options:
 Takes your theme names and data attribute to apply your parent element to enable your theme(s).
 
 ```js
-import { withThemeByDataAttribute } from '@storybook/addon-styling';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
 export const decorators = [
   withThemeByDataAttribute({
@@ -94,7 +94,7 @@ If none of these decorators work for your library there is still hope. We've pro
 Pulls the selected theme from storybook's global state.
 
 ```js
-import { DecoratorHelpers } from '@storybook/addon-styling';
+import { DecoratorHelpers } from '@storybook/addon-themes';
 const { pluckThemeFromContext } = DecoratorHelpers;
 
 export const myCustomDecorator =
@@ -111,7 +111,7 @@ export const myCustomDecorator =
 Returns the theme parameters for this addon.
 
 ```js
-import { DecoratorHelpers } from '@storybook/addon-styling';
+import { DecoratorHelpers } from '@storybook/addon-themes';
 const { useThemeParameters } = DecoratorHelpers;
 
 export const myCustomDecorator =
@@ -128,7 +128,7 @@ export const myCustomDecorator =
 Used to register the themes and defaultTheme with the addon state.
 
 ```js
-import { DecoratorHelpers } from '@storybook/addon-styling';
+import { DecoratorHelpers } from '@storybook/addon-themes';
 const { initializeThemeState } = DecoratorHelpers;
 
 export const myCustomDecorator = ({ themes, defaultState, ...rest }) => {
@@ -147,7 +147,7 @@ Let's use Vuetify as an example. Vuetify uses it's own global state to know whic
 ```js
 // .storybook/withVeutifyTheme.decorator.js
 
-import { DecoratorHelpers } from '@storybook/addon-styling';
+import { DecoratorHelpers } from '@storybook/addon-themes';
 import { useTheme } from 'vuetify';
 
 const { initializeThemeState, pluckThemeFromContext, useThemeParameters } = DecoratorHelpers;

docs/configure/styling-and-css.md

@@ -2,7 +2,11 @@
 title: 'Styling and CSS'
 ---
 
-There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration. To make this easier, we recommend using [`@storybook/addon-styling`](https://github.com/storybookjs/addon-styling).
+There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration.
+
+If you're using Vite to build your Storybook, you're covered! Storybook will use your vite config file which supports most popular styling tools out-of-the-box 🎉. However, if you're using Webpack, you may need some extra configuration. To make this easier, we recommend using [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/).
+
+**Note**: If you're using Storybook with Angular or Next.js, you can skip this section. Storybook will automatically use the same styling configuration as your application.
 
 ## Importing CSS files
 
@@ -25,11 +29,11 @@ If your component files import their CSS files, this will work too. The noticeab
 
 If you're using Vite as your builder, you're covered! Vite supports Sass and PostCSS out-of-the-box 🎉
 
-However, if you're using Webpack and want to use Sass and PostCss, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling`](https://github.com/storybookjs/addon-styling#storybookaddon-styling) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).
+However, if you're using Webpack and want to use Sass and PostCss, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).
 
 ## CSS-in-JS
 
-CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with `@storybook/addon-styling`'s [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/addon-styling/blob/next/docs/api.md#withthemefromjsxprovider).
+CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with `@storybook/addon-themes`'s [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider).
 
 ## Adding webfonts
 
@@ -39,7 +43,7 @@ If you need webfonts to be available, you may need to add some code to the [`.st
 
 ### Styles aren't being applied with Angular
 
-The latest Angular releases introduced significant changes in configuring and styling projects. If you're working with an Angular version greater than 13 and your styles aren't being applied, you may need to check your `angular.json` ad adjust the `builder` configuration to import your CSS:
+The latest Angular releases introduced significant changes in configuring and styling projects. If you're working with an Angular version greater than 13 and your styles aren't being applied, you may need to check your `angular.json` and adjust the `builder` configuration to import your CSS:
 
 ```json
 {

docs/snippets/common/main-config-addons.js.mdx

@@ -8,9 +8,23 @@ export default {
   addons: [
     '@storybook/addon-essentials',
     {
-      name: '@storybook/addon-styling',
+      name: '@storybook/addon-styling-webpack',
       options: {
-        postCss: true,
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  implementation: require.resolve('postcss'),
+                },
+              },
+            ],
+          },
+        ],
       },
     },
   ],

docs/snippets/common/main-config-addons.ts.mdx

@@ -10,9 +10,23 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-essentials',
     {
-      name: '@storybook/addon-styling',
+      name: '@storybook/addon-styling-webpack',
       options: {
-        postCss: true,
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  implementation: require.resolve('postcss'),
+                },
+              },
+            ],
+          },
+        ],
       },
     },
   ],