@compiled/react 0.11.4 → 0.13.0

package/src/__tests__/server-side-hydrate.test.tsx

@@ -16,7 +16,7 @@ describe('server side hydrate', () => {
     jest.resetModules();
     // We need to force this module to re-instantiate because on the client
     // when it does it will move all found SSRd style elements to the head.
-    require('../runtime');
+    require('../runtime/style-cache');
   };
 
   const appendHTML = (markup: string) => {

package/src/__tests__/ssr.test.tsx

@@ -17,7 +17,7 @@ describe('SSR', () => {
     const result = renderToStaticMarkup(<StyledDiv>hello world</StyledDiv>);
 
     expect(result).toMatchInlineSnapshot(
-      `"<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1wyb1fwx{font-size:12px}</style><div class=\\"_1wyb1fwx\\">hello world</div>"`
+      `"<style data-cmpld="true" nonce="k0Mp1lEd">._1wyb1fwx{font-size:12px}</style><div class="_1wyb1fwx">hello world</div>"`
     );
   });
 
@@ -44,7 +44,7 @@ describe('SSR', () => {
     );
 
     expect(result).toMatchInlineSnapshot(
-      `"<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1wyb1fwx{font-size:12px}</style><div class=\\"_1wyb1fwx\\">hello world</div><div class=\\"_1wyb1fwx\\">hello world</div>"`
+      `"<style data-cmpld="true" nonce="k0Mp1lEd">._1wyb1fwx{font-size:12px}</style><div class="_1wyb1fwx">hello world</div><div class="_1wyb1fwx">hello world</div>"`
     );
   });
 
@@ -68,7 +68,7 @@ describe('SSR', () => {
     );
 
     expect(result).toMatchInlineSnapshot(
-      `"<div><div><div><style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1wyb1fwx{font-size:12px}</style><div class=\\"_1wyb1fwx\\">hello world</div></div></div><div class=\\"_1wyb1fwx\\">hello world</div></div>"`
+      `"<div><div><div><style data-cmpld="true" nonce="k0Mp1lEd">._1wyb1fwx{font-size:12px}</style><div class="_1wyb1fwx">hello world</div></div></div><div class="_1wyb1fwx">hello world</div></div>"`
     );
   });
 
@@ -88,7 +88,7 @@ describe('SSR', () => {
     );
 
     expect(result).toMatchInlineSnapshot(
-      `"<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1e0c1txw{display:flex}</style><div class=\\"_1e0c1txw\\"><style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1wyb1fwx{font-size:12px}</style><div class=\\"_1wyb1fwx\\">hello world</div><div class=\\"_1wyb1fwx\\">hello world</div></div>"`
+      `"<style data-cmpld="true" nonce="k0Mp1lEd">._1e0c1txw{display:flex}</style><div class="_1e0c1txw"><style data-cmpld="true" nonce="k0Mp1lEd">._1wyb1fwx{font-size:12px}</style><div class="_1wyb1fwx">hello world</div><div class="_1wyb1fwx">hello world</div></div>"`
     );
   });
 
