no-important-styles

Blocks the !important flag in style declarations.

Properly composed styles will never need an !important flag. It is used to override specificity when working across different scopes, and the UI Styling Standard enforces styles with minimal scope.

The use of !important is a code smell and greatly impacts readability and determinism.

import { css } from '@compiled/react';
import { token } from '@atlaskit/tokens';

const styles = css({
    color: `${token('color.text.danger')}!important`,
});

import { css } from '@compiled/react';
import { token } from '@atlaskit/tokens';

const styles = css({
    color: token('color.text.danger'),
});