UI Styling Standard

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

convert-props-syntax

Blocks dynamic styling syntax that is unsupported by styled-components@<4 and @emotion/styled, and provides an autofix for converting to a supported syntax.

Use this rule alongside no-styled-tagged-template-expression, which can output the unsupported dynamic styling syntax.

This rule applies only to styled usages from styled-components and @emotion/styled.

Autofix

The autofix will find style object values that are arrow functions,

styled.div({
    color: ({ myColor }) => myColor,
    backgroundColor: (props) => props.someColor,
});

However, refactoring the arrow function so that it is the argument to styled.div will fix the issue:

styled.div((props) => ({
    color: props.myColor,
    backgroundColor: props.someColor,
}));

This ESLint rule will only run on usages of the styled API when imported from libraries that are known to have this problem.

About the autofixer

This rule has an autofixer that will automatically perform the above arrow function refactoring for the majority of cases, including for nested selectors and any props used in template literal values.

However, there are a few situations where the autofixer will not be run. For these, you will need to manually fix the output, or migrate the code to @compiled/react.

Type annotations

Type annotations in the arrow function are not supported; you will need to remediate the lint error manually. For example:

type Props = {
    myColor: string;
    someColor: string;
};

styled.div({
    color: ({ myColor }: Props) => myColor,
    backgroundColor: (props: Props) => props.someColor,
});

could be refactored as

type Props = {
    myColor: string;
    someColor: string;
};

styled.div((props: Props) => ({
    color: props.myColor,
    backgroundColor: props.someColor,
}));

Special syntax in function parameters

Rest elements, default values, and so on in the parameter of an arrow function will need to be remediated manually. For example:

styled.div({
    color: ({ myColor = '#fff' }) => myColor,
    backgroundColor: ({ myColor = '#aaa' }) => myColor,
});

could be refactored as

styled.div((props) => ({
    color: myColor ?? '#fff',
    backgroundColor: myColor ?? '#aaa',
}));

Examples

Incorrect

import styled from 'styled-components';

styled.div({
    color: ({ myColor }) => myColor,
    backgroundColor: (props) => props.someColor,
});

styled.div({
    color: `url(/tmp/${({ coolProp }) => coolProp}.png)`,
});

Correct

import styled from '@emotion/styled';

styled.div((props) => ({
    color: props.myColor,
    backgroundColor: props.someColor,
}));

styled.div((props) => ({
    color: url(`/tmp/${coolProp}.png`),
}));

When not to use it

You do not need this rule if you are not using a codebase that has a violating library as it will never do anything.

Was this page helpful?

We use this feedback to improve our documentation.