Support textDecorationLine

[jacobp100]

RN supports the values 'none', 'underline', 'line-through', and 'underline line-through'. This means the order is important for RN but not for CSS. We should support putting these the other way round.

[kristerkari]

I had a look at the code, would something like this be enough?

function compare(a, b) {
  if (a === 'line-through' && b === 'underline') {
    return 1
  }
  return 0
}

line
  .split(' ')
  .sort(compare)
  .join(' ')

[jacobp100]

That would definitely work for strings.

Currently all complex transforms go through css-value-parser and then TokenStream. But there will be cases like this when it’d be more efficient to skip that and just do string manipulation.

What would the implementation to avoid the parsing the value look like?

[kristerkari]

What I meant was as a quick fix to use that code here to reorder the values inside the parsed string:
https://github.com/styled-components/css-to-react-native/blob/master/src/transforms/textDecoration.js#L51

[kristerkari]

Of course for just supporting textDecorationLine property there could be a simpler parsing than what textDecoration.js uses.

[jacobp100]

Oh I see what you mean! Good catch!

[kristerkari]

Yeah, sorry for being unclear. I was just wondering if that is simple enough fix for the current textDecoration transform.

When it comes to supporting textDecorationLine property, would it be performant enough to do some regex validation and then just do the same reordering trick?