UI Styling Standard

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

use-compiled

Blocks CSS-in-JS libraries other than @compiled/react, including Emotion and styled-components.

WARNING It may be unsafe to mix usages of @compiled/react with other CSS-in-JS libraries on the same component. When converting to @compiled/react verify ALL changes. For this reason, the autofixer has been disabled by default, but it may be useful to enable to empower a migration.

Examples

Incorrect

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { css } from '@emotion/core';
import { jsx } from '@emotion/react';
import styled from '@emotion/styled';

import styled, { css } from 'styled-components';

Correct

We expect usage of xcss with @atlaskit/primitives when working with Primitives, and css with @compiled/react when working with custom or native code.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { jsx, css, styled } from '@compiled/react';

const styles = css({ color: 'var(--ds-color-text)' });
export default () => <div css={styles}>…</div>;

import { xcss, Box } from '@atlaskit/primitives';

const styles = xcss({ color: 'color.text' });
export default () => <Box xcss={styles}>…</Box>;

Options

`canAutoFix: boolean`

Determines whether or not the autofixer is enabled.

Defaults to false due to safety concerns when mixing Compiled and other CSS-in-JS libraries on the same component.

Even when enabled, the autofixer will only convert usages that are deemed safe. Currently this is limited to purely static styles where all keys and values are simple literals.

Was this page helpful?

We use this feedback to improve our documentation.