UI Styling Standard

The eslint plugin to enforce and educate on Atlassian's UI Styling Standard

local-cx-xcss

Blocks the cx() function from being used outside of the xcss prop. This aids tracking which styles are applied.

Use the cx() function when passing multiple styles to the xcss prop. This provides more robust type checking than the conventional array syntax:

import { cssMap, cx } from '@compiled/react';
import { token } from '@atlaskit/tokens';
import { Component } from 'some-package';

const styles = cssMap({
    text: { color: token('color.text') },
    primary: { color: token('color.text.brand') },
});

<Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />;

The cx() function is only checked when imported from @compiled/react or @atlaskit/css.

Examples

Incorrect

import { cssMap, cx } from '@compiled/react';
import { token } from '@atlaskit/tokens';

const styles = cssMap({
    text: { color: token('color.text') },
    bg: { background: token('color.background.neutral') },
});

const joinedStyles = cx(styles.text, styles.bg);

<Button xcss={joinedStyles} />;

Correct

import { cssMap, cx } from '@compiled/react';

const styles = cssMap({
    text: { color: token('color.text') },
    bg: { background: token('color.background.neutral') },
});

<Button xcss={cx(styles.text, styles.bg)} />;

Was this page helpful?

We use this feedback to improve our documentation.