From 52f824cfe1fa827c777fa8d35b765702efaca605 Mon Sep 17 00:00:00 2001
From: Jorge Rodriguez <jorge.rodriguez@lego.com>
Date: Tue, 7 Jun 2022 23:18:34 +0200
Subject: [PATCH] feat(storybook): Custom .babelrc in Storybook (#10551)

---
 docs/generated/packages/storybook.json        |  4 ++
 packages/react/plugins/storybook/index.ts     | 53 ++++++++++---------
 .../src/executors/storybook/schema.json       |  4 ++
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/docs/generated/packages/storybook.json b/docs/generated/packages/storybook.json
index 682e90834d011..b14378b3213f6 100644
--- a/docs/generated/packages/storybook.json
+++ b/docs/generated/packages/storybook.json
@@ -307,6 +307,10 @@
                 "type": "string",
                 "description": "Path to storybook preview.js file."
               },
+              "babelrcPath": {
+                "type": "string",
+                "description": "Path to storybook .babelrc file."
+              },
               "srcRoot": {
                 "type": "string",
                 "description": "Project source path."
diff --git a/packages/react/plugins/storybook/index.ts b/packages/react/plugins/storybook/index.ts
index 6d2e2bba9c608..ca8b2c40f77bd 100644
--- a/packages/react/plugins/storybook/index.ts
+++ b/packages/react/plugins/storybook/index.ts
@@ -147,31 +147,36 @@ export const webpack = async (
       '11.0.0'
     )
   ) {
-    const babelrc = readJsonFile(
-      joinPathFragments(options.configDir, '../', '.babelrc')
-    );
-    if (babelrc?.plugins?.includes('@emotion/babel-plugin')) {
-      resolvedEmotionAliases = {
-        resolve: {
-          alias: {
-            '@emotion/core': joinPathFragments(
-              workspaceRoot,
-              'node_modules',
-              '@emotion/react'
-            ),
-            '@emotion/styled': joinPathFragments(
-              workspaceRoot,
-              'node_modules',
-              '@emotion/styled'
-            ),
-            'emotion-theming': joinPathFragments(
-              workspaceRoot,
-              'node_modules',
-              '@emotion/react'
-            ),
+    try {
+      const babelrc = readJsonFile(
+        options.babelrcPath ||
+          joinPathFragments(options.configDir, '../', '.babelrc')
+      );
+      if (babelrc?.plugins?.includes('@emotion/babel-plugin')) {
+        resolvedEmotionAliases = {
+          resolve: {
+            alias: {
+              '@emotion/core': joinPathFragments(
+                workspaceRoot,
+                'node_modules',
+                '@emotion/react'
+              ),
+              '@emotion/styled': joinPathFragments(
+                workspaceRoot,
+                'node_modules',
+                '@emotion/styled'
+              ),
+              'emotion-theming': joinPathFragments(
+                workspaceRoot,
+                'node_modules',
+                '@emotion/react'
+              ),
+            },
           },
-        },
-      };
+        };
+      }
+    } catch (error) {
+      // silently ignore if the .babelrc doesn't exist
     }
   }
   return mergeWebpack.merge(
diff --git a/packages/storybook/src/executors/storybook/schema.json b/packages/storybook/src/executors/storybook/schema.json
index 98c90ba461d82..e6fb1182d6d99 100644
--- a/packages/storybook/src/executors/storybook/schema.json
+++ b/packages/storybook/src/executors/storybook/schema.json
@@ -76,6 +76,10 @@
           "type": "string",
           "description": "Path to storybook preview.js file."
         },
+        "babelrcPath": {
+          "type": "string",
+          "description": "Path to storybook .babelrc file."
+        },
         "srcRoot": {
           "type": "string",
           "description": "Project source path."