@@ -135,8 +135,8 @@ describe('SSR', () => {
     );
 
     expect(result.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
-      "<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._ysv75scu:link{color:red}._105332ev:visited{color:pink}._f8pjbf54:focus{color:green}._30l31gy6:hover{color:yellow}._9h8h13q2:active{color:blue}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._1cld11x8:active{color:black}}</style>
-      <a href=\\"https://atlassian.design\\" class=\\"_1e0c1txw _1wyb12am _syaz1cnh _30l31gy6 _9h8h13q2 _ysv75scu _1df61gy6 _7okp11x8 _f8pjbf54 _105332ev _1o8z1gy6 _1cld11x8\\">Atlassian Design System</a>"
+      "<style data-cmpld="true" nonce="k0Mp1lEd">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._ysv75scu:link{color:red}._105332ev:visited{color:pink}._f8pjbf54:focus{color:green}._30l31gy6:hover{color:yellow}._9h8h13q2:active{color:blue}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._1cld11x8:active{color:black}}</style>
+      <a href="https://atlassian.design" class="_1e0c1txw _1wyb12am _syaz1cnh _30l31gy6 _9h8h13q2 _ysv75scu _1df61gy6 _7okp11x8 _f8pjbf54 _105332ev _1o8z1gy6 _1cld11x8">Atlassian Design System</a>"
     `);
   });
 
@@ -154,7 +154,7 @@ describe('SSR', () => {
     );
 
     expect(result).toMatchInlineSnapshot(
-      `"<style data-cmpld=\\"true\\" nonce=\\"k0Mp1lEd\\">._1m9k13q2>span{color:blue}</style><div class=\\"_1m9k13q2\\"><span>hello world</span></div>"`
+      `"<style data-cmpld="true" nonce="k0Mp1lEd">._1m9k13q2>span{color:blue}</style><div class="_1m9k13q2"><span>hello world</span></div>"`
     );
   });
 });

package/src/global.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    __COMPILED_IMPORTED__: undefined | true;
+  }
+}

package/src/runtime/__perf__/ac.test.ts

@@ -0,0 +1,97 @@
+import { runBenchmark } from '@compiled/benchmark';
+
+import { ac } from '../ac';
+import ax from '../ax';
+
+describe('ac vs ax benchmark', () => {
+  const arr = [
+    '_19itglyw',
+    '_2rko1l7b',
+    '_ca0qftgi',
+    '_u5f319bv',
+    '_n3tdftgi',
+    '_19bv19bv',
+    '_bfhk1mzw',
+    '_syazu67f',
+    '_k48p1nn1',
+    '_ect41kw7',
+    '_1wybdlk8',
+    '_irr3mlcl',
+    '_1di6vctu',
+    // `undefined` is an acceptable parameter so we want to include it in the test case.
+    // Example: ax(['aaaabbbb', foo() && "aaaacccc"])
+    undefined,
+  ];
+
+  // Remove undefined and join the strings
+  const str = arr.slice(0, -1).join(' ');
+
+  const arrWithCompressedClassNames = arr.map((item) =>
+    item ? `${item.slice(0, 4)}_${item.slice(8)}` : item
+  );
+
+  const strWithCompressedClassNames = arr
+    .map((item) => (item ? `${item.slice(0, 4)}_${item.slice(8)}` : item))
+    .slice(0, -1)
+    .join(' ');
+
+  it('compares ax array with ac array', async () => {
+    // Remove undefined and join the strings
+    const benchmark = await runBenchmark('ax', [
+      {
+        name: 'ax() array',
+        fn: () => ax(arr),
+      },
+      {
+        name: 'ac() array with compressed class names',
+        fn: () => {
+          ac(arrWithCompressedClassNames)?.toString();
+        },
+      },
+    ]);
+
+    expect(benchmark).toMatchObject({
+      fastest: ['ax() array'],
+    });
+  }, 30000);
+
+  it('compares ax string with ac string', async () => {
+    // Remove undefined and join the strings
+    const benchmark = await runBenchmark('ax', [
+      {
+        name: 'ax() string',
+        fn: () => ax([str, undefined]),
+      },
+      {
+        name: 'ac() string with compressed class names',
+        fn: () => {
+          ac([strWithCompressedClassNames, undefined])?.toString();
+        },
+      },
+    ]);
+
+    expect(benchmark).toMatchObject({
+      fastest: ['ax() string'],
+    });
+  }, 30000);
+
+  it('compares chaining ax with chaining ac', async () => {
+    // Remove undefined and join the strings
+    const benchmark = await runBenchmark('ax', [
+      {
+        name: 'chain ax() string',
+        fn: () => ax([ax([str, undefined]), '_aaaabbbb']),
+      },
+      {
+        name: 'chain ac() string with compressed class names',
+        fn: () => {
+          ac([ac([strWithCompressedClassNames, undefined]), '_aaaa_a'])?.toString();
+        },
+      },
+    ]);
+
+    expect(benchmark).toMatchObject({
+      fastest: ['chain ac() string with compressed class names'],
+    });
+  }, 30000);
+});

package/src/runtime/__perf__/ax.test.ts

@@ -3,24 +3,26 @@ import { runBenchmark } from '@compiled/benchmark';
 import { ax } from '../index';
 
 describe('ax benchmark', () => {
-  it('completes with ax() string as the fastest', async () => {
-    const arr = [
-      '_19itglyw',
-      '_2rko1l7b',
-      '_ca0qftgi',
-      '_u5f319bv',
-      '_n3tdftgi',
-      '_19bv19bv',
-      '_bfhk1mzw',
-      '_syazu67f',
-      '_k48p1nn1',
-      '_ect41kw7',
-      '_1wybdlk8',
-      '_irr3mlcl',
-      '_1di6vctu',
-      undefined,
-    ];
+  const arr = [
+    '_19itglyw',
+    '_2rko1l7b',
+    '_ca0qftgi',
+    '_u5f319bv',
+    '_n3tdftgi',
+    '_19bv19bv',
+    '_bfhk1mzw',
+    '_syazu67f',
+    '_k48p1nn1',
+    '_ect41kw7',
+    '_1wybdlk8',
+    '_irr3mlcl',
+    '_1di6vctu',
+    // `undefined` is an acceptable parameter so we want to include it in the test case.
+    // Example: ax(['aaaabbbb', foo() && "aaaacccc"])
+    undefined,
+  ];
 
+  it('completes with ax() string as the fastest', async () => {
     // Remove undefined and join the strings
     const str = arr.slice(0, -1).join(' ');
 

package/src/runtime/__tests__/ac.test.ts

@@ -0,0 +1,112 @@
+import { ac, memoizedAc, getCache } from '../ac';
+
+describe('ac', () => {
+  const isEnabled: boolean = (() => false)();
+
+  it.each([
+    ['should handle empty array', [], undefined],
+    ['should handle array with undefined', [undefined], undefined],
+    ['should join single classes together', ['foo', 'bar'], 'foo bar'],
+    ['should join multi classes together', ['foo baz', 'bar'], 'foo baz bar'],
+    ['should remove undefined', ['foo', 'bar', undefined], 'foo bar'],
+    [
+      'should ensure the last atomic declaration of a single group wins',
+      ['_aaaabbbb', '_aaaacccc'],
+      '_aaaacccc',
+    ],
+    [
+      'should ensure the last atomic declaration of a single group with short class name wins',
+      ['_aaaabbbb', '_aaaacccc', '_aaaa_a'],
+      'a',
+    ],
+    [
+      'should ensure the last atomic declaration of many single groups wins',
+      ['_aaaabbbb', '_aaaacccc', '_aaaadddd', '_aaaaeeee'],
+      '_aaaaeeee',
+    ],
+    [
+      'should ensure the last atomic declaration of many single groups with short class name wins',
+      ['_aaaabbbb', '_aaaacccc', '_aaaa_a', '_aaaa_b'],
+      'b',
+    ],
+    [
+      'should ensure the last atomic declaration of a multi group wins',
+      ['_aaaabbbb _aaaacccc'],
+      '_aaaacccc',
+    ],
+    [
+      'should ensure the last atomic declaration of a multi group with short class name wins',
+      ['_aaaa_e', '_aaaabbbb _aaaacccc'],
+      '_aaaacccc',
+    ],
+    [
+      'should ensure the last atomic declaration of many multi groups wins',
+      ['_aaaabbbb _aaaacccc _aaaadddd _aaaaeeee'],
+      '_aaaaeeee',
+    ],
+    [
+      'should ensure the last atomic declaration of many multi groups with short class name wins',
+      ['_aaaabbbb', '_aaaa_a', '_bbbb_b', '_ddddcccc'],
+      'a b _ddddcccc',
+    ],
+    [
+      'should not remove any atomic declarations if there are no duplicate groups',
+      ['_aaaabbbb', '_bbbbcccc'],
+      '_aaaabbbb _bbbbcccc',
+    ],
+    [
+      'should not remove any atomic declarations if there are short class name and no duplicate groups',
+      ['_eeee_e', '_aaaabbbb', '_bbbbcccc'],
+      'e _aaaabbbb _bbbbcccc',
+    ],
+    ['should not apply conditional class', [isEnabled && 'foo', 'bar'], 'bar'],
+    [
+      'should ignore non atomic declarations',
+      ['hello_there', 'hello_world'],
+      'hello_there hello_world',
+    ],
+    [
+      'should ignore non atomic declarations when atomic declarations exist',
+      ['hello_there', 'hello_world', '_aaaabbbb'],
+      'hello_there hello_world _aaaabbbb',
+    ],
+    [
+      'should ignore non atomic declarations when atomic declarations with short class name exist',
+      ['hello_there', 'hello_world', '_aaaa_a'],
+      'hello_there hello_world a',
+    ],
+  ])('%s', (_, params, result) => {
+    expect(result).toEqual(ac(params)?.toString());
+  });
+
+  it('should ensure the last atomic declaration wins if calling ax multiple times with short class names', () => {
+    expect(ac([ac(['_aaaa_b']), '_aaaa_c'])?.toString()).toEqual('c');
+  });
+});
+
+describe('memoizedAc', () => {
+  it('should cache correctly', () => {
+    memoizedAc([memoizedAc(['_aaaa_b', '_aaaabbbb', 'hello_world']), '_bbbb_d', '_aaaa_e']);
+
+    expect(getCache()).toMatchInlineSnapshot(`
+      Map {
+        "_aaaa_b _aaaabbbb hello_world" => AtomicGroups {
+          "values": Map {
+            "_aaaa" => "_aaaabbbb",
+            "hello_world" => "hello_world",
+          },
+        },
+        "_aaaabbbb hello_world _bbbb_d _aaaa_e" => AtomicGroups {
+          "values": Map {
+            "_aaaa" => "e",
+            "hello_world" => "hello_world",
+            "_bbbb" => "d",
+          },
+        },
+      }
+    `);
+  });
+  it('should not create a new ref', () => {
+    expect(memoizedAc(['a'])).toBe(memoizedAc(['a']));
+  });
+});

package/src/runtime/__tests__/ax.test.ts

@@ -1,70 +1,56 @@
 import ax from '../ax';
 
 describe('ax', () => {
-  it('should join single classes together', () => {
-    const result = ax(['foo', 'bar']);
-
-    expect(result).toEqual('foo bar');
-  });
-
-  it('should join multi classes together', () => {
-    const result = ax(['foo baz', 'bar']);
-
-    expect(result).toEqual('foo baz bar');
-  });
-
-  it('should remove undefined', () => {
-    const result = ax(['foo', 'bar', undefined]);
-
-    expect(result).toEqual('foo bar');
-  });
-
-  it('should ensure the last atomic declaration of a single group wins', () => {
-    const result = ax(['_aaaabbbb', '_aaaacccc']);
-
-    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']);
-
-    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('_aaaaeeee');
-  });
-
-  it('should not remove any atomic declarations if there are no duplicate groups', () => {
-    const result = ax(['_aaaabbbb', '_bbbbcccc']);
-
-    expect(result).toEqual('_aaaabbbb _bbbbcccc');
-  });
-
-  it('should not apply conditional class', () => {
-    const isEnabled: boolean = (() => false)();
-    const result = ax([isEnabled && 'foo', 'bar']);
-
-    expect(result).toEqual('bar');
-  });
-
-  it('should ignore non atomic declarations', () => {
-    const result = ax(['hello_there', 'hello_world']);
-
-    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');
+  const isEnabled: boolean = (() => false)();
+
+  it.each([
+    ['should handle empty array', [], undefined],
+    ['should handle array with undefined', [undefined], undefined],
+    ['should join single classes together', ['foo', 'bar'], 'foo bar'],
+    ['should join multi classes together', ['foo baz', 'bar'], 'foo baz bar'],
+    ['should remove undefined', ['foo', 'bar', undefined], 'foo bar'],
+    [
+      'should ensure the last atomic declaration of a single group wins',
+      ['_aaaabbbb', '_aaaacccc'],
+      '_aaaacccc',
+    ],
+    [
+      'should ensure the last atomic declaration of many single groups wins',
+      ['_aaaabbbb', '_aaaacccc', '_aaaadddd', '_aaaaeeee'],
+      '_aaaaeeee',
+    ],
+    [
+      'should ensure the last atomic declaration of a multi group wins',
+      ['_aaaabbbb _aaaacccc'],
+      '_aaaacccc',
+    ],
+    [
+      'should ensure the last atomic declaration of many multi groups wins',
+      ['_aaaabbbb _aaaacccc _aaaadddd _aaaaeeee'],
+      '_aaaaeeee',
+    ],
+    [
+      'should ensure the last atomic declaration of many multi groups with short class name wins',
+      ['_aaaabbbb', '_aaaaaaa', '_ddddbbb', '_ddddcccc'],
+      '_aaaaaaa _ddddcccc',
+    ],
+    [
+      'should not remove any atomic declarations if there are no duplicate groups',
+      ['_aaaabbbb', '_bbbbcccc'],
+      '_aaaabbbb _bbbbcccc',
+    ],
+    ['should not apply conditional class', [isEnabled && 'foo', 'bar'], 'bar'],
+    [
+      'should ignore non atomic declarations',
+      ['hello_there', 'hello_world'],
+      'hello_there hello_world',
+    ],
+    [
+      'should ignore non atomic declarations when atomic declarations exist',
+      ['hello_there', 'hello_world', '_aaaabbbb'],
+      'hello_there hello_world _aaaabbbb',
+    ],
+  ])('%s', (_, params, result) => {
+    expect(result).toEqual(ax(params));
   });
 });

package/src/runtime/__tests__/style-ssr.test.tsx

@@ -48,7 +48,7 @@ describe('<Style />', () => {
     );
 
     expect(result.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
-      "<style data-cmpld=\\"true\\">._c1234567{ display: block; }._d1234567:link{ color: green; }._g1234567:visited{ color: grey; }._i1234567:focus-within{ color: black; }._f1234567:focus{ color: pink; }._h1234567:focus-visible{ color: white; }._a1234567:hover{ color: red; }._b1234567:active{ color: blue; }@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
+      "<style data-cmpld="true">._c1234567{ display: block; }._d1234567:link{ color: green; }._g1234567:visited{ color: grey; }._i1234567:focus-within{ color: black; }._f1234567:focus{ color: pink; }._h1234567:focus-visible{ color: white; }._a1234567:hover{ color: red; }._b1234567:active{ color: blue; }@media (max-width: 800px){ ._e1234567{ color: yellow; } }</style>
       "
     `);
   });

