Improve perf by roughly 10% by getting rid of hidden AST parsing (#1833)

* Improve perf by roughly 10% by getting rid of hidden AST parsing

* Update changeset

* Update snapshots

---------

Co-authored-by: Kylor Hall <[email protected]>

Author: shanshrew

.changeset/itchy-ears-try.md

@@ -0,0 +1,5 @@
+---
+'@compiled/babel-plugin': patch
+---
+
+Babel template string replaced with it's AST node counterparts - Minorly improving performance

packages/babel-plugin/src/css-prop/__tests__/object-literal.test.ts

@@ -794,11 +794,11 @@ describe('css prop object literal', () => {
 
     expect(actual).toMatchInlineSnapshot(`
       "import*as React from'react';import{ax,ix,CC,CS}from"@compiled/react/runtime";const _4="._19bv1ylp{padding-left:40px}";const _3="._n3td1ul9{padding-bottom:30px}";const _2="._u5f3gktf{padding-right:20px}";const _="._ca0q19bv{padding-top:10px}";const morePadding=true;<CC>
-          <CS>{[_,_2,_3,_4]}</CS>
-          {<div className={ax(["_ca0q19bv _u5f3gktf _n3td1ul9 _19bv1ylp"])}>
+        <CS>{[_,_2,_3,_4]}</CS>
+        {<div className={ax(["_ca0q19bv _u5f3gktf _n3td1ul9 _19bv1ylp"])}>
             Hello world
           </div>}
-        </CC>;"
+      </CC>;"
     `);
   });
 });

packages/babel-plugin/src/utils/build-compiled-component.ts

@@ -1,7 +1,4 @@
-import generate from '@babel/generator';
-import template from '@babel/template';
 import * as t from '@babel/types';
-import { unique } from '@compiled/utils';
 
 import type { Metadata } from '../types';
 
@@ -12,6 +9,10 @@ import { hoistSheet } from './hoist-sheet';
 import { transformCssItems } from './transform-css-items';
 import type { CSSOutput } from './types';
 
+const WHITESPACE_TEXT_NODES = {
+  leading: t.jsxText('\n  '),
+  trailing: t.jsxText('\n'),
+};
 /**
  * Will return a generated AST for a Compiled Component.
  * This is primarily used for CSS prop and ClassNames apis.
@@ -21,24 +22,37 @@ import type { CSSOutput } from './types';
  * @param meta {Metadata} Useful metadata that can be used during the transformation
  */
 export const compiledTemplate = (node: t.Expression, sheets: string[], meta: Metadata): t.Node => {
-  const nonceAttribute = meta.state.opts.nonce ? `nonce={${meta.state.opts.nonce}}` : '';
-
+  const nonce = meta.state.opts.nonce;
+  const nonceAttribute = nonce
+    ? t.jsxAttribute(t.jsxIdentifier('nonce'), t.jsxExpressionContainer(t.identifier(nonce)))
+    : null;
   const [keyAttribute] = getJSXAttribute(node, 'key');
 
-  return template(
-    `
-  <CC ${keyAttribute ? generate(keyAttribute).code : ''}>
-    <CS ${nonceAttribute}>{%%cssNode%%}</CS>
-    {%%jsxNode%%}
-  </CC>
-  `,
-    {
-      plugins: ['jsx'],
-    }
-  )({
-    jsxNode: node,
-    cssNode: t.arrayExpression(unique(sheets).map((sheet: string) => hoistSheet(sheet, meta))),
-  }) as t.Node;
+  return t.jsxElement(
+    t.jsxOpeningElement(
+      t.jsxIdentifier('CC'),
+      keyAttribute ? [t.jsxAttribute(t.jsxIdentifier('key'), keyAttribute.value)] : [],
+      false
+    ),
+    t.jsxClosingElement(t.jsxIdentifier('CC')),
+    [
+      WHITESPACE_TEXT_NODES.leading,
+      t.jsxElement(
+        t.jsxOpeningElement(t.jsxIdentifier('CS'), nonceAttribute ? [nonceAttribute] : [], false),
+        t.jsxClosingElement(t.jsxIdentifier('CS')),
+        [
+          t.jsxExpressionContainer(
+            t.arrayExpression(
+              Array.from(new Set(sheets)).map((sheet: string) => hoistSheet(sheet, meta))
+            )
+          ),
+        ]
+      ),
+      WHITESPACE_TEXT_NODES.leading,
+      t.jsxExpressionContainer(node),
+      WHITESPACE_TEXT_NODES.trailing,
+    ]
+  );
 };
 
 /**