Search code examples
phpstormwebstormstyled-components

Is there a way to rearrange styled-components css in alphabetical order?

WebStorm offers the setting Sort CSS properties - By name.

Which rearranges:

.test {
    display: flex;
    align-items: center;
    cursor: pointer;
}

to:

.test {
    align-items: center;
    cursor: pointer;
    display: flex;
}

Sadly, this does not apply to the styled-components CSS:

const StyledComponent = styled.div`
    display: flex;
    align-items: center;
    cursor: pointer;
`;

Is there a way to achieve the exact same behaviour for the CSS in JS part of the styled-components in WebStorm?

Solution

  • Not supported currently, see https://github.com/styled-components/webstorm-styled-components/issues/60. Related youtrack ticket: WEB-28540