Bug: Pseudo rules (:after) are incorrectly combined at runtime

[Soreine]

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.

[lencioni]

I think I have a fix this in #216. Here's the test I added: https://github.com/Khan/aphrodite/pull/216/files#r107288862

Can you confirm whether this resolves the issue for you?

[Soreine]

Yes, that's exactly what happens, greenSquare's definition is mutated.
Thanks for your awesome looking PR :)

[lazopm]

@lencioni @xymostech Any updates on this?
This bug is pretty major, we've ran into it several times.

[xymostech]

@lazopm Sorry, I know this is a bug but have been very busy. I'll hopefully get to reviewing and landing @lencioni's changes this week and making a new release.

[elischutze]

Looking forward to it!

[alexcoady]

@xymostech Do you have any idea when this might be released? Our large project has a number of bugs as a result of this issue and we're weighing up whether to roll-back, patch all the issues or wait until a new release is available, it'd be good to have an ETA to help our decision-making! Thank you.

[lencioni]

I just merged #233. This should be fixed in the next release.

[lencioni]

I just published v1.2.1. Give it a shot!

[Soreine]

Working great ! You rock