[change] support CSS custom properties

Update 'setValueForStyles' and style validation to support defining and
using custom properties.

Fix #516

docs/storybook/1-components/View/ViewScreen.js

@@ -14,6 +14,7 @@ import UIExplorer, {
   Code,
   Description,
   DocItem,
+  ExternalLink,
   Section,
   StyleList
 } from '../../ui-explorer';
@@ -291,6 +292,12 @@ const ViewScreen = () =>
   </UIExplorer>;
 
 const stylePropTypes = [
+  {
+    label: 'web',
+    name: (
+      <ExternalLink href="https://drafts.csswg.org/css-variables/">Custom properties</ExternalLink>
+    )
+  },
   {
     name: 'alignContent',
     typeInfo: 'string'

docs/storybook/ui-explorer/ExternalLink.js

@@ -0,0 +1,12 @@
+/* eslint-disable react/prop-types */
+
+/**
+ * @flow
+ */
+
+import AppText from './AppText';
+import React from 'react';
+
+const ExternalLink = props => <AppText {...props} accessibilityRole="link" target="_blank" />;
+
+export default ExternalLink;

docs/storybook/ui-explorer/StyleList.js

@@ -16,10 +16,12 @@ const StyleList = ({ stylePropTypes }) =>
         <Text style={styles.name}>
           {name}
         </Text>
-        {': '}
-        <Text style={styles.code}>
-          {typeInfo}
-        </Text>
+        {typeInfo ? ': ' : null}
+        {typeInfo
+          ? <Text style={styles.code}>
+              {typeInfo}
+            </Text>
+          : null}
       </AppText>
     )}
   </View>;

docs/storybook/ui-explorer/UIExplorer.js

@@ -5,6 +5,7 @@
  */
 
 import AppText from './AppText';
+import ExternalLink from './ExternalLink';
 import insertBetween from './insertBetween';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
@@ -22,14 +23,12 @@ export const Description = ({ children }) =>
 const Divider = () => <View style={styles.divider} />;
 
 const SourceLink = ({ uri }) =>
-  <AppText
-    accessibilityRole="link"
+  <ExternalLink
     href={`https://github.com/necolas/react-native-web/tree/master/docs/storybook/${uri}`}
     style={styles.link}
-    target="_blank"
   >
     View source code on GitHub
-  </AppText>;
+  </ExternalLink>;
 
 const UIExplorer = ({ children, description, sections, title, url }) =>
   <View style={styles.root}>

docs/storybook/ui-explorer/index.js

@@ -5,10 +5,11 @@
 import AppText from './AppText';
 import Code from './Code';
 import DocItem from './DocItem';
+import ExternalLink from './ExternalLink';
 import Section from './Section';
 import StyleList from './StyleList';
 import TextList from './TextList';
 import UIExplorer, { Description } from './UIExplorer';
 
 export default UIExplorer;
-export { AppText, Code, Description, DocItem, Section, StyleList, TextList };
+export { AppText, Code, Description, DocItem, ExternalLink, Section, StyleList, TextList };