package/src/runtime/ac.js.flow

@@ -0,0 +1,56 @@
+/**
+ * Flowtype definitions for ac
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.20.1
+ * @flow
+ */
+/**
+ * Memoize the result of ac so if it is called with the same args, it returns immediately.
+ * Also, to prevent useless React rerenders
+ */
+declare var cache: Map<any, any>;
+/**
+ * `ac` returns an instance of AtomicGroups. The instance holds the knowledge of Atomic Group so we can chain `ac`.
+ * e.g. <div className={ax([ax(['_aaaa_b']), '_aaaa_c'])} />
+ */
+declare class AtomicGroups {
+  values: Map<string, string>;
+  constructor(values: Map<string, string>): this;
+  toString(): string;
+}
+/**
+ * Joins classes together and ensures atomic declarations of a single group exist.
+ * Atomic declarations take the form of `_{group}{value}` (always prefixed with an underscore),
+ * where both `group` and `value` are hashes **four characters long**.
+ * Class names can be of any length,
+ * this function can take both atomic declarations and class names.
+ *
+ * Input:
+ *
+ * ```
+ * ax(['_aaaabbbb', '_aaaacccc'])
+ * ```
+ *
+ * Output:
+ *
+ * ```
+ * '_aaaacccc'
+ * ```
+ * @param classes
+ */
+declare export function ac(
+  classNames: (AtomicGroups | string | void | false)[]
+): AtomicGroups | void;
+declare export function memoizedAc(
+  classNames: (AtomicGroups | string | void | false)[]
+): AtomicGroups | void;
+declare var _default: typeof ac;
+declare export default typeof _default;
+/**
+ * Provide an opportunity to clear the cache to prevent memory leak.
+ */
+declare export function clearCache(): void;
+/**
+ * Expose cache
+ */
+declare export function getCache(): typeof cache;

