@compiled/react/runtime

Functionality used at runtime, such as style reconciliation and atomic class names compositon.

CC

Ensures the minimum amount of styles are rendered on the server for child CS components.

import { CC } from '@compiled/react/runtime';

<CC></CC>;

CS

Moves child CSS to the head of the document when rendered on the client while also rendering an inline style element when rendered on the server.

import { CS } from '@compiled/react/runtime';

<CS>{['.foo{color:#ff5630;}']}</CS>;

ax

Concats class names together ensuring the uniqueness of atomic groups. Similar in functionality to the cx function from the classnames package but optimized for atomic groups.

import { ax } from '@compiled/react/runtime';

ax(['_k48pni7l _syaz18rw', '_syazff21']);
// "_k48pni7l _syazff21"

ix

Handles interpolations that may resolve to a falsy value. When called with a falsy value an empty CSS variable is returned.

import { ix } from '@compiled/react/runtime';

ix(true && '#36B37E'); // "#36B37E"
ix(false && '#36B37E'); // "var(--, )"

Suggest changes to this page ➚