Syntax improvements about react-native-css HOT 5 CLOSED

Also I'm a bit confused how this is beneficial over:

module.exports = StyleSheet.create({
  description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: center,
    color: #656656,
  }
})

Seems to lose out on a bunch of important features like using variables for styles (eg, a colour variable) and integrating PixelRatio when that helps. Curious what your solution is for this.

from react-native-css.

@brentvatne
for the first question, that was just a typo. margin-bottom will be converted to marginBottom. Everything will be camelCased, I need to add validation for the CSS subset.

As for the second question, I am hoping of solving this by introducing SASS, that way we can have partials, nested css, mixins and variables. I mainly did this project for my basic styling needs. I will look into pixelRatio.

Benefits:

• writing styles in pure css
• separating styles from code
• improve style reusability

from react-native-css.

Isn't the reusability of those styles limited anyway since you're not using class or id prefixes? I assume those could be added in a pre-processor step, but somehow i doubt that you'd have the same classes on a website. (naming-wise).

The funny thing is that you're doing exactly the opposite of what react wants to promote (keeping styles in code) ;)

from react-native-css.

@johanneslumpe
https://github.com/iSimar/HackerNews-React-Native/blob/master/App/Views/Posts/Elements/PostCell/style.js

I agree but it might not be what everyone wants. Example above, where styling is outside of the react component.

from react-native-css.

@johanneslumpe agreed. I am using that approach. thanks for that example.

from react-native-css.