styled-components/stylelint-processor-styled-components

Nested `css` blocks inside of styled-components creates invalid code

glentakahashi opened this issue · 1 comments

Environment

"stylelint": "^13.0.0",
"stylelint-config-standard": "^19.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-order": "^4.0.0",

Reproduction

const MyDiv = styled.div<{ color: string }>`
  height: 20px;
  ${({ color }) =>
    css`
      background-color: ${color};
    `}
`;

Steps to reproduce

Expected Behavior

const MyDiv = styled.div<{ color: string }>`
  height: 20px;
  ${({ color }) =>
    css`
      background-color: ${color};
    `}
`;

Actual Behavior

const MyDiv = styled.div<{ color: string }>`
  height: 20px;
  ${({ color }) =>
    css`
      background-color: ${color};
    `}

      background-color: ${color};
    `}
`;

Nevermind duplicate of stylelint/stylelint#4119