search

Igorbek / typescript-plugin-styled-components

TypeScript transformer for improving the debugging experience of styled-components
419 stars 33 forks source link

Breaks layout when using nested selectors from styled-components #644

Open Artem29383 opened 2 years ago

Artem29383 commented 2 years ago

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};
        }
    }
';
image image

Expected: Style border-top for InnerContainer working.

Igorbek commented 1 year ago

@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.