Fix react runtime ax function returning incorrect result for selectors (#1355)

* Fix react runtime ax function returning incorrect result for selectors

* Bump size-limit on ax import

Author: JakeLane

.changeset/two-avocados-kick.md

@@ -0,0 +1,5 @@
+---
+'@compiled/react': patch
+---
+
+Fix react runtime ax function returning incorrect result for selectors

package.json

@@ -139,7 +139,7 @@
     },
     {
       "path": "./packages/react/dist/browser/runtime.js",
-      "limit": "166B",
+      "limit": "189B",
       "import": "{ ax }",
       "ignore": [
         "react"

packages/react/src/runtime/__tests__/ax.test.ts

@@ -25,10 +25,22 @@ describe('ax', () => {
     expect(result).toEqual('_aaaacccc');
   });
 
+  it('should ensure the last atomic declaration of many single groups wins', () => {
+    const result = ax(['_aaaabbbb', '_aaaacccc', '_aaaadddd', '_aaaaeeee']);
+
+    expect(result).toEqual('_aaaaeeee');
+  });
+
   it('should ensure the last atomic declaration of a multi group wins', () => {
-    const result = ax(['_aaaabbbb _aaaacccc', 'foo']);
+    const result = ax(['_aaaabbbb _aaaacccc']);
+
+    expect(result).toEqual('_aaaacccc');
+  });
+
+  it('should ensure the last atomic declaration of many multi groups wins', () => {
+    const result = ax(['_aaaabbbb _aaaacccc _aaaadddd _aaaaeeee']);
 
-    expect(result).toEqual('_aaaacccc foo');
+    expect(result).toEqual('_aaaaeeee');
   });
 
   it('should not remove any atomic declarations if there are no duplicate groups', () => {
@@ -49,4 +61,10 @@ describe('ax', () => {
 
     expect(result).toEqual('hello_there hello_world');
   });
+
+  it('should ignore non atomic declarations when atomic declarations exist', () => {
+    const result = ax(['hello_there', 'hello_world', '_aaaabbbb']);
+
+    expect(result).toEqual('hello_there hello_world _aaaabbbb');
+  });
 });

packages/react/src/runtime/ax.ts

@@ -28,8 +28,8 @@ const ATOMIC_GROUP_LENGTH = 5;
  * @param classes
  */
 export default function ax(classNames: (string | undefined | false)[]): string | undefined {
-  if (classNames.length <= 1) {
-    // short circuit if theres no custom class names.
+  if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
+    // short circuit if there's no custom class names.
     return classNames[0] || undefined;
   }