Compiled

Other deprecated features

There are features that Compiled supports, but we now discourage for performance reasons.

Template literals

Compiled supports writing styles as a template literal on our styled and css APIs.

We now recommend using style objects instead of template literals, due to better type safety and syntax validation when using object styles.

Before:

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

export const EmphasisText = (props) => (
  <span
    css={css`
      color: #00b8d9;
      text-transform: uppercase;
      font-weight: 700;
    `}>
    {props.children}
  </span>
);
/* css-prop-string.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _3 = '._k48p1fw0{font-weight:700}';
const _2 = '._1p1dangw{text-transform:uppercase}';
const _ = '._syazxdf1{color:#00b8d9}';
export const EmphasisText = (props) => (
  <CC>
    <CS>{[_, _2, _3]}</CS>
    {<span className={ax(['_syazxdf1 _1p1dangw _k48p1fw0'])}>{props.children}</span>}
  </CC>
);
Sort out
<EmphasisText>Sort out</EmphasisText>

After:

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

const styles = css({
  color: '#00b8d9',
  textTransform: 'uppercase',
  fontWeight: 700,
});

export const EmphasisText = ({ children }) => <span css={styles}>{children}</span>;
/* css-prop-obj.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _3 = '._k48p1fw0{font-weight:700}';
const _2 = '._1p1dangw{text-transform:uppercase}';
const _ = '._syazxdf1{color:#00b8d9}';
const styles = null;
export const EmphasisText = ({ children }) => (
  <CC>
    <CS>{[_, _2, _3]}</CS>
    {<span className={ax(['_syazxdf1 _1p1dangw _k48p1fw0'])}>{children}</span>}
  </CC>
);
Arrange
<EmphasisText>Arrange</EmphasisText>

Nested rules

Like many other CSS-in-JS libraries, Compiled supports nested rules.

Use with caution. Nested selectors will create bloat in the stylesheet through bespoke selectors that are never de-duplicated with other usages elsewhere in the codebase, defeating the purpose and benefits of atomic CSS.

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

const styles = css({
  margin: '0 auto',
  div: {
    color: 'red',
    fontSize: '12px',
    a: {
      textDecoration: 'none',
    },
  },
});

<div css={styles}>
  <div>
    <a>My link</a>
  </div>
</div>;

Instead, we recommend assigning styles directly to the elements to which they apply.

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

const outerStyles = css({ margin: '0 auto' });
const innerStyles = css({ color: 'red', fontSize: '12px' });
const linkStyles = css({ textDecoration: 'none' });

<div css={outerStyles}>
  <div css={innerStyles}>
    <a css={linkStyles}>My link</a>
  </div>
</div>;

Passing css prop to JSX elements with css prop

We support passing a css prop to components that you create with Compiled. However, this is not recommended as it can be tricky to statically determine which styles are applied at runtime.

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

const EmphasisText = (props) => (
  <span
    className={props.className}
    style={props.style}
    css={css({
      color: '#00b8d9',
      textTransform: 'uppercase',
      fontWeight: 700,
    })}>
    {props.children}
  </span>
);

export const CustomColorText = (props) => (
  <EmphasisText css={css({ color: props.color })}>{props.children}</EmphasisText>
);
/* css-prop-composition-correct.tsx generated by @compiled/babel-plugin v0.32.2 */
import { ax, ix, CC, CS } from '@compiled/react/runtime';
const _4 = '._syaz4rde{color:var(--_kmurgp)}';
const _3 = '._k48p1fw0{font-weight:700}';
const _2 = '._1p1dangw{text-transform:uppercase}';
const _ = '._syazxdf1{color:#00b8d9}';
const EmphasisText = (props) => (
  <CC>
    <CS>{[_, _2, _3]}</CS>
    {
      <span className={ax(['_syazxdf1 _1p1dangw _k48p1fw0', props.className])} style={props.style}>
        {props.children}
      </span>
    }
  </CC>
);
export const CustomColorText = (props) => (
  <CC>
    <CS>{[_4]}</CS>
    {
      <EmphasisText
        className={ax(['_syaz4rde'])}
        style={{
          '--_kmurgp': ix(props.color),
        }}>
        {props.children}
      </EmphasisText>
    }
  </CC>
);
Pink text
<CustomColorText color="pink">Pink text</CustomColorText>

Note that both className and style props need to be explicitly given for this to work. (Spread props such as <div {...props} css={{ ... }} /> may not be enough.) If not, the styles will not be applied correctly.

Suggest changes to this page ➚

Previous
[Deprecated] ClassNames
Guides
Atomic CSS