search

thabti / react-native-css

Style React-Native components with css
MIT License
769 stars 66 forks source link

Add border shorthand support #41

Closed jpomazal closed 8 years ago

jpomazal commented 8 years ago

I've added support for converting border:1px [solid|dashed|dotted] #CCC; into the proper {borderWidth:1 [,borderStyle:'dashed'], borderColor:'#CCC} expansion. The expansion also works on directional shorthands border-right, etc. with the exception of {border[direction]Style} which isn't supported by React Native.

I designed the code for future expansion here where any arbitrary property can be converted in a non-standard way to the desired style expansion, either via regex mapping or a custom function. I don't know of any immediate use cases for this, however it could be used for any property that does not have a 1-1 mapping. I could see RN-only shorthands being useful in some cases, however that would be a future discussion as it breaks some paradigms.

Additionally, single value shorthands will no longer expand, e.g. padding:10px will convert to {padding:10}. Expansion in this case just needlessly increases the resulting file size and data required to go over the bridge (I assume, however I haven't looked at the internals to see on which side RN expands to convert it to native insets).

thabti commented 8 years ago

Hi @jpomazal thank you for this PR and amazing work.

thabti commented 8 years ago

@jpomazal I invited you to collaborate on the project.