Composing Utilities

Create your own subset of utilities.

By default the x namespace exposed in xstyled has all utilities built-in. Sometime you may want to reduce your bundle size by choosing only utilities you need.

Create a new namespace

You can't modify the x namespace but you can easily create your own namespace using createX. It allows you to create a namespace from an utility:

import { createX, fontSize } from '@xstyled/...'
import { borderInline } from './border-inline'

const x = createX(fontSize)

// Only "fontSize" is usable
<x.div fontSize="10px" />

Compose utilities

Compose utilities using compose method.

import { createX, compose, fontSize, fontWeight } from '@xstyled/...'
import { borderInline } from './border-inline'

const x = createX(compose(fontSize, fontWeight))

// "fontSize" and "fontWeight" are usable
<x.div fontSize="10px" fontWeight="bold" />

Utility groups

To make it easier, utilities are organized in groups, for example typography groups all utilities relative to text edition:

import { createX, typography } from '@xstyled/...'
import { borderInline } from './border-inline'

const x = createX(typography)

// "fontSize", "fontWeight" and all typography utilities are available
<x.div fontSize="10px" fontWeight="bold" />

Available groups