@compiled/react 0.18.3 → 0.18.5

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

@@ -19,8 +19,10 @@ export type CssObject<TProps> = Readonly<{
 }>;
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
 export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition';
+export type FlattenedChainedCSSPseudosClasses = '&:visited:active' | '&:visited:hover' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus:not(:focus-visible)';
 export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
-export type CSSPseudos = CSSPseudoElements | CSSPseudoClasses;
+export type AllCSSPseudoClasses = CSSPseudoClasses | FlattenedChainedCSSPseudosClasses;
+export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
 /**
  * The XCSSProp must be given all known available properties even
  * if it takes a subset of them. This ensures the (lack-of an)

package/dist/esm/xcss-prop/index.d.ts

@@ -1,16 +1,16 @@
 import type * as CSS from 'csstype';
 import type { ApplySchemaValue } from '../create-strict-api/types';
-import type { CSSPseudos, CSSPseudoClasses, CSSProperties, StrictCSSProperties } from '../types';
+import type { CSSPseudos, CSSProperties, StrictCSSProperties, AllCSSPseudoClasses } from '../types';
 type MarkAsRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
-type XCSSValue<TStyleDecl extends keyof CSSProperties, TSchema, TPseudoKey extends CSSPseudoClasses | ''> = {
+type XCSSValue<TStyleDecl extends keyof CSSProperties, TSchema, TPseudoKey extends AllCSSPseudoClasses | ''> = {
     [Q in keyof StrictCSSProperties]: Q extends TStyleDecl ? ApplySchemaValue<TSchema, Q, TPseudoKey> : never;
 };
 type XCSSPseudo<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TRequiredProperties extends {
     requiredProperties: TAllowedProperties;
 }, TSchema> = {
-    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends CSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
+    [Q in CSSPseudos]?: Q extends TAllowedPseudos ? MarkAsRequired<XCSSValue<TAllowedProperties, TSchema, Q extends AllCSSPseudoClasses ? Q : ''>, TRequiredProperties['requiredProperties']> : never;
 };
 type XCSSMediaQuery<TAllowedProperties extends keyof StrictCSSProperties, TAllowedPseudos extends CSSPseudos, TAllowedMediaQueries extends string, TSchema> = {
     [Q in `@media ${TAllowedMediaQueries}`]?: XCSSValue<TAllowedProperties, TSchema, ''> | XCSSPseudo<TAllowedProperties, TAllowedPseudos, never, TSchema>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.18.3",
+  "version": "0.18.5",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",

package/src/__tests__/browser.test.tsx

@@ -94,13 +94,14 @@ describe('browser', () => {
     render(<StyledLink href="https://atlassian.design">Atlassian Design System</StyledLink>);
 
     expect(document.head.innerHTML.split('</style>').join('</style>\n')).toMatchInlineSnapshot(`
-      "<style nonce="k0Mp1lEd">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}._v0vw1x77:focus-visible, ._ysv71x77:link{color:white}</style>
-      <style nonce="k0Mp1lEd">._ysv75scu:link{color:red}</style>
+      "<style nonce="k0Mp1lEd">._1e0c1txw{display:flex}._1wyb12am{font-size:50px}._syaz1cnh{color:purple}</style>
+      <style nonce="k0Mp1lEd">._ysv75scu:link{color:red}._ysv71x77:link{color:white}</style>
       <style nonce="k0Mp1lEd">._105332ev:visited{color:pink}</style>
       <style nonce="k0Mp1lEd">._f8pjbf54:focus{color:green}</style>
+      <style nonce="k0Mp1lEd">._v0vw1x77:focus-visible{color:white}</style>
       <style nonce="k0Mp1lEd">._30l31gy6:hover{color:yellow}</style>
       <style nonce="k0Mp1lEd">._9h8h13q2:active{color:blue}</style>
-      <style nonce="k0Mp1lEd">@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._jbabtwqo:focus-visible, ._6146twqo:hover{color:grey}._1cld11x8:active{color:black}}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}</style>
+      <style nonce="k0Mp1lEd">@media (max-width:800px){._1o8z1gy6:focus{color:yellow}._jbabtwqo:focus-visible{color:grey}._6146twqo:hover{color:grey}._1cld11x8:active{color:black}}@supports (display:grid){._1df61gy6:focus{color:yellow}._7okp11x8:active{color:black}}</style>
       "
     `);
   });

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/create-strict-api/__tests__/__fixtures__/strict-api-recursive.ts

@@ -24,9 +24,15 @@ interface PressedProperties {
   backgroundColor: BackgroundPressed;
 }
 
+interface ChainedProperties {
+  color: ColorPressed;
+  backgroundColor: BackgroundPressed;
+}
+
 interface CSSPropertiesSchema extends Properties {
   '&:hover': HoveredProperties;
   '&:active': PressedProperties;
+  '&:hover::after': ChainedProperties;
 }
 
 const { css, cssMap, cx, XCSSProp } = createStrictAPI<CSSPropertiesSchema>();

package/src/create-strict-api/__tests__/generics.test.tsx

@@ -9,6 +9,7 @@ describe('createStrictAPI()', () => {
     const styles = css({
       '&:hover': {},
       '&:active': {},
+      '&:hover::after': {},
       '&::before': {},
       '&::after': {},
     });
@@ -23,6 +24,7 @@ describe('createStrictAPI()', () => {
       nested: {
         '&:hover': {},
         '&:active': {},
+        '&:hover::after': {},
         '&::before': {},
         '&::after': {},
       },
@@ -40,7 +42,7 @@ describe('createStrictAPI()', () => {
       xcss: ReturnType<
         typeof XCSSProp<
           'backgroundColor' | 'color',
-          '&:hover' | '&:active' | '&::before' | '&::after'
+          '&:hover' | '&:active' | '&::before' | '&::after' | '&:hover::after'
         >
       >;
     }) {
@@ -49,7 +51,13 @@ describe('createStrictAPI()', () => {
 
     const { getByTestId } = render(
       <Component
-        xcss={{ '&:hover': {}, '&:active': {}, '&::before': {}, '&::after': {} }}
+        xcss={{
+          '&:hover': {},
+          '&:active': {},
+          '&::before': {},
+          '&::after': {},
+          '&:hover::after': {},
+        }}
         data-testid="div"
       />
     );
@@ -76,6 +84,12 @@ describe('createStrictAPI()', () => {
           // @ts-expect-error — Type '""' is not assignable to type ...
           backgroundColor: '',
         },
+        '&:hover::after': {
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          color: '',
+          // @ts-expect-error — Type '""' is not assignable to type ...
+          backgroundColor: '',
+        },
         '&::before': {
           // @ts-expect-error — Type '""' is not assignable to type ...
           color: '',
@@ -114,6 +128,12 @@ describe('createStrictAPI()', () => {
             // @ts-expect-error — Type '""' is not assignable to type ...
             backgroundColor: '',
           },
+          '&:hover::after': {
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            color: '',
+            // @ts-expect-error — Type '""' is not assignable to type ...
+            backgroundColor: '',
+          },
           '&::before': {
             // @ts-expect-error — Type '""' is not assignable to type ...
             color: '',
@@ -139,7 +159,7 @@ describe('createStrictAPI()', () => {
         xcss: ReturnType<
           typeof XCSSProp<
             'backgroundColor' | 'color',
-            '&:hover' | '&:active' | '&::before' | '&::after'
+            '&:hover' | '&:active' | '&::before' | '&::after' | '&:hover::after'
           >
         >;
       }) {
@@ -165,6 +185,12 @@ describe('createStrictAPI()', () => {
               // @ts-expect-error — Type '""' is not assignable to type ...
               backgroundColor: 'var(--ds-success)',
             },
+            '&:hover::after': {
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              color: 'var(--ds-text)',
+              // @ts-expect-error — Type '""' is not assignable to type ...
+              backgroundColor: 'var(--ds-success)',
+            },
             '&::before': {
               // @ts-expect-error — Type '""' is not assignable to type ...
               color: '',
@@ -198,6 +224,12 @@ describe('createStrictAPI()', () => {
           color: 'var(--ds-text-hovered)',
           backgroundColor: 'var(--ds-bold-hovered)',
         },
+        '&:hover::after': {
+          // @ts-expect-error — should be a value from the schema
+          padding: '10px',
+          color: 'var(--ds-text-pressed)',
+          backgroundColor: 'var(--ds-bold-pressed)',
+        },
         '&:active': {
           // @ts-expect-error — should be a value from the schema
           padding: '10px',
@@ -243,6 +275,12 @@ describe('createStrictAPI()', () => {
             color: 'var(--ds-text-pressed)',
             backgroundColor: 'var(--ds-bold-pressed)',
           },
+          '&:hover::after': {
+            // @ts-expect-error — should be a value from the schema
+            padding: '10px',
+            color: 'var(--ds-text-pressed)',
+            backgroundColor: 'var(--ds-bold-pressed)',
+          },
           '&::before': {
             // @ts-expect-error — should be a value from the schema
             padding: '10px',
@@ -270,7 +308,7 @@ describe('createStrictAPI()', () => {
         xcss: ReturnType<
           typeof XCSSProp<
             'backgroundColor' | 'color',
-            '&:hover' | '&:active' | '&::before' | '&::after'
+            '&:hover' | '&:active' | '&::before' | '&::after' | '&:hover::after'
           >
         >;
       }) {
@@ -290,6 +328,10 @@ describe('createStrictAPI()', () => {
               color: 'var(--ds-text-pressed)',
               backgroundColor: 'var(--ds-bold-pressed)',
             },
+            '&:hover::after': {
+              color: 'var(--ds-text-pressed)',
+              backgroundColor: 'var(--ds-bold-pressed)',
+            },
             '&::before': {
               color: 'var(--ds-text)',
               backgroundColor: 'var(--ds-bold)',

package/src/create-strict-api/types.ts

@@ -1,8 +1,8 @@
 import type {
   StrictCSSProperties,
-  CSSPseudoClasses,
   CSSPseudoElements,
   CSSPseudos,
+  AllCSSPseudoClasses,
 } from '../types';
 
 /**
@@ -11,7 +11,7 @@ import type {
  * and pseudo elements.
  */
 export type CompiledSchemaShape = StrictCSSProperties & {
-  [Q in CSSPseudoClasses]?: StrictCSSProperties;
+  [Q in AllCSSPseudoClasses]?: StrictCSSProperties;
 };
 
 export type PseudosDeclarations = { [Q in CSSPseudos]?: StrictCSSProperties };
