threepointone

import { View, Text } from 'react-native'
import { css } from 'glamor-native'

export App = () => {
   <View style={css({ color: 'red' })}>
     <Text>Hello world!</Text>
   </View>
}

threepointone

let rule = css({
  '& .Resizer': {
    // ...
  },
  '& .SplitPane': {
    // ...
  }
  '& .Pane': {
    // ...
  }

threepointone

<div className={'blue '+ css({ '&&': { color: 'red'}})}>
  '&&' boosts specificity. add as many '&&&'s as you want
</div>,

<div className={css({ '& #meEle': { color: 'red' }})}>
    <div id='myEle'>
       targeting by id
     </div>
</div>
      

threepointone

import React from 'react'
import { render } from 'react-dom'

// with fiber, we'll be able to write components that update text deep 
// inside another string without wrapper dom, or rerendering the whole component 

// before
class Lorem extends React.Component {
  state = {
    str: ''

threepointone

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

threepointone

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/8.1.0/bin/node',
1 verbose cli   '/usr/local/bin/npmc',
1 verbose cli   'install',
1 verbose cli   '-g',
1 verbose cli   'git://github.com/reasonml/reason-cli.git#beta-v-1.13.5' ]
2 info using [email protected]
3 info using [email protected]
4 notice CANARY npmc is experimental software. If you find an issue, please file it in the main npm repository, and call out that you were using npmc.
5 verbose npm-session 68f8ecdcf533092a

threepointone

Configuring for host x86_64-apple-darwin16.6.0 ...
Configuring for target x86_64-apple-darwin16.6.0 ...
Using compiler gcc.
The C compiler is ANSI-compliant.
Checking the sizes of integers and pointers...
Wow! A 64 bit architecture!
This is a little-endian architecture.
Doubles can be word-aligned.
64-bit integers can be word-aligned.
Native division and modulus have round-towards-zero semantics, will use them.

threepointone

Something about css-in-js libs I noticed, but no one really talks about. There exists an implicit idea of a grouped-ruleset, ie - a set of rulesets that apply either directly to an element, or are meant to be composed with other rulesets. an example with 2 libs -

// glamor

const button = css({
 color: 'red',

threepointone

/* @flow */
import React from 'react';
import { Motion, spring } from 'react-motion';
import {
  AppRegistry,
  Box,
  View,
  PointLight,
} from 'react-vr';

threepointone

// rn.js
import {createElement} from 'react'
import {View, Text, Image} from 'react-native'

const map = { view: View, text: Text, image: Image }

export default function rn(type, props, ...children){
  return createElement(map[type] || type, props, ...children)
}