Fix the case when the styles are defined below the component and the … (#1829)

* Fix the case when the styles are defined below the component and the component uses xcss prop

* Changeset

---------

Co-authored-by: Liam Ma <[email protected]>

Author: liamqma

.changeset/wild-numbers-share.md

@@ -0,0 +1,5 @@
+---
+'@compiled/babel-plugin': patch
+---
+
+Resolve an issue where cssMap was being defined after its consumer, which relies on the xcss prop.

packages/babel-plugin/src/css-map/__tests__/index.test.ts

@@ -36,6 +36,37 @@ describe('css map basic functionality', () => {
     ]);
   });
 
+  it('should transform css map when the styles are defined below the component and the component uses xcss prop', () => {
+    const actual = transform(
+      `
+      import { cssMap } from '@compiled/react';
+
+      <Box xcss={styles.danger} />
+
+      const styles = cssMap(${styles});
+    `,
+      { pretty: true }
+    );
+
+    expect(actual).toMatchInlineSnapshot(`
+      "import * as React from "react";
+      import { ax, ix, CC, CS } from "@compiled/react/runtime";
+      const _4 = "._bfhkbf54{background-color:green}";
+      const _3 = "._syazbf54{color:green}";
+      const _2 = "._bfhk5scu{background-color:red}";
+      const _ = "._syaz5scu{color:red}";
+      <CC>
+        <CS>{[_, _2, _3, _4]}</CS>
+        {<Box xcss={styles.danger} />}
+      </CC>;
+      const styles = {
+        danger: "_syaz5scu _bfhk5scu",
+        success: "_syazbf54 _bfhkbf54",
+      };
+      "
+    `);
+  });
+
   it('should transform css map even when the styles are defined below the component', () => {
     const actual = transform(`
       import { cssMap } from '@compiled/react';

packages/babel-plugin/src/utils/css-builders.ts

@@ -698,7 +698,7 @@ const extractObjectExpression = (node: t.ObjectExpression, meta: Metadata): CSSO
  *
  * @returns {Boolean} Whether the cache was generated
  */
-const generateCacheForCSSMap = (node: t.Identifier, meta: Metadata): void => {
+export const generateCacheForCSSMap = (node: t.Identifier, meta: Metadata): void => {
   if (meta.state.cssMap[node.name] || meta.state.ignoreMemberExpressions[node.name]) {
     return;
   }

packages/babel-plugin/src/xcss-prop/index.ts

@@ -4,7 +4,7 @@ import * as t from '@babel/types';
 import type { Metadata } from '../types';
 import { buildCodeFrameError, getPathOfNode } from '../utils/ast';
 import { compiledTemplate } from '../utils/build-compiled-component';
-import { buildCss } from '../utils/css-builders';
+import { buildCss, generateCacheForCSSMap } from '../utils/css-builders';
 import { transformCssItems } from '../utils/transform-css-items';
 
 function getJsxAttributeExpressionContainer(path?: NodePath<t.JSXAttribute>) {
@@ -29,13 +29,15 @@ function staticObjectInvariant(expression: t.ObjectExpression, meta: Metadata) {
   );
 }
 
-function collectPathMemberExpressionIdentifiers(propPath: NodePath<t.JSXAttribute>): string[] {
-  const identifiers: string[] = [];
+function collectPathMemberExpressionIdentifiers(
+  propPath: NodePath<t.JSXAttribute>
+): t.Identifier[] {
+  const identifiers: t.Identifier[] = [];
 
   propPath.traverse({
     MemberExpression(node) {
       if (node.node.object.type === 'Identifier') {
-        identifiers.push(node.node.object.name);
+        identifiers.push(node.node.object);
       }
     },
   });
@@ -112,7 +114,13 @@ export const visitXcssPropPath = (path: NodePath<t.JSXOpeningElement>, meta: Met
     // 1. Dot notation, such as "styles.text"
     // 2. Bracket notation, such as "styles[appearance]"
     const identifiers = collectPathMemberExpressionIdentifiers(propPath);
-    const sheets = collectPassStyles(meta, identifiers);
+    identifiers.forEach((identifier) => {
+      generateCacheForCSSMap(identifier, meta);
+    });
+    const sheets = collectPassStyles(
+      meta,
+      identifiers.map((identifier) => identifier.name)
+    );
 
     if (sheets.length === 0) {
       // No sheets were extracted — bail out from the transform.