fix(react): generate apps/libs using Emotion CSS with valid .babelrc files (#5336)

packages/react/src/generators/application/application.spec.ts

@@ -184,6 +184,25 @@ describe('app', () => {
     ).toContain('Welcome to my-app');
   });
 
+  it.each`
+    style
+    ${'styled-components'}
+    ${'styled-jsx'}
+    ${'@emotion/styled'}
+  `(
+    'should generate valid .babelrc JSON config for CSS-in-JS solutions',
+    async ({ style }) => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        style,
+      });
+
+      expect(() => {
+        JSON.parse(appTree.read(`apps/my-app/.babelrc`).toString());
+      }).not.toThrow();
+    }
+  );
+
   describe('--style scss', () => {
     it('should generate scss styles', async () => {
       await applicationGenerator(appTree, { ...schema, style: 'scss' });

packages/react/src/generators/library/files/lib/.babelrc__tmpl__

@@ -4,13 +4,13 @@
       "@nrwl/react/babel", {
         "runtime": "automatic",
         "useBuiltIns": "usage"
-        <% if (style === '@emotion/styled') { %>,"importSource": "@emotion/react" }<% } %>
+        <% if (style === '@emotion/styled') { %>,"importSource": "@emotion/react"<% } %>
       }
     ]
   ],
   "plugins": [
     <% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %>
     <% if (style === 'styled-jsx') { %>"styled-jsx/babel"<% } %>
-    <% if (style === '@emotion/styled') { %>,"@emotion/babel-plugin"<% } %>
+    <% if (style === '@emotion/styled') { %>"@emotion/babel-plugin"<% } %>
   ]
 }

packages/react/src/generators/library/library.spec.ts

@@ -614,4 +614,24 @@ describe('lib', () => {
       ).not.toBeDefined();
     });
   });
+
+  it.each`
+    style
+    ${'styled-components'}
+    ${'styled-jsx'}
+    ${'@emotion/styled'}
+  `(
+    'should generate valid .babelrc JSON config for CSS-in-JS solutions',
+    async ({ style }) => {
+      await libraryGenerator(appTree, {
+        ...defaultSchema,
+        style,
+        name: 'myLib',
+      });
+
+      expect(() => {
+        JSON.parse(appTree.read(`libs/my-lib/.babelrc`).toString());
+      }).not.toThrow();
+    }
+  );
 });