react-native-yaml-styles

Stylesheets in YAML for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeYamlStyles from 'https://cdn.skypack.dev/react-native-yaml-styles';
</script>

README

react-native-yaml-styles

If you prefer YAML over JSON/JavaScript styles in your React Native projects

Installation

$ npm install react-native-yaml-styles --save

Usage

var styles = YAMLStyleSheet.create(`
  welcome:
    font-size: 20
`);

But... why?

I was talking with @pichfl about how much better YAML is than JSON over an .eslintrc file at a Web & Wine meetup. I made a snarky remark about maybe using YAML for styles instead of CSS or other options and well... here we are.

But... seriously... why?

  • React components are getting bigger and bigger, we want everything to be concise but only split it up if necessarily needed. So with a YAML-based stylesheet, we're getting rid of all the pesky braces we're saving about 30% of lines in total
  • Every JSON can be described as YAML
  • It's super-similar to SASS actually
  • It's a bit of a middle ground between completely using a CSS preprocessor and having JSON-flavored styles right beside your component

Code style

AirBnB ES5

License

MIT