@compiled/react 0.11.2 → 0.11.3

package/dist/browser/class-names/index.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode, CSSProperties } from 'react';
 import type { CssType, CssFunction } from '../types';
-export declare type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
-export declare type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
 interface CssSignature<TProps> {
     (...interpolations: ObjectInterpolation<TProps>[]): string;
     (template: TemplateStringsArray, ...interpolations: TemplateStringsInterpolation<TProps>[]): string;

package/dist/browser/jsx/jsx-local-namespace.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { CssFunction } from '../types';
-declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
+type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
     /**
      * ## CSS prop
      *
@@ -41,14 +41,14 @@ declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ?
      */
     css?: CssFunction<void> | CssFunction<void>[];
 } : {} : {};
-declare type ReactJSXElement = JSX.Element;
-declare type ReactJSXElementClass = JSX.ElementClass;
-declare type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
-declare type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
-declare type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
-declare type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
-declare type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
-declare type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+type ReactJSXElement = JSX.Element;
+type ReactJSXElementClass = JSX.ElementClass;
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
 export declare namespace CompiledJSX {
     type Element = ReactJSXElement;
     type ElementClass = ReactJSXElementClass;

package/dist/browser/keyframes/index.d.ts

@@ -1,5 +1,5 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export declare type KeyframeSteps = string | Record<string, CSSProps<void>>;
+export type KeyframeSteps = string | Record<string, CSSProps<void>>;
 /**
  * ## Keyframes
  *

package/dist/browser/runtime/ax.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAA0C;IACnE,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,EAAE;QAC1B,iDAAiD;QACjD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,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,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,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,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,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,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAA0C;IACnE,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,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,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,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,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,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,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"}

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

@@ -10,8 +10,8 @@ export interface StyleSheetOpts {
 /**
  * Buckets under which we will group our stylesheets
  */
-export declare type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
-export declare type UseCacheHook = () => Record<string, true>;
-export declare type ProviderComponent = (props: {
+export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
+export type UseCacheHook = () => Record<string, true>;
+export type ProviderComponent = (props: {
     children: JSX.Element[] | JSX.Element;
 }) => JSX.Element;

package/dist/browser/styled/index.d.ts

@@ -6,17 +6,17 @@ import type { CssType, CssFunction } from '../types';
 export interface StyledProps {
     as?: keyof JSX.IntrinsicElements;
 }
-export declare type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
-export declare type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
-export interface StyledComponent<ComponentProps extends unknown> {
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+export interface StyledComponent<ComponentProps> {
     <TProps = {}>(...css: ObjectInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
     <TProps = {}>(template: TemplateStringsArray, ...interpolations: TemplateStringsInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
 }
-export declare type StyledComponentMap = {
+export type StyledComponentMap = {
     [Tag in keyof JSX.IntrinsicElements]: StyledComponent<JSX.IntrinsicElements[Tag]>;
 };
 export interface CreateStyledComponent extends StyledComponentMap {
-    <TInheritedProps extends unknown>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>;
+    <TInheritedProps>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>;
 }
 /**
  * ## Styled component

package/dist/browser/styled/index.js.flow

@@ -14,7 +14,7 @@ export type StyledProps = {
 };
 export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
 export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
-export interface StyledComponent<ComponentProps: mixed> {
+export interface StyledComponent<ComponentProps> {
   <TProps>(
     ...css: ObjectInterpolation<TProps>[]
   ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
@@ -25,9 +25,7 @@ export interface StyledComponent<ComponentProps: mixed> {
 }
 export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledComponent<mixed>>;
 export type CreateStyledComponent = {
-  <TInheritedProps: mixed>(
-    Component: ComponentType<TInheritedProps>
-  ): StyledComponent<TInheritedProps>,
+  <TInheritedProps>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>,
   ...
 } & StyledComponentMap;
 /**

package/dist/browser/styled/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAsClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,IAAM,MAAM,GAA0B,IAAI,KAAK,CACpD,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAoClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,IAAM,MAAM,GAA0B,IAAI,KAAK,CACpD,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}

package/dist/browser/types.d.ts

@@ -2,19 +2,19 @@ import type * as CSS from 'csstype';
 /**
  * Typing for the interpolations.
  */
-export declare type BasicTemplateInterpolations = string | number;
+export type BasicTemplateInterpolations = string | number;
 export interface FunctionInterpolation<TProps> {
     (props: TProps): CssFunction<TProps>;
 }
 /**
  * Possible types for a CSS value
  */
-export declare type CssType<TProps> = CSSProps<TProps> | CssObject<TProps> | FunctionInterpolation<TProps> | string;
+export type CssType<TProps> = CSSProps<TProps> | CssObject<TProps> | FunctionInterpolation<TProps> | string;
 /**
  * These are all the CSS props that will exist.
  */
-export declare type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
-export declare type CssObject<TProps> = {
+export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
+export type CssObject<TProps> = {
     [key: string]: CssFunction<TProps>;
 };
-export declare type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | boolean | undefined;
+export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | boolean | undefined;

package/dist/cjs/class-names/index.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode, CSSProperties } from 'react';
 import type { CssType, CssFunction } from '../types';
-export declare type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
-export declare type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
 interface CssSignature<TProps> {
     (...interpolations: ObjectInterpolation<TProps>[]): string;
     (template: TemplateStringsArray, ...interpolations: TemplateStringsInterpolation<TProps>[]): string;

package/dist/cjs/jsx/jsx-local-namespace.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { CssFunction } from '../types';
-declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
+type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
     /**
      * ## CSS prop
      *
@@ -41,14 +41,14 @@ declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ?
      */
     css?: CssFunction<void> | CssFunction<void>[];
 } : {} : {};
-declare type ReactJSXElement = JSX.Element;
-declare type ReactJSXElementClass = JSX.ElementClass;
-declare type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
-declare type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
-declare type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
-declare type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
-declare type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
-declare type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+type ReactJSXElement = JSX.Element;
+type ReactJSXElementClass = JSX.ElementClass;
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
 export declare namespace CompiledJSX {
     type Element = ReactJSXElement;
     type ElementClass = ReactJSXElementClass;

package/dist/cjs/keyframes/index.d.ts

@@ -1,5 +1,5 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export declare type KeyframeSteps = string | Record<string, CSSProps<void>>;
+export type KeyframeSteps = string | Record<string, CSSProps<void>>;
 /**
  * ## Keyframes
  *

package/dist/cjs/runtime/ax.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":";;AAAA,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAwB,EAAE,CAAC,UAA0C;IACnE,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,EAAE;QAC1B,iDAAiD;QACjD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,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,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,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,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,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,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAwB,EAAE,CAAC,UAA0C;IACnE,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,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,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,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,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,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,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"}

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

@@ -10,8 +10,8 @@ export interface StyleSheetOpts {
 /**
  * Buckets under which we will group our stylesheets
  */
-export declare type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
-export declare type UseCacheHook = () => Record<string, true>;
-export declare type ProviderComponent = (props: {
+export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
+export type UseCacheHook = () => Record<string, true>;
+export type ProviderComponent = (props: {
     children: JSX.Element[] | JSX.Element;
 }) => JSX.Element;

package/dist/cjs/styled/index.d.ts

@@ -6,17 +6,17 @@ import type { CssType, CssFunction } from '../types';
 export interface StyledProps {
     as?: keyof JSX.IntrinsicElements;
 }
-export declare type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
-export declare type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
-export interface StyledComponent<ComponentProps extends unknown> {
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+export interface StyledComponent<ComponentProps> {
     <TProps = {}>(...css: ObjectInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
     <TProps = {}>(template: TemplateStringsArray, ...interpolations: TemplateStringsInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
 }
-export declare type StyledComponentMap = {
+export type StyledComponentMap = {
     [Tag in keyof JSX.IntrinsicElements]: StyledComponent<JSX.IntrinsicElements[Tag]>;
 };
 export interface CreateStyledComponent extends StyledComponentMap {
-    <TInheritedProps extends unknown>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>;
+    <TInheritedProps>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>;
 }
 /**
  * ## Styled component

package/dist/cjs/styled/index.js.flow

@@ -14,7 +14,7 @@ export type StyledProps = {
 };
 export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
 export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
-export interface StyledComponent<ComponentProps: mixed> {
+export interface StyledComponent<ComponentProps> {
   <TProps>(
     ...css: ObjectInterpolation<TProps>[]
   ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
@@ -25,9 +25,7 @@ export interface StyledComponent<ComponentProps: mixed> {
 }
 export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledComponent<mixed>>;
 export type CreateStyledComponent = {
-  <TInheritedProps: mixed>(
-    Component: ComponentType<TInheritedProps>
-  ): StyledComponent<TInheritedProps>,
+  <TInheritedProps>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>,
   ...
 } & StyledComponentMap;
 /**

package/dist/cjs/styled/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.ts"],"names":[],"mappings":";;;AAGA,wCAAkD;AAsClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACU,QAAA,MAAM,GAA0B,IAAI,KAAK,CACpD,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,IAAA,wBAAgB,GAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.ts"],"names":[],"mappings":";;;AAGA,wCAAkD;AAoClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACU,QAAA,MAAM,GAA0B,IAAI,KAAK,CACpD,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,IAAA,wBAAgB,GAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}

package/dist/cjs/types.d.ts

@@ -2,19 +2,19 @@ import type * as CSS from 'csstype';
 /**
  * Typing for the interpolations.
  */
-export declare type BasicTemplateInterpolations = string | number;
+export type BasicTemplateInterpolations = string | number;
 export interface FunctionInterpolation<TProps> {
     (props: TProps): CssFunction<TProps>;
 }
 /**
  * Possible types for a CSS value
  */
-export declare type CssType<TProps> = CSSProps<TProps> | CssObject<TProps> | FunctionInterpolation<TProps> | string;
+export type CssType<TProps> = CSSProps<TProps> | CssObject<TProps> | FunctionInterpolation<TProps> | string;
 /**
  * These are all the CSS props that will exist.
  */
-export declare type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
-export declare type CssObject<TProps> = {
+export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
+export type CssObject<TProps> = {
     [key: string]: CssFunction<TProps>;
 };
-export declare type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | boolean | undefined;
+export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | boolean | undefined;

package/dist/esm/class-names/index.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode, CSSProperties } from 'react';
 import type { CssType, CssFunction } from '../types';
-export declare type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
-export declare type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
 interface CssSignature<TProps> {
     (...interpolations: ObjectInterpolation<TProps>[]): string;
     (template: TemplateStringsArray, ...interpolations: TemplateStringsInterpolation<TProps>[]): string;

package/dist/esm/jsx/jsx-local-namespace.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { CssFunction } from '../types';
-declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
+type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ? string extends TProps['className' & keyof TProps] ? {
     /**
      * ## CSS prop
      *
@@ -41,14 +41,14 @@ declare type WithConditionalCSSProp<TProps> = 'className' extends keyof TProps ?
      */
     css?: CssFunction<void> | CssFunction<void>[];
 } : {} : {};
-declare type ReactJSXElement = JSX.Element;
-declare type ReactJSXElementClass = JSX.ElementClass;
-declare type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
-declare type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
-declare type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
-declare type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
-declare type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
-declare type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
+type ReactJSXElement = JSX.Element;
+type ReactJSXElementClass = JSX.ElementClass;
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty;
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute;
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes;
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>;
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements;
 export declare namespace CompiledJSX {
     type Element = ReactJSXElement;
     type ElementClass = ReactJSXElementClass;

package/dist/esm/keyframes/index.d.ts

@@ -1,5 +1,5 @@
 import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export declare type KeyframeSteps = string | Record<string, CSSProps<void>>;
+export type KeyframeSteps = string | Record<string, CSSProps<void>>;
 /**
  * ## Keyframes
  *

package/dist/esm/runtime/ax.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"ax.js","sourceRoot":"","sources":["../../../src/runtime/ax.ts"],"names":[],"mappings":"AAAA,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAA0C;IACnE,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,EAAE;QAC1B,iDAAiD;QACjD,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC;KACnC;IAED,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,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,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,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,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,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,IAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,IAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CAAC,UAA0C;IACnE,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,IAAM,YAAY,GAA2B,EAAE,CAAC;IAEhD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,IAAM,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,GAAG,EAAE;YACR,SAAS;SACV;QAED,IAAM,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,IAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;YACzB,IAAM,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,IAAM,GAAG,IAAI,YAAY,EAAE;QAC9B,IAAM,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"}

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

@@ -10,8 +10,8 @@ export interface StyleSheetOpts {
 /**
  * Buckets under which we will group our stylesheets
  */
-export declare type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
-export declare type UseCacheHook = () => Record<string, true>;
-export declare type ProviderComponent = (props: {
+export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
+export type UseCacheHook = () => Record<string, true>;
+export type ProviderComponent = (props: {
     children: JSX.Element[] | JSX.Element;
 }) => JSX.Element;

package/dist/esm/styled/index.d.ts

@@ -6,17 +6,17 @@ import type { CssType, CssFunction } from '../types';
 export interface StyledProps {
     as?: keyof JSX.IntrinsicElements;
 }
-export declare type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
-export declare type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
-export interface StyledComponent<ComponentProps extends unknown> {
+export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
+export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
+export interface StyledComponent<ComponentProps> {
     <TProps = {}>(...css: ObjectInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
     <TProps = {}>(template: TemplateStringsArray, ...interpolations: TemplateStringsInterpolation<TProps>[]): React.ComponentType<TProps & ComponentProps & StyledProps>;
 }
-export declare type StyledComponentMap = {
+export type StyledComponentMap = {
     [Tag in keyof JSX.IntrinsicElements]: StyledComponent<JSX.IntrinsicElements[Tag]>;
 };
 export interface CreateStyledComponent extends StyledComponentMap {
-    <TInheritedProps extends unknown>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>;
+    <TInheritedProps>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>;
 }
 /**
  * ## Styled component

package/dist/esm/styled/index.js.flow

@@ -14,7 +14,7 @@ export type StyledProps = {
 };
 export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
 export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
-export interface StyledComponent<ComponentProps: mixed> {
+export interface StyledComponent<ComponentProps> {
   <TProps>(
     ...css: ObjectInterpolation<TProps>[]
   ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
@@ -25,9 +25,7 @@ export interface StyledComponent<ComponentProps: mixed> {
 }
 export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledComponent<mixed>>;
 export type CreateStyledComponent = {
-  <TInheritedProps: mixed>(
-    Component: ComponentType<TInheritedProps>
-  ): StyledComponent<TInheritedProps>,
+  <TInheritedProps>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>,
   ...
 } & StyledComponentMap;
 /**

package/dist/esm/styled/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAsClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,IAAM,MAAM,GAA0B,IAAI,KAAK,CACpD,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styled/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAoClD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,IAAM,MAAM,GAA0B,IAAI,KAAK,CACpD,EAAE,EACF;IACE,GAAG;QACD,OAAO;YACL,8CAA8C;YAC9C,yDAAyD;YACzD,MAAM,gBAAgB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC;CACF,CACK,CAAC"}

package/dist/esm/types.d.ts

@@ -2,19 +2,19 @@ import type * as CSS from 'csstype';
 /**
  * Typing for the interpolations.
  */
-export declare type BasicTemplateInterpolations = string | number;
+export type BasicTemplateInterpolations = string | number;
 export interface FunctionInterpolation<TProps> {
     (props: TProps): CssFunction<TProps>;
 }
 /**
  * Possible types for a CSS value
  */
-export declare type CssType<TProps> = CSSProps<TProps> | CssObject<TProps> | FunctionInterpolation<TProps> | string;
+export type CssType<TProps> = CSSProps<TProps> | CssObject<TProps> | FunctionInterpolation<TProps> | string;
 /**
  * These are all the CSS props that will exist.
  */
-export declare type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
-export declare type CssObject<TProps> = {
+export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
+export type CssObject<TProps> = {
     [key: string]: CssFunction<TProps>;
 };
-export declare type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | boolean | undefined;
+export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -72,13 +72,13 @@
     "jsx-dev-runtime"
   ],
   "dependencies": {
-    "csstype": "^3.1.0"
+    "csstype": "^3.1.1"
   },
   "devDependencies": {
     "@compiled/benchmark": "^1.0.1",
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",
-    "@types/react-dom": "^17.0.17",
+    "@types/react-dom": "^17.0.18",
     "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

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

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

package/src/runtime/ax.ts

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

package/src/styled/index.js.flow

@@ -14,7 +14,7 @@ export type StyledProps = {
 };
 export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
 export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
-export interface StyledComponent<ComponentProps: mixed> {
+export interface StyledComponent<ComponentProps> {
   <TProps>(
     ...css: ObjectInterpolation<TProps>[]
   ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
@@ -25,9 +25,7 @@ export interface StyledComponent<ComponentProps: mixed> {
 }
 export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledComponent<mixed>>;
 export type CreateStyledComponent = {
-  <TInheritedProps: mixed>(
-    Component: ComponentType<TInheritedProps>
-  ): StyledComponent<TInheritedProps>,
+  <TInheritedProps>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>,
   ...
 } & StyledComponentMap;
 /**

package/src/styled/index.ts

@@ -13,7 +13,7 @@ export interface StyledProps {
 export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
 export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
 
-export interface StyledComponent<ComponentProps extends unknown> {
+export interface StyledComponent<ComponentProps> {
   // Allows either string or object (`` or ({}))
   // We disable the ban types rule here as we need to join the empty object default with other props
   // eslint-disable-next-line @typescript-eslint/ban-types
@@ -34,9 +34,7 @@ export type StyledComponentMap = {
 
 export interface CreateStyledComponent extends StyledComponentMap {
   // Typing to enable consumers to compose components, e.g: `styled(Component)`
-  <TInheritedProps extends unknown>(
-    Component: ComponentType<TInheritedProps>
-  ): StyledComponent<TInheritedProps>;
+  <TInheritedProps>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>;
 }
 
 /**