package/src/runtime/ac.ts

@@ -0,0 +1,143 @@
+import { isServerEnvironment } from './is-server-environment';
+
+const UNDERSCORE_UNICODE = 95;
+
+/**
+ * This length includes the underscore,
+ * e.g. `"_1s4A"` would be a valid atomic group hash.
+ */
+const ATOMIC_GROUP_LENGTH = 5;
+
+/**
+ * Memoize the result of ac so if it is called with the same args, it returns immediately.
+ * Also, to prevent useless React rerenders
+ */
+const cache = new Map();
+
+/**
+ * `ac` returns an instance of AtomicGroups. The instance holds the knowledge of Atomic Group so we can chain `ac`.
+ * e.g. <div className={ax([ax(['_aaaa_b']), '_aaaa_c'])} />
+ */
+class AtomicGroups {
+  values: Map<string, string>;
+  constructor(values: Map<string, string>) {
+    // An object stores the relation between Atomic group and actual class name
+    // e.g. { "aaaa": "a" } `aaaa` is the Atomic group and `a` is the actual class name
+    this.values = values;
+  }
+  toString() {
+    let str = '';
+
+    for (const [, value] of this.values) {
+      str += value + ' ';
+    }
+
+    return str.slice(0, -1);
+  }
+}
+
+/**
+ * Joins classes together and ensures atomic declarations of a single group exist.
+ * Atomic declarations take the form of `_{group}{value}` (always prefixed with an underscore),
+ * where both `group` and `value` are hashes **four characters long**.
+ * Class names can be of any length,
+ * this function can take both atomic declarations and class names.
+ *
+ * Input:
+ *
+ * ```
+ * ax(['_aaaabbbb', '_aaaacccc'])
+ * ```
+ *
+ * Output:
+ *
+ * ```
+ * '_aaaacccc'
+ * ```
+ *
+ * @param classes
+ */
+export function ac(
+  classNames: (AtomicGroups | string | undefined | false)[]
+): AtomicGroups | undefined {
+  // short circuit if there's no class names.
+  if (classNames.length <= 1 && !classNames[0]) return undefined;
+
+  const atomicGroups: Map<string, string> = new Map();
+
+  for (let i = 0; i < classNames.length; i++) {
+    const cls = classNames[i];
+    if (!cls) {
+      continue;
+    }
+
+    if (typeof cls === 'string') {
+      const groups = cls.split(' ');
+
+      for (let x = 0; x < groups.length; x++) {
+        const atomic = groups[x];
+        const isAtomic = atomic.charCodeAt(0) === UNDERSCORE_UNICODE;
+        const isCompressed = isAtomic && atomic.charCodeAt(5) === UNDERSCORE_UNICODE;
+
+        const atomicGroupName = isAtomic ? atomic.slice(0, ATOMIC_GROUP_LENGTH) : atomic;
+        atomicGroups.set(
+          atomicGroupName,
+          isCompressed ? atomic.slice(ATOMIC_GROUP_LENGTH + 1) : atomic
+        );
+      }
+    } else {
+      // if cls is an instance of AtomicGroups, transfer its values to `atomicGroups`
+      for (const [key, value] of cls.values) {
+        atomicGroups.set(key, value);
+      }
+    }
+  }
+
+  return new AtomicGroups(atomicGroups);
+}
+
+export function memoizedAc(
+  classNames: (AtomicGroups | string | undefined | false)[]
+): AtomicGroups | undefined {
+  // short circuit if there's no class names.
+  if (classNames.length <= 1 && !classNames[0]) return undefined;
+
+  // build the cacheKey based on the function argument
+  // e.g. if the argument is ["_aaaabbbb", "_aaaa_a", "some-class-name"],
+  // then the cacheKey is "_aaaabbbb _aaaa_a some-class-name"
+  let cacheKey = '';
+  for (let i = 0; i < classNames.length; i += 1) {
+    const current = classNames[i];
+    // continue if current is undefined, false, or ""
+    if (!current) continue;
+    cacheKey += current + ' ';
+  }
+
+  cacheKey = cacheKey.slice(0, -1);
+
+  if (cache.has(cacheKey)) return cache.get(cacheKey);
+
+  const result = ac(classNames);
+
+  cache.set(cacheKey, result);
+
+  return result;
+}
+
+// Memoization is primarily used to prevent React from unncessary re-rendering.
+// Use unmemoizedAc on server-side because We don't need to worry about re-rendering on server-side.
+export default isServerEnvironment() ? ac : memoizedAc;
+
+/**
+ * Provide an opportunity to clear the cache to prevent memory leak.
+ */
+export function clearCache(): void {
+  cache.clear();
+}
+
+/**
+ * Expose cache
+ */
+export function getCache(): typeof cache {
+  return cache;
+}

package/src/runtime/index.js.flow

@@ -7,4 +7,5 @@
 declare export { default as CS } from './style';
 declare export { default as CC } from './style-cache';
 declare export { default as ax } from './ax';
+declare export { default as ac, clearCache as clearAcCache } from './ac';
 declare export { default as ix } from './css-custom-property';