Conditional style is overwritten in loop when using cssNamespace

[tillkolter]

Hi,
I have a namespace #my-widget.

Components looks schematically like this

const PolarityCell = styled.td`
   color: ${({isNegative}) => isNegative ? 'red': 'green'};
`

<div id="my-widget">
    <table>
        {entries.map(({value, isNegative}) => (
            <tr>
                <td><PolarityCell isNegative={isNegative}>{value}</PolarityCell></td>
            </tr>
         )}
    </table>
</div>
}

When entries: [{value: '1', isNegative: false}, {value: '-2', isNegative: true}] all values are red

When entries: [{value: '-1', isNegative: true}, {value: '2', isNegative: false}] all values are green

[vadzappa]

Done a bit digging and found out, that with such cases, styled-components generate a.b while the plugin gives only a, as result the style loaded last is used. Seems like a bug :(
Some more detailed example:
when condition is met styled-components generate:

<div class="sc-iJuUWI jYeWx"></div>

when condition isn't met, styled-components generate:

<div class="sc-iJuUWI hFQvAs"></div>

while plugin generates the following css:

#my-widget .sc-iJuUWI {
// something when condition met
}
#my-widget .sc-iJuUWI {
// something when condition not met
}

whilst it should've generated smth like

#my-widget .sc-iJuUWI.jYeWx {
// something when condition met
}
#my-widget .sc-iJuUWI.hFQvAs {
// something when condition not met
}

[ajkl2533]

this is caused by an issue in styled-components styled-components/styled-components#3265

[vilanz]

From the styled-components issue:

• Wrapping the style rule with && solves it.

const PolarityCell = styled.td`
   && {
       color: ${({isNegative}) => isNegative ? 'red': 'green'};
   }
`

• Downgrading the styled-components package to before v5.2.0 also works.

[byzg]

I have same issue

[maghost]

I have same issue

Try to downgrade styled-components dependency to v5.1.0.