ESLint plugin

The essential plugin for use with the Atlassian Design System.

no-nested-styles

Disallows using nested styles. Nested styles can change unexpectedly when child markup changes and result in duplicates when extracting to CSS.

Examples

This rule checks for nested styles inside css objects. This rule has no options.

Incorrect

css({
    div: {
        color: 'red',
    },
});

css({
    '@media (min-width: 480px)': {
        color: 'red',
    },
});

Correct

css({
    color: 'red',
    ':hover': {
        color: 'black',
    },
});

Use canonical typed media-query keys:

import { css } from '@atlaskit/css';
import type MediaAboveXs from '@atlaskit/css/at-rules/media-above-xs';

css({
    ['@media (min-width: 30rem)' satisfies MediaAboveXs]: {
        color: 'red',
    },
});

Was this page helpful?

We use this feedback to improve our documentation.