Styled JSX not supporting JS variables inside a loop

[wagnerjsilva]

Hello,

I've noticed a fairly big issue when using javascript variables with styled jsx when in a loop. It basically breaks the rendering of :after :before tags, such as icons.

Here is the example component:

import { CDN_AMP } from '../constants/general';
import { colorWhite, colorDrewcherry, colorDarkGrey } from '../../common-react-components/components/shared/colors';

const Accordion = (props) => {
    const content = props.content.map((item, index) => {
        return (
            <>
                <div className="AccordionItem" key={index}>
                    <input type="checkbox" className="toggleArticle" />
                    <div className="RedLine" />
                    <h3 className="AccordionTitle">{item.title}</h3>
                    <article dangerouslySetInnerHTML={{ __html: item.body }} />
                </div>
                <style jsx>{`
                    .AccordionItem {
                        box-shadow: 0.1rem 0.1rem 0.6rem 0 rgba(0, 0, 0, 0.18);
                        padding: 1.6rem 2rem;
                        margin-bottom: 1rem;
                        background: ${colorWhite};
                        position: relative;
                        cursor: pointer;
                    }
                    .RedLine {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 0.2rem;
                        background: ${colorDrewcherry};
                        transition: opacity 0.3s;
                        opacity: 0;
                        border: 0;
                    }
                    .AccordionTitle {
                        font-weight: 600;
                        display: block;
                        position: relative;
                        padding-right: 3rem;
                        padding-bottom: 0;
                        font-size: 1.5rem;
                        margin-top: 0;
                        background: none;
                        color: ${colorDarkGrey};
                        transition: margin-bottom 0.5s;
                        font-family: Poppins, Helvetica, Arial;
                    }
                    .AccordionTitle:after {
                        content: '\E91F';
                        font-family: drewberry;
                        font-size: 1.2rem;
                        position: absolute;
                        top: 50%;
                        margin-top: -1rem;
                        right: 0;
                        transition: transform 0.5s;
                        color: ${colorDarkGrey};
                    }
                    article {
                        height: 0;
                        overflow: hidden;
                    }
                    .toggleArticle {
                        position: absolute;
                        z-index: 1;
                        top: 0;
                        height: 100%;
                        width: 100%;
                        opacity: 0;
                        left: 0;
                        max-height: 8rem;
                    }
                    .toggleArticle:checked ~ article {
                        height: 100%;
                    }
                    .toggleArticle:checked ~ .AccordionTitle {
                        margin-bottom: 2rem;
                    }
                    .toggleArticle:checked ~ .AccordionTitle:after {
                        transform: rotate(180deg);
                        color: ${colorDrewcherry};
                    }

                    .toggleArticle:checked ~ .RedLine {
                        opacity: 1;
                    }
                `}</style>
            </>
        );
    });

    return (
        <>
            <amp-img
                alt="Curved wave background"
                src={`${CDN_AMP}/static/top-curve.svg`}
                width="1800"
                height="128"
                layout="responsive"
                className="Waves"
            ></amp-img>
            <div className="AccordionContainer">
                <div className="container">
                    <div className="cms-content">
                        <h2>{props.title}</h2>
                        {content}
                    </div>
                </div>
            </div>
            <style jsx>{`
                .AccordionContainer {
                    background: #f4f4f4;
                    padding: 3rem 0;
                    position: relative;
                }
                .Waves {
                    position: relative;
                    top: 0.3rem;
                }
            `}</style>
        </>
    );
};

export default Accordion;

The result are broken before tags:

Simply removing the JS style variables causes everything to work just fine.

Am I not using it correctly?

[giuseppeg]

This might be related to https://github.com/zeit/styled-jsx/issues/589