stylint-order not working with CSS-in-JS

[taylon]

Hi, I'm not sure if it is a problem with postcss-jsx, stylelint itself or stylelint-order but I thought I would mention anyway and maybe we can at least get some idea about where the problem is coming from.

Example:

Using Stylelint out of the box (meaning postcss-jsx):

$ stylelint --print-config > https://pastebin.com/zJZfxK2W

import styled from 'styled-components';

const Component = styled.h2`
  margin: 0px;
  font-size: 14px;
`;

$ stylelint Component.tsx

Component.tsx
 35:12  ✖  Unexpected unit   length-zero-no-unit

Using Stylelint with stylelint-processor-styled-components (which is bad since no --fix):

stylelint --print-config > https://pastebin.com/0dzyRrDG (same thing, except that processor enabled)

import styled from 'styled-components';

const Component = styled.h2`
  margin: 0px;
  font-size: 14px;
`;

$ stylelint Component.tsx

Component.tsx
 34:12  ✖  Unexpected unit                                length-zero-no-unit
 35:3   ✖  Expected "font-weight" to come before          order/properties-order
           "margin"

[hudochenkov]

Sorry for a late response. I recently started using Styled Components myself. I'll try to add support for it.

[ianvieira]

@hudochenkov I saw you added the help wanted label. I can help you with it, as this is a blocker for one of my projects.

[hudochenkov]

@ianvieira It would be great! Thank you!

[hudochenkov]

Released in 2.1.0.