vanilla-extract vs StyleX vs Pigment CSS

export const button = recipe({
  base: { borderRadius: 6, fontWeight: 700 },
  variants: {
    tone: { danger: { background: vars.color.danger } },
    size: { sm: { padding: '6px 10px' } },
  },
})

button({ tone: 'danger', size: 'sm' })

const styles = stylex.create({
  base: { borderRadius: 6, fontWeight: 700 },
  danger: { backgroundColor: 'red' },
  small: { padding: '6px 10px' },
})

stylex.props(styles.base, isDanger && styles.danger, styles.small)

const Button = styled('button')({
  borderRadius: 6,
  fontWeight: 700,
  variants: [
    { props: { tone: 'danger' }, style: { background: 'red' } },
    { props: { size: 'sm' }, style: { padding: '6px 10px' } },
  ],
})

const base = css({ borderRadius: 6, fontWeight: 700 })
const danger = css({ backgroundColor: 'red' })
const small = css({ padding: '6px 10px' })

<button css={[base, isDanger && danger, small]} />

export const card = style({ padding: 24 })
export const compactCard = style([card, { padding: 12 }])

<section className={compactCard} />

function Card(props) {
  return <section {...stylex.props(styles.card, props.style)} />
}

<Card style={styles.compact} />

function Card(props) {
  return <section sx={[cardSx, props.sx]} />
}

<Card sx={{ padding: 12 }} />

function Card({ css: cssProp }) {
  return <section css={[card, cssProp]} />
}

<Card css={compact} />

export const brandColor = createVar()
export const badge = style({ color: brandColor })

<span
  className={badge}
  style={assignInlineVars({ [brandColor]: userColor })}
/>

const styles = stylex.create({
  badge: (color) => ({ color }),
})

<span {...stylex.props(styles.badge(userColor))} />

const Badge = styled('span')({
  color: 'var(--brand-color)',
})

<Badge style={{ '--brand-color': userColor }} />

<span css={{ color: userColor }} />

// Direct and ergonomic because Emotion can generate CSS at runtime.

const base = style({ color: 'gray' })
const danger = style([base, { color: 'red' }])

// The authored composition owns the result.

stylex.props(styles.base, styles.primary, styles.danger)

// danger wins because it is applied last.

<Button sx={[baseSx, primarySx, dangerSx]} />

// Familiar order, but only supported style shapes can be extracted.

<Button css={[base, primary, danger]} />

// Later Emotion styles win at runtime.