@compiled/react 0.12.0 → 0.13.0

package/dist/esm/utils/error.js

@@ -1,4 +1,20 @@
-export var createSetupError = function () {
-    return new Error("\n \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557   \u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2557     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557\n\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\n\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2588\u2588\u2554\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551  \u2588\u2588\u2551\n\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551\u255A\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u255D  \u2588\u2588\u2551  \u2588\u2588\u2551\n\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551 \u255A\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\n \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D     \u255A\u2550\u255D\u255A\u2550\u255D     \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u255D\n\n  @compiled/react\n\n  Code was executed when it shouldn't have. This could have happened because:\n\n  1. You haven't configured a transformer yet. Visit https://compiledcssinjs.com/docs/installation and follow the instructions.\n  2. You have duplicate versions of React and hooks are blowing up. You need to de-duplicate your dependencies.\n\n  Good luck!\n");
+export const createSetupError = () => {
+    return new Error(`
+ ██████╗ ██████╗ ███╗   ███╗██████╗ ██╗██╗     ███████╗██████╗
+██╔════╝██╔═══██╗████╗ ████║██╔══██╗██║██║     ██╔════╝██╔══██╗
+██║     ██║   ██║██╔████╔██║██████╔╝██║██║     █████╗  ██║  ██║
+██║     ██║   ██║██║╚██╔╝██║██╔═══╝ ██║██║     ██╔══╝  ██║  ██║
+╚██████╗╚██████╔╝██║ ╚═╝ ██║██║     ██║███████╗███████╗██████╔╝
+ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝╚══════╝╚══════╝╚═════╝
+
+  @compiled/react
+
+  Code was executed when it shouldn't have. This could have happened because:
+
+  1. You haven't configured a transformer yet. Visit https://compiledcssinjs.com/docs/installation and follow the instructions.
+  2. You have duplicate versions of React and hooks are blowing up. You need to de-duplicate your dependencies.
+
+  Good luck!
+`);
 };
 //# sourceMappingURL=error.js.map

package/dist/esm/utils/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,OAAO,IAAI,KAAK,CAAC,6tEAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/utils/error.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAU,EAAE;IAC1C,OAAO,IAAI,KAAK,CAAC;;;;;;;;;;;;;;;;CAgBlB,CAAC,CAAC;AACH,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -17,7 +17,11 @@
   },
   "license": "Apache-2.0",
   "author": "Michael Dougall",
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/browser/runtime/index.js",
+    "./dist/cjs/runtime/index.js",
+    "./dist/esm/runtime/index.js"
+  ],
   "exports": {
     ".": {
       "import": [
@@ -78,7 +82,7 @@
     "@compiled/benchmark": "^1.1.0",
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",
-    "@types/react-dom": "^17.0.18",
+    "@types/react-dom": "^17.0.19",
     "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

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/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

@@ -41,24 +41,4 @@ describe('ax benchmark', () => {
       fastest: ['ax() string'],
     });
   }, 30000);
-
-  it('completes with ax() non-compressed class names as the fastest', async () => {
-    const arrWithCompressedClassNames = arr.map((item) =>
-      item ? `${item.slice(0, 4)}_${item.slice(8)}` : item
-    );
-    const benchmark = await runBenchmark('ax', [
-      {
-        name: 'ax() array',
-        fn: () => ax(arr),
-      },
-      {
-        name: 'ax() array with compressed class names',
-        fn: () => ax(arrWithCompressedClassNames),
-      },
-    ]);
-
-    expect(benchmark).toMatchObject({
-      fastest: ['ax() array'],
-    });
-  }, 30000);
 });

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

@@ -14,31 +14,16 @@ describe('ax', () => {
       ['_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'],
@@ -46,19 +31,14 @@ describe('ax', () => {
     ],
     [
       'should ensure the last atomic declaration of many multi groups with short class name wins',
-      ['_aaaabbbb', '_aaaa_a', '_bbbb_b', '_ddddcccc'],
-      'a b _ddddcccc',
+      ['_aaaabbbb', '_aaaaaaa', '_ddddbbb', '_ddddcccc'],
+      '_aaaaaaa _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',
@@ -70,11 +50,6 @@ describe('ax', () => {
       ['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(ax(params));
   });

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/ax.ts

@@ -28,8 +28,10 @@ const ATOMIC_GROUP_LENGTH = 5;
  * @param classes
  */
 export default function ax(classNames: (string | undefined | false)[]): string | undefined {
-  // short circuit if there's no class names.
-  if (classNames.length <= 1 && !classNames[0]) return undefined;
+  if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
+    // short circuit if there's no custom class names.
+    return classNames[0] || undefined;
+  }
 
   const atomicGroups: Record<string, string> = {};
 
@@ -43,11 +45,11 @@ export default function ax(classNames: (string | undefined | false)[]): string |
 
     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[atomicGroupName] = isCompressed ? atomic.slice(ATOMIC_GROUP_LENGTH + 1) : atomic;
+      const atomicGroupName = atomic.slice(
+        0,
+        atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined
+      );
+      atomicGroups[atomicGroupName] = atomic;
     }
   }
 

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';

package/src/runtime/index.ts

@@ -1,4 +1,16 @@
 export { default as CS } from './style';
 export { default as CC } from './style-cache';
 export { default as ax } from './ax';
+export { default as ac, clearCache as clearAcCache } from './ac';
 export { default as ix } from './css-custom-property';
+
+// Ensure only one `@compiled/runtime` exist in the bundle.
+// This is because `ac` and `style-cache` need to access a singlton.
+if (typeof window !== 'undefined') {
+  if (typeof window.__COMPILED_IMPORTED__ !== 'undefined') {
+    throw new Error(
+      'Multiple instances of Compiled Runtime have been found on the page. A likely cause is that muliple versions of `@compiled/react` exist in JS bundle.'
+    );
+  }
+  window.__COMPILED_IMPORTED__ = true;
+}

package/src/runtime.js.flow

@@ -4,4 +4,4 @@
  * Flowgen v1.20.1
  * @flow
  */
-declare export { CC, CS, ax, ix } from './runtime/index';
+declare export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index';

package/src/runtime.ts

@@ -1 +1 @@
-export { CC, CS, ax, ix } from './runtime/index';
+export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index';