Nested `css` blocks inside of styled-components creates invalid code
glentakahashi opened this issue · 1 comments
glentakahashi commented
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};
`}
`;
glentakahashi commented
Nevermind duplicate of stylelint/stylelint#4119