chore: @storybook/addon-styling -> @storybook/addon-styling-webpack (#…

…4522)

Co-authored-by: s-sasaki-0529 <[email protected]>

.storybook/main.ts

@@ -25,13 +25,26 @@ const config: StorybookConfig = {
       },
     },
     {
-      name: '@storybook/addon-styling',
+      name: '@storybook/addon-styling-webpack',
       options: {
-        // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
-        // For more details on this addon's options.
-        postCss: {
-          implementation: require.resolve('postcss'),
-        },
+        rules: [
+          // Replaces existing CSS rules to support PostCSS
+          {
+            test: /\.css$/,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: { importLoaders: 1 },
+              },
+              {
+                // Gets options from `postcss.config.js` in your project root
+                loader: 'postcss-loader',
+                options: { implementation: require.resolve('postcss') },
+              },
+            ],
+          },
+        ],
       },
     },
     'storybook-addon-pseudo-states',

package.json

@@ -5,14 +5,17 @@
   "author": "SmartHR-UI Team",
   "dependencies": {
     "@smarthr/wareki": "^1.2.0",
+    "css-loader": "^6.10.0",
     "dayjs": "^1.11.10",
     "lodash.merge": "^4.6.2",
     "lodash.range": "^3.2.0",
     "polished": "^4.3.0",
+    "postcss-loader": "^8.1.1",
     "react-draggable": "^4.4.6",
     "react-icons": "^5.0.1",
     "react-innertext": "^1.1.5",
     "react-transition-group": "^4.4.5",
+    "style-loader": "^3.3.4",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "^3.4.3"
   },
@@ -28,7 +31,7 @@
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-storysource": "^7.6.17",
-    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^1.0.0",
     "@storybook/cli": "^7.6.17",
     "@storybook/manager-api": "7.6.17",
     "@storybook/react": "^7.6.17",