no-nested-styles

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

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

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

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

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

import { media } from '@atlaskit/primitives';

css({
    [media.above.xs]: {
        color: 'red',
    },
});