Fallback values about aphrodite HOT 5 CLOSED

Bunch of discussion about this problem in React proper here: facebook/react#6701.

from aphrodite.

Yeah, I don't think that you're doing anything wrong. I guess that aphrodite doesn't support this use case. I like the solution with an array of styles personally. Thoughts from others who actually can commit to this repo? :-)

from aphrodite.

Hi @einarlove, thanks for the report! There is indeed no way to get these semantics in Aphrodite.

The array proposal seems reasonable to me, but am unsure of the desired behavior in the case of overrides.

In CSS, if you have the following:

.a {
  color: #435;
  color: hsl(40, 50%, 50%);
}

#b {
  color: hsl(20, 30%, 50%);
}

Then does the fallback of #435 still apply when you have <div class="a" id="b">?

If it does, replicating that functionality on Aphrodite is going to be super awkward, because the semantics of the following would be unclear to me:

const styles = StyleSheet.create({
   a: { color: ['#435', 'hsl(40, 50%, 50%)'] },
   b: { color: 'hsl(20, 30%, 50%)' }
});

<div className={css(styles.a, styles.b)}>

Right now, for merging values we do a deep merge, so the result would be { color: 'hsl(20, 30%, 50%)' }, and you'd lose the fallback in the case of an override. If that's acceptable, then this diff shouldn't be too crazy.

from aphrodite.

I'm not familiar with the implementation of aphrodite, so the merge came as a surprise.

If it's not possible / hard to refactor the current implementation, would it be possible to start with the above example and give notice in the docs of the gotcha?

Right now we have no way to give a fallback.

from aphrodite.

Have there been any updates on this topic since last year?

from aphrodite.