Compiled

A familiar and performant
compile time CSS-in-JS library for React.

/** @jsxImportSource @compiled/react */

import { css } from '@compiled/react';

const buttonStyles = css({
  border: 'none',
  borderRadius: '3px',
  padding: '8px 10px',
  backgroundColor: '#6554C0',
  color: '#fff',
  fontWeight: 400,
  fontFamily: 'Arial',
  fontSize: '14px',

  '&:hover': {
    backgroundColor: '#8777D9',
  },

  '&:active': {
    backgroundColor: '#5243AA',
  },
});

export const Button = ({ children }) => {
  return (
    <button type="button" css={buttonStyles}>
      {children}
    </button>
  );
};
/* css-prop-button.tsx generated by @compiled/babel-plugin v0.28.8 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _13 = '._1di6vctu:active{background-color:#5243aa}';
const _12 = '._irr3mlcl:hover{background-color:#8777d9}';
const _11 = '._1wybdlk8{font-size:14px}';
const _10 = '._ect41ttw{font-family:Arial}';
const _9 = '._k48p1nn1{font-weight:400}';
const _8 = '._syazu67f{color:#fff}';
const _7 = '._bfhk1mzw{background-color:#6554c0}';
const _6 = '._19bv19bv{padding-left:10px}';
const _5 = '._n3tdftgi{padding-bottom:8px}';
const _4 = '._u5f319bv{padding-right:10px}';
const _3 = '._ca0qftgi{padding-top:8px}';
const _2 = '._2rko1l7b{border-radius:3px}';
const _ = '._19itglyw{border:none}';
const buttonStyles = null;
export const Button = ({ children }) => {
  return (
    <CC>
      <CS>{[_, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13]}</CS>
      {
        <button
          type="button"
          className={ax([
            '_19itglyw _2rko1l7b _ca0qftgi _u5f319bv _n3tdftgi _19bv19bv _bfhk1mzw _syazu67f _k48p1nn1 _ect41ttw _1wybdlk8 _irr3mlcl _1di6vctu',
          ])}>
          {children}
        </button>
      }
    </CC>
  );
};
<Button>Button</Button>

Don't change a thing

Using APIs and behavior you may already be familiar with, write your styles in JavaScript with the full power of CSS — leveraging the language to create expressive & dynamic experiences.

/** @jsxImportSource @compiled/react */

import { css } from '@compiled/react';

const largeTextStyles = css({ fontSize: '48px' });

export const LargeText = ({ color, children }) => {
  const dynamicColorStyles = css({ color: color });

  return <span css={[largeTextStyles, dynamicColorStyles]}>{children}</span>;
};
<LargeText color="pink">Hello world</LargeText>
Hello world

Speed up your styles

Build with your bundler of choice or just Babel, resulting in very performant components that have their styles built ahead of time.

{
  "plugins": ["@compiled/babel-plugin"]
}
$ babel src
Successfully compiled 1 file with Babel (9ms)
import { CC, CS } from '@compiled/react/runtime';

const _2 = '._syaz4rde{color: var(--_kmurgp)}';
const _ = '._1wybfyhu{font-size: 48px}';

export const LargeHotPinkText = ({ color, children }) => (
  <CC>
    <CS>{[_, _2]}</CS>
    <span style={{ '--_kmurgp': color }} className="_syaz4rde _1wybfyhu">
      {children}
    </span>
  </CC>
);

Extract styles

Turn on extraction and all components styled in your app and sourced through NPM will have their runtime stripped and styles extracted to an atomic style sheet.

  1. Bundle your app
$ webpack
webpack 5.26.3 compiled successfully in 1912 ms
  1. All styles and runtime are removed
-import { CC, CS } from '@compiled/react/runtime';
-
-const _2 = '._syaz4rde{color: var(--_kmurgp)}';
-const _ = '._1wybfyhu{font-size: 48px}';

export const LargeHotPinkText = ({ color, children }) => (
-  <CC>
-    <CS>{[_, _2]}</CS>
    <span style={{ '--_kmurgp': color }} className="_syaz4rde _1wybfyhu">
      {children}
    </span>
-  </CC>
);
  1. An atomic style sheet is generated
._1wybfyhu {
  font-size: 48px;
}
._syaz4rde {
  color: var(--_kmurgp);
}

Compiled brings distributed styles from platform, product, and the wider ecosystem together.

Getting started
Installation