UI Styling Standard

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

Usage Changelog

no-imported-style-values

Blocks imported style values in css, cssMap, styled, keyframes and xcss calls.

Use alongside no-exported-styles which blocks exporting styles.

Compiled style declarations are null at runtime, so using imported styles will cause unexpected errors.

Co-locate style definitions with their usage instead. This will also improve code readability and build performance.

Examples

Incorrect

import { css } from '@compiled/react';
import { colors, getColor } from '../shared';

const styles = css({
    color: getColor('red'),
    backgroundColor: colors['red'],
});

import { css } from '@compiled/react';
import { ff } from '@atlaskit/ff';
import { buttonStyles, cssShared, HEIGHT, colorKey } from '../shared';

const sharedObject = { padding: 0 };

const styles = css({
    ...cssShared,
    ...sharedObject,
    height: `${HEIGHT}px`,
    width: ff('…') ? `${HEIGHT}px` : undefined,
});

Importing styles to use in style composition is not allowed.

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

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

const Component = () => <div css={[styles, buttonStyles]} />;

Importing styles to pass to the style prop is also not allowed.

import { importedWidth } from '../shared';

const Component = () => <div style={{ width: importedWidth }} />;

Type-only imports used by satisfies annotations are not style values and are allowed:

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

const styles = css({
    ['@media (min-width: 48rem)' satisfies MediaAboveSm]: {
        padding: '8px',
    },
});

Correct

Co-locate styles with components to improve code readability, linting, and build performance.

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

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

const Component = () => <div css={styles} />;

import { keyframes } from '@compiled/react';

const animation = keyframes({});
const styles = css({ animate: `${animation} 1s ease-in` });

const Component = () => <div css={styles} />;

Options

`allowedDynamicKeys: [string, string][]`

Use this to allow specified imports as dynamic keys, in addition to the built-in allow-list.

Each value should be a two-element array. The first item is the entrypoint, and the second item is a named export.

Default imports are not supported.

// eslint.config.cjs

// ...
      rules: {
        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [
          'error',
          {
            allowedDynamicKeys: [
              ['@atlaskit/primitives/responsive', 'media'],
            ]
          },
        ],
        // ...
      },
// ...

`allowedFunctionCalls: [string, string][]`

Use this to allow specific functions to be called, in addition to the built-in allow-list.

Each value should be a two-element array. The first item is the entrypoint, and the second item is a named export.

Default imports are not currently supported.

// eslint.config.cjs

// ...
      rules: {
        '@atlaskit/eslint-plugin-ui-styling-standard/no-unsafe-values': [
          'error',
          {
            allowedFunctionCalls: [
              ['@atlaskit/tokens', 'token'],
            ]
          },
        ],
        // ...
      },
// ...

`importSources: string[]`

By default, this rule will check styles using:

@atlaskit/css
@atlaskit/primitives
@compiled/react
@emotion/react
@emotion/core
@emotion/styled
styled-components

Override this list with the importSources option, which accepts an array of package names.

Was this page helpful?

We use this feedback to improve our documentation.