Doesn't autofix for Styled Components

[caribou-code]

I have a custom order config on a project using Styled Components. A simple file example looks like this:

...

export const Wrapper = styled.div`
  ${typographyRegular}
  padding: ${back.padding} 0;
  background-color: ${back.backgroundColor};
  border-bottom: ${back.borderWidth} solid ${back.borderColor};
`;

export const ButtonStyled = styled.button`
  ${resetButton}
  ${transition('color')}
  display: flex;
  align-items: center;
  color: ${back.color};
  font-size: ${back.fontSize};

  ${hover(css`
    color: ${back.colorHover};
  `)}
`;

The linter correctly identifies that border-bottom should come before background-color in the Wrapper component. But when I run the lint command with --fix flag, the result is this:

...

export const Wrapper = styled.div`
  ${typographyRegular}
  padding: ${back.padding} 0;
  background-color: ${back.backgroundColor};
  border-bottom: ${back.borderWidth} solid ${back.borderColor};
`;

export const ButtonStyled = styled.button`
  ${resetButton}
  ${transition('color')}
  display: flex;
  align-items: center;
  color: ${back.color};
  font-size: ${back.fontSize};

  ${hover(css`
    color: ${back.colorHover};
  `)}

    color: ${back.colorHover};
  `)}
`;

So basically, it hasn't fixed the actual problem in Wrapper but has broken ButtonStyled, overall making the code invalid.

[hudochenkov]

You're experience two things actually:

1. Reordering won't happen if styled component has interpolation. It's unsafe, because it might change the logic of a component. This is why you don't see properties reordered. It is safe just check the order, so this is why you see warning.
2. Broken output it's a problem with stylelint itself Fix autofix for nested tagged template literals stylelint/stylelint#4119.

I'm closing this, because there isn't anything we can do in stylelint-order for this issues.