typescript-plugin-styled-components
typescript-plugin-styled-components copied to clipboard
Breaks layout when using nested selectors from styled-components
Styles stop working when inside styled you try to style a nested element Style border-top for InnerContainer not working
const InnerContainer = styled.div'
align-items: center;
display: flex;
justify-content: space-between;
padding: 16px 0;
';
const Container = styled.div'
padding: 0 24px;
& + & {
${InnerContainer} {
border-top: 1px solid ${theme.palette.bg.level3};
}
}
';
Expected: Style border-top for InnerContainer working.
@Artem29383 I could not reproduce the issue. You might have some custom settings for the display name that takes into account the filename and doesn't translate it correctly.
Please share your settings for the transformer if you need an assistance.