fix: emotion alias for sb manager

.vscode/launch.json

@@ -13,7 +13,7 @@
       "stopOnEntry": true,
       "runtimeArgs": [
         "run-script",
-        "debug"
+        "start"
       ],
       "port": 9229,
       "skipFiles": [

examples/storybook-6-no-docs/package.json

@@ -17,7 +17,6 @@
     "@storybook/react": "^6.2.0-alpha.3",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.0.0",
-    "cross-env": "^5.2.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

examples/storybook-6/package.json

@@ -18,7 +18,6 @@
     "@storybook/react": "^6.2.0-alpha.3",
     "babel-loader": "^8.0.6",
     "babel-preset-react-app": "^9.0.0",
-    "cross-env": "^5.2.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

integrations/storybook/package.json

@@ -47,10 +47,12 @@
     "@component-controls/storybook-custom-docs": "^1.41.1",
     "@component-controls/webpack-configs": "^1.44.1",
     "@emotion/styled": "^11.0.0",
+    "@emotion/react": "^11.1.1",
     "typescript": "^4.0.5"
   },
   "devDependencies": {
     "@component-controls/ts-markdown-docs": "^1.37.0",
+    "@emotion/babel-plugin": "^11.0.0",
     "@storybook/addons": "^6.2.0-alpha.3",
     "@storybook/api": "^6.2.0-alpha.3",
     "@storybook/client-api": "^6.2.0-alpha.3",

integrations/storybook/src/preset.ts

@@ -1,16 +1,24 @@
-import path from 'path';
+import { RuleSetRule } from 'webpack';
 import { mergeWebpackConfig } from '@component-controls/webpack-configs';
 const LoaderPlugin = require('@component-controls/loader/plugin');
 import { PresetOptions, defaultRules } from './types';
 
-const toPath = (p: string) => path.join(process.cwd(), p);
-
 module.exports = {
   config: (entry: any[] = []) => {
     const result = [...entry];
     result.push(require.resolve('./config'));
     return result;
   },
+  babel: async (entry: any, options: any) => {
+    if (options._version >= '6.0.0') {
+      return {
+        ...entry,
+        plugins: [...entry.plugins, '@emotion'],
+      };
+    }
+    return entry;
+    // any extra options you want to set
+  },
   addons: (entry: any = {}) => {
     const { pages: customPages } = entry;
     const pages = customPages || [require.resolve('./full-page')];
@@ -45,7 +53,19 @@ module.exports = {
 
     return result;
   },
-
+  managerWebpack: (config: any) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          '@emotion/core': require.resolve('@emotion/react'),
+          'emotion-theming': require.resolve('@emotion/react'),
+        },
+      },
+    };
+  },
   webpackFinal: (config: any = {}, options: PresetOptions = {}) => {
     const mergedConfig = mergeWebpackConfig(
       config,
@@ -59,13 +79,47 @@ module.exports = {
         new LoaderPlugin({ defaultConfigPath: '.storybook' }),
       ],
     };
-    if (config._version > '6.0.0') {
+    if (newConfig.module) {
+      newConfig.module = {
+        ...newConfig.module,
+        rules: newConfig.module.rules.map(r => {
+          return Array.isArray(r.use)
+            ? {
+                ...r,
+                use: r.use.map(use =>
+                  (use as RuleSetRule).options && (use as RuleSetRule).options
+                    ? {
+                        ...(use as RuleSetRule),
+                        options: {
+                          ...(use as any).options,
+                          presets: Array.isArray((use as any).options?.presets)
+                            ? (use as any).options.presets.map(
+                                (preset: any) => {
+                                  return Array.isArray(preset)
+                                    ? preset.map(p => {
+                                        return p.runtime
+                                          ? { ...p, runtime: 'classic' }
+                                          : p;
+                                      })
+                                    : preset;
+                                },
+                              )
+                            : undefined,
+                        },
+                      }
+                    : use,
+                ),
+              }
+            : r;
+        }) as RuleSetRule[],
+      };
+
       newConfig.resolve = {
         ...config.resolve,
         alias: {
           ...config.resolve.alias,
-          '@emotion/core': toPath('node_modules/@emotion/react'),
-          'emotion-theming': toPath('node_modules/@emotion/react'),
+          '@emotion/core': require.resolve('@emotion/react'),
+          'emotion-theming': require.resolve('@emotion/react'),
         },
       };
     }