@@ -27,7 +27,7 @@ export type AllowedStyles<TMediaQuery extends string> = StrictCSSProperties &
 export type ApplySchemaValue<
   TSchema,
   TKey extends keyof StrictCSSProperties,
-  TPseudoKey extends CSSPseudoClasses | ''
+  TPseudoKey extends AllCSSPseudoClasses | ''
 > = TKey extends keyof TSchema
   ? // TKey is a valid property on the schema
     TPseudoKey extends keyof TSchema
@@ -46,11 +46,11 @@ export type ApplySchemaValue<
  * value if present, else fallback to its value from {@link StrictCSSProperties}. If
  * the property isn't a known property its value will be resolved to `never`.
  */
-export type ApplySchema<TObject, TSchema, TPseudoKey extends CSSPseudoClasses | '' = ''> = {
+export type ApplySchema<TObject, TSchema, TPseudoKey extends AllCSSPseudoClasses | '' = ''> = {
   [TKey in keyof TObject]?: TKey extends keyof StrictCSSProperties
     ? // TKey is a valid CSS property, try to resolve its value.
       ApplySchemaValue<TSchema, TKey, TPseudoKey>
-    : TKey extends CSSPseudoClasses
+    : TKey extends AllCSSPseudoClasses
     ? // TKey is a valid pseudo class, recursively resolve its child properties
       // while passing down the parent pseudo key to resolve any specific schema types.
       ApplySchema<TObject[TKey], TSchema, TKey>

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();
 }