Stylesheet specificity and pseudoclasses

[Richard Boenigk]

It looks like this fix for class specificity:
#37
might need to expand to also handle pseudoclasses and media queries.

If you have a situation like this:

red: {
    backgroundColor: 'red',
    ':first-child': {
        backgroundColor: 'green'
    }
},
blue: {
    backgroundColor: 'blue',
}

<View style={[styles.blue, styles.red]}></View>

It looks like it ends up generating classes that look like this:

.foo1, .foo3.foo3{
    backgroundColor: red;
}
.foo4:first-child{
    background-color: green;
}
.foo2{
    backgroundColor: blue;
}

And so the element styled with foo3 will still be red even if it's the first child due to specificity.

Maybe the solution would be to also include .foo3:first-child in the pseudoclass rule:

.foo1, .foo3.foo3{
    backgroundColor: red;
}
.foo4:first-child.foo4:first-child {
    background-color: green;
}

But I haven't completely thought it through and it has the feeling of getting sucked into a specificity war. Would be curious to hear anyone else's thoughts!

[Richard Boenigk]

False alarm, looks like this isn't a behavior is v4+, I was using 3.4 from the react-sketchapp examples.
From what I can tell, 4+ uses a class per css property rather than using specificity rules. Nice!

But also looks like it might be currently creating some invalid classes like:

rn-:hover-1bx8i3i
rn-@media (min-width: 600px)-w1q6n2

I'll close this issue and investigate a bit more.