@compiled/react 0.18.2 → 0.18.4

package/dist/browser/runtime/ax.d.ts

@@ -1,22 +1,21 @@
 /**
- * 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.
+ * Create a single string containing all the classnames provided, separated by a space (`" "`).
+ * The result will only contain the _last_ atomic style classname for each atomic `group`.
  *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc']);
+ * // output
+ * '_aaaacccc'
  * ```
  *
- * Output:
+ * Format of Atomic style classnames: `_{group}{value}` (`_\w{4}\w{4}`)
  *
- * ```
- * '_aaaacccc'
- * ```
+ * `ax` will preserve any non atomic style classnames (eg `"border-red"`)
  *
- * @param classes
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc', 'border-red']);
+ * // output
+ * '_aaaacccc border-red'
+ * ```
  */
 export default function ax(classNames: (string | undefined | null | false)[]): string | undefined;

package/dist/browser/runtime/ax.js

@@ -1,53 +1,86 @@
-const UNDERSCORE_UNICODE = 95;
 /**
  * This length includes the underscore,
  * e.g. `"_1s4A"` would be a valid atomic group hash.
  */
 const ATOMIC_GROUP_LENGTH = 5;
 /**
- * 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.
+ * Create a single string containing all the classnames provided, separated by a space (`" "`).
+ * The result will only contain the _last_ atomic style classname for each atomic `group`.
  *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc']);
+ * // output
+ * '_aaaacccc'
  * ```
  *
- * Output:
+ * Format of Atomic style classnames: `_{group}{value}` (`_\w{4}\w{4}`)
  *
- * ```
- * '_aaaacccc'
- * ```
+ * `ax` will preserve any non atomic style classnames (eg `"border-red"`)
  *
- * @param classes
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc', 'border-red']);
+ * // output
+ * '_aaaacccc border-red'
+ * ```
  */
 export default function ax(classNames) {
-    if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
-        // short circuit if there's no custom class names.
-        return classNames[0] || undefined;
+    // Shortcut: nothing to do
+    if (!classNames.length) {
+        return;
     }
-    const atomicGroups = {};
-    for (let i = 0; i < classNames.length; i++) {
-        const cls = classNames[i];
-        if (!cls) {
+    // Shortcut: don't need to do anything if we only have a single classname
+    if (classNames.length === 1 &&
+        classNames[0] &&
+        // checking to see if `classNames[0]` is a string that contains other classnames
+        !classNames[0].includes(' ')) {
+        return classNames[0];
+    }
+    // Using an object rather than a `Map` as it performed better in our benchmarks.
+    // Would be happy to move to `Map` if it proved to be better under real conditions.
+    const map = {};
+    // Note: using loops to minimize iterations over the collection
+    for (const value of classNames) {
+        // Exclude all falsy values, which leaves us with populated strings
+        if (!value) {
             continue;
         }
-        const groups = cls.split(' ');
-        for (let x = 0; x < groups.length; x++) {
-            const atomic = groups[x];
-            const atomicGroupName = atomic.slice(0, atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined);
-            atomicGroups[atomicGroupName] = atomic;
+        // a `value` can contain multiple classnames
+        const list = value.split(' ');
+        for (const className of list) {
+            /**
+             * For atomic style classnames: the `key` is the `group`
+             *
+             * - Later atomic classnames with the same `group` will override earlier ones
+             *   (which is what we want).
+             * - Assumes atomic classnames are the only things that start with `_`
+             * - Could use a regex to ensure that atomic classnames are structured how we expect,
+             *   but did not add that for now as it did slow things down a bit.
+             *
+             * For other classnames: the `key` is the whole classname
+             * - Okay to remove duplicates as doing so does not impact specificity
+             *
+             * */
+            const key = className.startsWith('_') ? className.slice(0, ATOMIC_GROUP_LENGTH) : className;
+            map[key] = className;
         }
     }
-    let str = '';
-    for (const key in atomicGroups) {
-        const value = atomicGroups[key];
-        str += value + ' ';
+    /**
+     * We are converting the `map` into a string.
+     *
+     * The simple way to do this would be `Object.values(map).join(' ')`.
+     * However, the approach below performs 10%-20% better in benchmarks.
+     *
+     * For `ax()` it feels right to squeeze as much runtime performance out as we can.
+     */
+    let result = '';
+    for (const key in map) {
+        result += map[key] + ' ';
+    }
+    // If we have an empty string, then our `map` was empty.
+    if (!result) {
+        return;
     }
-    return str.slice(0, -1);
+    // remove last " " from the result (we added " " at the end of every value)
+    return result.trimEnd();
 }
 //# sourceMappingURL=ax.js.map

package/dist/browser/runtime/ax.js.map

@@ -1 +1 @@
-{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAAiD;IAC1E,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACnF,kDAAkD;QAClD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,MAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,MAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAClC,CAAC,EACD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAC9E,CAAC;YACF,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACxC;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC"}
+{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAAiD;IAC1E,0BAA0B;IAC1B,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;QACtB,OAAO;KACR;IAED,yEAAyE;IACzE,IACE,UAAU,CAAC,MAAM,KAAK,CAAC;QACvB,UAAU,CAAC,CAAC,CAAC;QACb,gFAAgF;QAChF,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAC5B;QACA,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;KACtB;IAED,gFAAgF;IAChF,mFAAmF;IACnF,MAAM,GAAG,GAA2B,EAAE,CAAC;IAEvC,+DAA+D;IAC/D,KAAK,MAAM,KAAK,IAAI,UAAU,EAAE;QAC9B,mEAAmE;QACnE,IAAI,CAAC,KAAK,EAAE;YACV,SAAS;SACV;QAED,4CAA4C;QAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,MAAM,SAAS,IAAI,IAAI,EAAE;YAC5B;;;;;;;;;;;;iBAYK;YACL,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAC5F,GAAG,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;SACtB;KACF;IAED;;;;;;;OAOG;IACH,IAAI,MAAM,GAAW,EAAE,CAAC;IACxB,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;KAC1B;IAED,wDAAwD;IACxD,IAAI,CAAC,MAAM,EAAE;QACX,OAAO;KACR;IAED,2EAA2E;IAC3E,OAAO,MAAM,CAAC,OAAO,EAAE,CAAC;AAC1B,CAAC"}

package/dist/browser/types.d.ts

@@ -27,7 +27,7 @@ export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & NonNullable<unknown>) | number>>;
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes
  * vendor and obsolete properties.

package/dist/cjs/runtime/ax.d.ts

@@ -1,22 +1,21 @@
 /**
- * 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.
+ * Create a single string containing all the classnames provided, separated by a space (`" "`).
+ * The result will only contain the _last_ atomic style classname for each atomic `group`.
  *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc']);
+ * // output
+ * '_aaaacccc'
  * ```
  *
- * Output:
+ * Format of Atomic style classnames: `_{group}{value}` (`_\w{4}\w{4}`)
  *
- * ```
- * '_aaaacccc'
- * ```
+ * `ax` will preserve any non atomic style classnames (eg `"border-red"`)
  *
- * @param classes
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc', 'border-red']);
+ * // output
+ * '_aaaacccc border-red'
+ * ```
  */
 export default function ax(classNames: (string | undefined | null | false)[]): string | undefined;

package/dist/cjs/runtime/ax.js

@@ -1,56 +1,89 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const UNDERSCORE_UNICODE = 95;
 /**
  * This length includes the underscore,
  * e.g. `"_1s4A"` would be a valid atomic group hash.
  */
 const ATOMIC_GROUP_LENGTH = 5;
 /**
- * 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.
+ * Create a single string containing all the classnames provided, separated by a space (`" "`).
+ * The result will only contain the _last_ atomic style classname for each atomic `group`.
  *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc']);
+ * // output
+ * '_aaaacccc'
  * ```
  *
- * Output:
+ * Format of Atomic style classnames: `_{group}{value}` (`_\w{4}\w{4}`)
  *
- * ```
- * '_aaaacccc'
- * ```
+ * `ax` will preserve any non atomic style classnames (eg `"border-red"`)
  *
- * @param classes
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc', 'border-red']);
+ * // output
+ * '_aaaacccc border-red'
+ * ```
  */
 function ax(classNames) {
-    if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
-        // short circuit if there's no custom class names.
-        return classNames[0] || undefined;
+    // Shortcut: nothing to do
+    if (!classNames.length) {
+        return;
     }
-    const atomicGroups = {};
-    for (let i = 0; i < classNames.length; i++) {
-        const cls = classNames[i];
-        if (!cls) {
+    // Shortcut: don't need to do anything if we only have a single classname
+    if (classNames.length === 1 &&
+        classNames[0] &&
+        // checking to see if `classNames[0]` is a string that contains other classnames
+        !classNames[0].includes(' ')) {
+        return classNames[0];
+    }
+    // Using an object rather than a `Map` as it performed better in our benchmarks.
+    // Would be happy to move to `Map` if it proved to be better under real conditions.
+    const map = {};
+    // Note: using loops to minimize iterations over the collection
+    for (const value of classNames) {
+        // Exclude all falsy values, which leaves us with populated strings
+        if (!value) {
             continue;
         }
-        const groups = cls.split(' ');
-        for (let x = 0; x < groups.length; x++) {
-            const atomic = groups[x];
-            const atomicGroupName = atomic.slice(0, atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined);
-            atomicGroups[atomicGroupName] = atomic;
+        // a `value` can contain multiple classnames
+        const list = value.split(' ');
+        for (const className of list) {
+            /**
+             * For atomic style classnames: the `key` is the `group`
+             *
+             * - Later atomic classnames with the same `group` will override earlier ones
+             *   (which is what we want).
+             * - Assumes atomic classnames are the only things that start with `_`
+             * - Could use a regex to ensure that atomic classnames are structured how we expect,
+             *   but did not add that for now as it did slow things down a bit.
+             *
+             * For other classnames: the `key` is the whole classname
+             * - Okay to remove duplicates as doing so does not impact specificity
+             *
+             * */
+            const key = className.startsWith('_') ? className.slice(0, ATOMIC_GROUP_LENGTH) : className;
+            map[key] = className;
         }
     }
-    let str = '';
-    for (const key in atomicGroups) {
-        const value = atomicGroups[key];
-        str += value + ' ';
+    /**
+     * We are converting the `map` into a string.
+     *
+     * The simple way to do this would be `Object.values(map).join(' ')`.
+     * However, the approach below performs 10%-20% better in benchmarks.
+     *
+     * For `ax()` it feels right to squeeze as much runtime performance out as we can.
+     */
+    let result = '';
+    for (const key in map) {
+        result += map[key] + ' ';
+    }
+    // If we have an empty string, then our `map` was empty.
+    if (!result) {
+        return;
     }
-    return str.slice(0, -1);
+    // remove last " " from the result (we added " " at the end of every value)
+    return result.trimEnd();
 }
 exports.default = ax;
 //# sourceMappingURL=ax.js.map

package/dist/cjs/runtime/ax.js.map

@@ -1 +1 @@
-{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAwB,EAAE,CAAC,UAAiD;IAC1E,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACnF,kDAAkD;QAClD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,MAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,MAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAClC,CAAC,EACD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAC9E,CAAC;YACF,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACxC;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC;AAlCD,qBAkCC"}
+{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":";;AAAA;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAwB,EAAE,CAAC,UAAiD;IAC1E,0BAA0B;IAC1B,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;QACtB,OAAO;KACR;IAED,yEAAyE;IACzE,IACE,UAAU,CAAC,MAAM,KAAK,CAAC;QACvB,UAAU,CAAC,CAAC,CAAC;QACb,gFAAgF;QAChF,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAC5B;QACA,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;KACtB;IAED,gFAAgF;IAChF,mFAAmF;IACnF,MAAM,GAAG,GAA2B,EAAE,CAAC;IAEvC,+DAA+D;IAC/D,KAAK,MAAM,KAAK,IAAI,UAAU,EAAE;QAC9B,mEAAmE;QACnE,IAAI,CAAC,KAAK,EAAE;YACV,SAAS;SACV;QAED,4CAA4C;QAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,MAAM,SAAS,IAAI,IAAI,EAAE;YAC5B;;;;;;;;;;;;iBAYK;YACL,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAC5F,GAAG,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;SACtB;KACF;IAED;;;;;;;OAOG;IACH,IAAI,MAAM,GAAW,EAAE,CAAC;IACxB,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;KAC1B;IAED,wDAAwD;IACxD,IAAI,CAAC,MAAM,EAAE;QACX,OAAO;KACR;IAED,2EAA2E;IAC3E,OAAO,MAAM,CAAC,OAAO,EAAE,CAAC;AAC1B,CAAC;AArED,qBAqEC"}

package/dist/cjs/types.d.ts

@@ -27,7 +27,7 @@ export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & NonNullable<unknown>) | number>>;
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes
  * vendor and obsolete properties.

package/dist/esm/runtime/ax.d.ts

@@ -1,22 +1,21 @@
 /**
- * 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.
+ * Create a single string containing all the classnames provided, separated by a space (`" "`).
+ * The result will only contain the _last_ atomic style classname for each atomic `group`.
  *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc']);
+ * // output
+ * '_aaaacccc'
  * ```
  *
- * Output:
+ * Format of Atomic style classnames: `_{group}{value}` (`_\w{4}\w{4}`)
  *
- * ```
- * '_aaaacccc'
- * ```
+ * `ax` will preserve any non atomic style classnames (eg `"border-red"`)
  *
- * @param classes
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc', 'border-red']);
+ * // output
+ * '_aaaacccc border-red'
+ * ```
  */
 export default function ax(classNames: (string | undefined | null | false)[]): string | undefined;

package/dist/esm/runtime/ax.js

@@ -1,53 +1,86 @@
-const UNDERSCORE_UNICODE = 95;
 /**
  * This length includes the underscore,
  * e.g. `"_1s4A"` would be a valid atomic group hash.
  */
 const ATOMIC_GROUP_LENGTH = 5;
 /**
- * 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.
+ * Create a single string containing all the classnames provided, separated by a space (`" "`).
+ * The result will only contain the _last_ atomic style classname for each atomic `group`.
  *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc']);
+ * // output
+ * '_aaaacccc'
  * ```
  *
- * Output:
+ * Format of Atomic style classnames: `_{group}{value}` (`_\w{4}\w{4}`)
  *
- * ```
- * '_aaaacccc'
- * ```
+ * `ax` will preserve any non atomic style classnames (eg `"border-red"`)
  *
- * @param classes
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc', 'border-red']);
+ * // output
+ * '_aaaacccc border-red'
+ * ```
  */
 export default function ax(classNames) {
-    if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
-        // short circuit if there's no custom class names.
-        return classNames[0] || undefined;
+    // Shortcut: nothing to do
+    if (!classNames.length) {
+        return;
     }
-    const atomicGroups = {};
-    for (let i = 0; i < classNames.length; i++) {
-        const cls = classNames[i];
-        if (!cls) {
+    // Shortcut: don't need to do anything if we only have a single classname
+    if (classNames.length === 1 &&
+        classNames[0] &&
+        // checking to see if `classNames[0]` is a string that contains other classnames
+        !classNames[0].includes(' ')) {
+        return classNames[0];
+    }
+    // Using an object rather than a `Map` as it performed better in our benchmarks.
+    // Would be happy to move to `Map` if it proved to be better under real conditions.
+    const map = {};
+    // Note: using loops to minimize iterations over the collection
+    for (const value of classNames) {
+        // Exclude all falsy values, which leaves us with populated strings
+        if (!value) {
             continue;
         }
-        const groups = cls.split(' ');
-        for (let x = 0; x < groups.length; x++) {
-            const atomic = groups[x];
-            const atomicGroupName = atomic.slice(0, atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined);
-            atomicGroups[atomicGroupName] = atomic;
+        // a `value` can contain multiple classnames
+        const list = value.split(' ');
+        for (const className of list) {
+            /**
+             * For atomic style classnames: the `key` is the `group`
+             *
+             * - Later atomic classnames with the same `group` will override earlier ones
+             *   (which is what we want).
+             * - Assumes atomic classnames are the only things that start with `_`
+             * - Could use a regex to ensure that atomic classnames are structured how we expect,
+             *   but did not add that for now as it did slow things down a bit.
+             *
+             * For other classnames: the `key` is the whole classname
+             * - Okay to remove duplicates as doing so does not impact specificity
+             *
+             * */
+            const key = className.startsWith('_') ? className.slice(0, ATOMIC_GROUP_LENGTH) : className;
+            map[key] = className;
         }
     }
-    let str = '';
-    for (const key in atomicGroups) {
-        const value = atomicGroups[key];
-        str += value + ' ';
+    /**
+     * We are converting the `map` into a string.
+     *
+     * The simple way to do this would be `Object.values(map).join(' ')`.
+     * However, the approach below performs 10%-20% better in benchmarks.
+     *
+     * For `ax()` it feels right to squeeze as much runtime performance out as we can.
+     */
+    let result = '';
+    for (const key in map) {
+        result += map[key] + ' ';
+    }
+    // If we have an empty string, then our `map` was empty.
+    if (!result) {
+        return;
     }
-    return str.slice(0, -1);
+    // remove last " " from the result (we added " " at the end of every value)
+    return result.trimEnd();
 }
 //# sourceMappingURL=ax.js.map

package/dist/esm/runtime/ax.js.map

@@ -1 +1 @@
-{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAAiD;IAC1E,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;QACnF,kDAAkD;QAClD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,MAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,MAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAClC,CAAC,EACD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAC9E,CAAC;YACF,YAAY,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACxC;KACF;IAED,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,MAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAChC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC;KACpB;IAED,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1B,CAAC"}
+{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAAiD;IAC1E,0BAA0B;IAC1B,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;QACtB,OAAO;KACR;IAED,yEAAyE;IACzE,IACE,UAAU,CAAC,MAAM,KAAK,CAAC;QACvB,UAAU,CAAC,CAAC,CAAC;QACb,gFAAgF;QAChF,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAC5B;QACA,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;KACtB;IAED,gFAAgF;IAChF,mFAAmF;IACnF,MAAM,GAAG,GAA2B,EAAE,CAAC;IAEvC,+DAA+D;IAC/D,KAAK,MAAM,KAAK,IAAI,UAAU,EAAE;QAC9B,mEAAmE;QACnE,IAAI,CAAC,KAAK,EAAE;YACV,SAAS;SACV;QAED,4CAA4C;QAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE9B,KAAK,MAAM,SAAS,IAAI,IAAI,EAAE;YAC5B;;;;;;;;;;;;iBAYK;YACL,MAAM,GAAG,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YAC5F,GAAG,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;SACtB;KACF;IAED;;;;;;;OAOG;IACH,IAAI,MAAM,GAAW,EAAE,CAAC;IACxB,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;KAC1B;IAED,wDAAwD;IACxD,IAAI,CAAC,MAAM,EAAE;QACX,OAAO;KACR;IAED,2EAA2E;IAC3E,OAAO,MAAM,CAAC,OAAO,EAAE,CAAC;AAC1B,CAAC"}

package/dist/esm/types.d.ts

@@ -27,7 +27,7 @@ export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & NonNullable<unknown>) | number>>;
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes
  * vendor and obsolete properties.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -81,7 +81,7 @@
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",
     "@types/react-dom": "^17.0.22",
-    "expect-type": "^0.17.3",
+    "expect-type": "^0.20.0",
     "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package/src/__tests__/jest-matcher.test.tsx

@@ -18,6 +18,19 @@ describe('toHaveCompliedCss', () => {
     expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
   });
 
+  it('should detect styles (SVG)', () => {
+    const { getByText } = render(
+      <svg
+        css={{
+          fontSize: '12px',
+        }}>
+        hello world
+      </svg>
+    );
+
+    expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
+  });
+
   it('should detect missing styles', () => {
     const { getByText } = render(<div css={{ fontSize: '12px' }}>hello world</div>);
 

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

@@ -3,42 +3,61 @@ import { runBenchmark } from '@compiled/benchmark';
 import { ax } from '../index';
 
 describe('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,
+  const chunks: string[] = ['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee', 'ffff', 'gggg'];
+  const uniques: string[] = chunks.map((chunk) => `_${chunk}${chunk}`);
+  const withClashes: string[] = [
+    ...Array.from({ length: 4 }, () => `_${chunks[0]}${chunks[0]}`),
+    ...Array.from({ length: 6 }, () => `_${chunks[0]}${chunks[1]}`),
+    ...Array.from({ length: 8 }, () => `_${chunks[0]}${chunks[2]}`),
   ];
 
-  it('completes with ax() string as the fastest', async () => {
-    // Remove undefined and join the strings
-    const str = arr.slice(0, -1).join(' ');
+  const getRandomRules = (() => {
+    function randomChunk() {
+      return chunks[Math.floor(Math.random() * chunks.length)];
+    }
+
+    return function create(): string[] {
+      return Array.from({ length: 20 }, () => `_${randomChunk()}${randomChunk()}`);
+    };
+  })();
 
+  it('completes with ax() string as the fastest', async () => {
     const benchmark = await runBenchmark('ax', [
       {
-        name: 'ax() array',
-        fn: () => ax(arr),
+        name: 'ax() single',
+        fn: () => ax(['_aaaabbbb']),
+      },
+      {
+        name: 'ax() uniques (array)',
+        fn: () => ax(uniques),
+      },
+      {
+        name: 'ax() uniques (as a string)',
+        fn: () => ax([uniques.join(' ')]),
+      },
+      {
+        name: 'ax() clashes',
+        fn: () => ax(withClashes),
+      },
+      {
+        name: 'ax() clashes (as a string)',
+        fn: () => ax([withClashes.join(' ')]),
+      },
+      {
+        name: 'ax() random keys (no clashes)',
+        fn: () => ax(getRandomRules()),
       },
       {
-        name: 'ax() string',
-        fn: () => ax([str, undefined]),
+        name: 'ax() random keys (with clashes)',
+        fn: () => {
+          const random = getRandomRules();
+          ax([...random, ...random, ...random]);
+        },
       },
     ]);
 
     expect(benchmark).toMatchObject({
-      fastest: ['ax() string'],
+      fastest: ['ax() single'],
     });
-  }, 30000);
+  }, 90000);
 });

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

@@ -6,6 +6,7 @@ describe('ax', () => {
   it.each([
     ['should handle empty array', [], undefined],
     ['should handle array with undefined', [undefined], undefined],
+    ['should handle array with falsy values', [undefined, null, false as const, ''], 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'],
@@ -50,7 +51,8 @@ describe('ax', () => {
       ['hello_there', 'hello_world', '_aaaabbbb'],
       'hello_there hello_world _aaaabbbb',
     ],
-  ])('%s', (_, params, result) => {
-    expect(result).toEqual(ax(params));
+    ['should remove duplicate custom class names', ['a', 'a'], 'a'],
+  ])('%s', (_, params, expected) => {
+    expect(ax(params)).toEqual(expected);
   });
 });

package/src/runtime/ax.ts

@@ -1,5 +1,3 @@
-const UNDERSCORE_UNICODE = 95;
-
 /**
  * This length includes the underscore,
  * e.g. `"_1s4A"` would be a valid atomic group hash.
@@ -7,58 +5,92 @@ const UNDERSCORE_UNICODE = 95;
 const ATOMIC_GROUP_LENGTH = 5;
 
 /**
- * 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:
+ * Create a single string containing all the classnames provided, separated by a space (`" "`).
+ * The result will only contain the _last_ atomic style classname for each atomic `group`.
  *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc']);
+ * // output
+ * '_aaaacccc'
  * ```
  *
- * Output:
+ * Format of Atomic style classnames: `_{group}{value}` (`_\w{4}\w{4}`)
  *
- * ```
- * '_aaaacccc'
- * ```
+ * `ax` will preserve any non atomic style classnames (eg `"border-red"`)
  *
- * @param classes
+ * ```ts
+ * ax(['_aaaabbbb', '_aaaacccc', 'border-red']);
+ * // output
+ * '_aaaacccc border-red'
+ * ```
  */
 export default function ax(classNames: (string | undefined | null | false)[]): string | undefined {
-  if (classNames.length <= 1 && (!classNames[0] || classNames[0].indexOf(' ') === -1)) {
-    // short circuit if there's no custom class names.
-    return classNames[0] || undefined;
+  // Shortcut: nothing to do
+  if (!classNames.length) {
+    return;
   }
 
-  const atomicGroups: Record<string, string> = {};
+  // Shortcut: don't need to do anything if we only have a single classname
+  if (
+    classNames.length === 1 &&
+    classNames[0] &&
+    // checking to see if `classNames[0]` is a string that contains other classnames
+    !classNames[0].includes(' ')
+  ) {
+    return classNames[0];
+  }
 
-  for (let i = 0; i < classNames.length; i++) {
-    const cls = classNames[i];
-    if (!cls) {
+  // Using an object rather than a `Map` as it performed better in our benchmarks.
+  // Would be happy to move to `Map` if it proved to be better under real conditions.
+  const map: Record<string, string> = {};
+
+  // Note: using loops to minimize iterations over the collection
+  for (const value of classNames) {
+    // Exclude all falsy values, which leaves us with populated strings
+    if (!value) {
       continue;
     }
 
-    const groups = cls.split(' ');
+    // a `value` can contain multiple classnames
+    const list = value.split(' ');
 
-    for (let x = 0; x < groups.length; x++) {
-      const atomic = groups[x];
-      const atomicGroupName = atomic.slice(
-        0,
-        atomic.charCodeAt(0) === UNDERSCORE_UNICODE ? ATOMIC_GROUP_LENGTH : undefined
-      );
-      atomicGroups[atomicGroupName] = atomic;
+    for (const className of list) {
+      /**
+       * For atomic style classnames: the `key` is the `group`
+       *
+       * - Later atomic classnames with the same `group` will override earlier ones
+       *   (which is what we want).
+       * - Assumes atomic classnames are the only things that start with `_`
+       * - Could use a regex to ensure that atomic classnames are structured how we expect,
+       *   but did not add that for now as it did slow things down a bit.
+       *
+       * For other classnames: the `key` is the whole classname
+       * - Okay to remove duplicates as doing so does not impact specificity
+       *
+       * */
+      const key = className.startsWith('_') ? className.slice(0, ATOMIC_GROUP_LENGTH) : className;
+      map[key] = className;
     }
   }
 
-  let str = '';
+  /**
+   * We are converting the `map` into a string.
+   *
+   * The simple way to do this would be `Object.values(map).join(' ')`.
+   * However, the approach below performs 10%-20% better in benchmarks.
+   *
+   * For `ax()` it feels right to squeeze as much runtime performance out as we can.
+   */
+  let result: string = '';
+  for (const key in map) {
+    result += map[key] + ' ';
+  }
 
-  for (const key in atomicGroups) {
-    const value = atomicGroups[key];
-    str += value + ' ';
+  // If we have an empty string, then our `map` was empty.
+  if (!result) {
+    return;
   }
 
-  return str.slice(0, -1);
+  // remove last " " from the result (we added " " at the end of every value)
+  return result.trimEnd();
 }

package/src/types.ts

@@ -104,7 +104,7 @@ export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
  * excess property check doesn't enable makers to circumvent the
  * system and pass in values they shouldn't.
  */
-export type CSSProperties = Readonly<CSS.Properties<(string & object) | number>>;
+export type CSSProperties = Readonly<CSS.Properties<(string & NonNullable<unknown>) | number>>;
 
 /**
  * A stricter subset of the {@link CSSProperties} type that excludes