Add support for css prop

[njdancer]

Styled components now supports the css prop via a babel plugin. Currently these blocks are not detected by this processor preventing inline css from being linted. Would be great if these blocks could be forwarded to stylelint.

Couldn't find any other discussions for this and I'm not sure what else to provide. If someone could point me in the right direction I may be able to write a patch

[chinesedfan]

Styled components now supports the css prop via a babel plugin. Currently these blocks are not detected by this processor preventing inline css from being linted.

@njdancer Could you please explain a little more about it? Some codes are better. Sorry I didn't catch your idea.

[nhooyr]

https://medium.com/styled-components/announcing-native-support-for-the-css-prop-in-styled-components-245ca5252feb

[chinesedfan]

OK. So this feature should be being able to lint inline css props like following. I know our processor can not lint h1/div, but Button should have been detected. Right?

@njdancer @nhooyr The key point is how to extract css content. We can extend the logic in src/parsers/index.js. When visiting an AST node that is a css prop of a component, try to save its value into extractedCSS.

<h1 css="color: palevioletred;">
 The css prop
</h1>

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>

<Button
  primary
  css={css`
    color: ${props => props.theme.colors.text};
    background: ${props => props.theme.colors.primary};     
    border-radius: ${props => props.primary ? '4px' : '5px'};
  `}
>
  Click me
</Button>

[agnislav]

Hi guys,

It would be great to have this feature prioritized. Let me add one more use case here.

When using conditionals in SC, sometimes you need to change a couple of CSS properties based on a single condition. And instead of having a couple of single conditions, the following approach is much more convenient and readable:

const StyledCount = styled.div`
  ${({ isLarge }) =>
    isLarge
      ? css`
          height: 32px;
          font-size: 16px;
        `
      : css`
          height: 24px;
          font-size: 14px;
        `}
`

Currently, this level of properties isn't linted as well. I believe, this approach is widely used as well. So, +1 for this feature .