ESLint plugin

The essential plugin for use with the Atlassian Design System.

no-unsafe-style-overrides

Unsafe style overrides cause friction and incidents when internals of the component you're overriding change. They're inherently unbounded and everything is API that can change at a moments notice.

Instead, lean on composition, primitive components, and safe style overrides via the xcss prop where component authors declare what styles they want to support.

Examples

Incorrect

import Button from '@atlaskit/button';

<Button css={{ fontWeight: 500 }}>foo</Button>;
        ^^^

import { LinkItem } from '@atlaskit/menu';

<LinkItem cssFn={() => ({ '> div > div': { padding: 2 } })} />;
          ^^^^^

import { ButtonItem } from '@atlaskit/side-navigation';

<ButtonItem className="text-neutral-400" />;
            ^^^^^^^^^

Correct

<Button>
    <strong>foo</strong>
</Button>

const styles = css({ padding: 'var(--ds-space-100)' });

<Anchor xcss={styles}>
    <Stack>
        <Inline />
        <Inline />
    </Stack>
</Anchor>;

Was this page helpful?

We use this feedback to improve our documentation.