I think I have found a bug with how :after rules are combined. When we combine two styles declaring an :after rule, the subsequent call to css() will merge the styles incorrectly.
Minimal example:
const styleSheet = StyleSheet.create({
greenSquare: {
':after': {
display: 'block',
content: '""',
backgroundColor: '#3a3',
width: 10,
height: 10
}
},
top: {
':after': {
borderTop: '3px solid red'
}
},
bottom: {
':after': {
borderBottom: '3px solid red'
}
}
});
const Test = React.createClass({
render() {
return (
<div>
<div className={css(styleSheet.greenSquare, styleSheet.top)}>Top</div>
<div className={css(styleSheet.greenSquare, styleSheet.bottom)}>Bottom</div>
</div>
);
}
});Renders:
As you can see, the second call css(styleSheet.greenSquare, styleSheet.bottom) incorrectly applies the style from stylesheet.top from the previous call.
I think I have found a bug with how
:afterrules are combined. When we combine two styles declaring an:afterrule, the subsequent call tocss()will merge the styles incorrectly.Minimal example:
Renders:
As you can see, the second call
css(styleSheet.greenSquare, styleSheet.bottom)incorrectly applies the style fromstylesheet.topfrom the previous call.