Simplify organization of react-native-web-style

src/index.js

@@ -1,15 +1,20 @@
-import { getOtherProps, omitProps, pickProps } from './modules/filterObjectProps';
+import React from 'react';
+
+import { omitProps, pickProps } from './modules/filterObjectProps';
 import Image from './modules/Image';
 import Text from './modules/Text';
 import TextInput from './modules/TextInput';
 import View from './modules/View';
-import { stylingStrategy } from './modules/react-web-style';
+import { restyle } from './modules/react-native-web-style';
 
-export default {
-  getOtherProps,
+export default React;
+
+export {
+  // helpers
   omitProps,
   pickProps,
-  stylingStrategy,
+  restyle,
+  // components
   Image,
   Text,
   TextInput,

src/modules/Image/ImageStylePropTypes.js

@@ -1,4 +1,4 @@
-import { StylePropTypes } from '../react-web-style';
+import { StylePropTypes } from '../react-native-web-style';
 import { PropTypes } from 'react';
 
 export default {

src/modules/Image/index.js

@@ -1,5 +1,5 @@
 import { pickProps } from '../filterObjectProps';
-import { WebStyleComponent } from '../react-web-style';
+import { WebStyleComponent } from '../react-native-web-style';
 import ImageStylePropTypes, { ImageDefaultStyles } from './ImageStylePropTypes';
 import React, { PropTypes } from 'react';
 
@@ -28,7 +28,7 @@ class Image extends React.Component {
       <WebStyleComponent
         {...other}
         alt={alt}
-        className={`sdk-Image ${className}`}
+        className={`Image ${className}`}
         component='img'
         style={mergedStyle}
       />

src/modules/Text/TextStylePropTypes.js

@@ -1,4 +1,4 @@
-import { StylePropTypes } from '../react-web-style';
+import { StylePropTypes } from '../react-native-web-style';
 import { ViewStylePropTypes } from '../View/ViewStylePropTypes';
 
 export default {

src/modules/Text/index.js

@@ -1,5 +1,5 @@
 import { pickProps } from '../filterObjectProps';
-import { WebStyleComponent } from '../react-web-style';
+import { WebStyleComponent } from '../react-native-web-style';
 import React, { PropTypes } from 'react';
 import TextStylePropTypes, { TextDefaultStyle } from './TextStylePropTypes';
 
@@ -27,7 +27,7 @@ class Text extends React.Component {
     return (
       <WebStyleComponent
         {...other}
-        className={`sdk-Text ${className}`}
+        className={`Text ${className}`}
         style={mergedStyle}
       />
     );

src/modules/TextInput/TextInputStylePropTypes.js

@@ -1,5 +1,5 @@
 import { PropTypes } from 'react';
-import { StylePropTypes } from '../react-web-style';
+import { StylePropTypes } from '../react-native-web-style';
 import ViewStylePropTypes from '../View/ViewStylePropTypes';
 
 export default {

src/modules/TextInput/index.js

@@ -1,5 +1,5 @@
 import { pickProps } from '../filterObjectProps';
-import { WebStyleComponent } from '../react-web-style';
+import { WebStyleComponent } from '../react-native-web-style';
 import React, { PropTypes } from 'react';
 import TextInputStylePropTypes, { TextInputDefaultStyles } from './TextInputStylePropTypes';
 
@@ -25,7 +25,7 @@ class TextInput extends React.Component {
     return (
       <WebStyleComponent
         {...other}
-        className={`sdk-TextInput ${className}`}
+        className={`TextInput ${className}`}
         component={multiline ? 'textarea' : 'input'}
         disabled={!editable}
         placeholder={placeholder}

src/modules/View/ViewStylePropTypes.js

@@ -1,5 +1,5 @@
 import { PropTypes } from 'react';
-import { StylePropTypes } from '../react-web-style';
+import { StylePropTypes } from '../react-native-web-style';
 
 export default {
   ...StylePropTypes.BackgroundPropTypes,

src/modules/View/index.js

@@ -1,5 +1,5 @@
 import { pickProps } from '../filterObjectProps';
-import { WebStyleComponent } from '../react-web-style';
+import { WebStyleComponent } from '../react-native-web-style';
 import React, { PropTypes } from 'react';
 import ViewStylePropTypes, { ViewDefaultStyle } from './ViewStylePropTypes';
 
@@ -38,7 +38,7 @@ class View extends React.Component {
     return (
       <WebStyleComponent
         {...other}
-        className={`sdk-View ${className}`}
+        className={`View ${className}`}
         style={mergedStyle}
       />
     );

src/modules/filterObjectProps/index.js

@@ -20,12 +20,6 @@ function filterProps(obj, props, excluded=false) {
   return filtered;
 }
 
-// Extract all props that are not part of the React Component's 'propTypes'
-export function getOtherProps(componentInstance) {
-  const excludedProps = Object.keys(componentInstance.constructor.propTypes);
-  return omitProps(componentInstance.props, excludedProps);
-}
-
 export function pickProps(obj, props) {
   return filterProps(obj, props);
 }

src/modules/react-native-web-style/index.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
-import StylePropTypes from './StylePropTypes';
-import stylingStrategy from './strategy';
+import restyle from './modules/restyle';
+import StylePropTypes from './modules/StylePropTypes';
 
 class WebStyleComponent extends React.Component {
   static propTypes = {
@@ -14,7 +14,7 @@ class WebStyleComponent extends React.Component {
 
   static defaultProps = {
     className: '',
-    element: 'div'
+    component: 'div'
   }
 
   render() {
@@ -23,10 +23,10 @@ class WebStyleComponent extends React.Component {
     return (
       <Component
         {...other}
-        {...stylingStrategy(this.props)}
+        {...restyle(this.props)}
       />
     );
   }
 }
 
-export { StylePropTypes, stylingStrategy, WebStyleComponent };
+export { StylePropTypes, restyle, WebStyleComponent };

src/modules/react-native-web-style/modules/restyle.js

@@ -0,0 +1,40 @@
+import autoprefix from './autoprefix';
+import styles from './styles.css';
+
+/**
+ * Get the HTML class that corresponds to a style declaration
+ * @param prop {string} prop name
+ * @param style {Object} style
+ * @return {string} class name
+ */
+function getSinglePurposeClassName(prop, style) {
+  const className = `${prop}-${style[prop]}`;
+  if (style.hasOwnProperty(prop) && styles[className]) {
+    return styles[className];
+  }
+}
+
+/**
+ * Replace inline styles with single purpose classes where possible
+ * @param props {Object} React Element properties
+ * @return {Object}
+ */
+export default function stylingStrategy(props) {
+  let className;
+  let style = {};
+
+  const classList = [ props.className ];
+  for (let prop in props.style) {
+    let styleClass = getSinglePurposeClassName(prop, props.style);
+    if (styleClass) {
+      classList.push(styleClass);
+    } else {
+      style[prop] = props.style[prop];
+    }
+  }
+
+  className = classList.join(' ');
+  style = autoprefix(style);
+
+  return { className: className, style };
+}

src/modules/react-native-web-style/modules/styles.css

@@ -0,0 +1,680 @@
+/* align-content */
+
+.alignContent-center { align-content: center; }
+.alignContent-flex-end { align-content: flex-end; }
+.alignContent-flex-start { align-content: flex-start; }
+.alignContent-stretch { align-content: stretch; }
+.alignContent-space-around { align-content: space-around; }
+.alignContent-space-between { align-content: space-between; }
+
+/* align-items */
+
+.alignItems-center { align-items: center; }
+.alignItems-flex-end { align-items: flex-end; }
+.alignItems-flex-start { align-items: flex-start; }
+.alignItems-stretch { align-items: stretch; }
+.alignItems-space-around { align-items: space-around; }
+.alignItems-space-between { align-items: space-between; }
+
+/* align-self */
+
+.alignSelf-auto { align-self: auto; }
+.alignSelf-baseline { align-self: baseline; }
+.alignSelf-center { align-self: center; }
+.alignSelf-flex-end { align-self: flex-end; }
+.alignSelf-flex-start { align-self: flex-start; }
+.alignSelf-stretch { align-self: stretch; }
+
+/* appearance */
+
+.appearance-none { appearance: none; }
+
+/* background-attachment */
+
+.backgroundAttachment-fixed { background-attachment: fixed; }
+.backgroundAttachment-inherit { background-attachment: inherit; }
+.backgroundAttachment-local { background-attachment: local; }
+.backgroundAttachment-scroll { background-attachment: scroll; }
+
+/* background-clip */
+
+.backgroundClip-border-box { background-clip: border-box; }
+.backgroundClip-content-box { background-clip: content-box; }
+.backgroundClip-inherit { background-clip: inherit; }
+.backgroundClip-padding-box { background-clip: padding-box; }
+
+/* background-color */
+
+.backgroundColor-\#000,
+.backgroundColor-black { background-color: black; }
+.backgroundColor-\#fff,
+.backgroundColor-white { background-color: white; }
+.backgroundColor-currentcolor,
+.backgroundColor-currentColor { background-color: currentcolor; }
+.backgroundColor-inherit { background-color: inherit; }
+.backgroundColor-transparent { background-color: transparent; }
+
+/* background-image */
+
+.backgroundImage { background-image: none; }
+
+/* background-origin */
+
+.backgroundOrigin-border-box { background-clip: border-box; }
+.backgroundOrigin-content-box { background-clip: content-box; }
+.backgroundOrigin-inherit { background-clip: inherit; }
+.backgroundOrigin-padding-box { background-clip: padding-box; }
+
+/* background-position */
+
+.backgroundPosition-bottom { background-position: bottom; }
+.backgroundPosition-center { background-position: center; }
+.backgroundPosition-left { background-position: left; }
+.backgroundPosition-right { background-position: right; }
+.backgroundPosition-top { background-position: top; }
+
+/* background-repeat */
+
+.backgroundRepeat-inherit { background-repeat: inherit; }
+.backgroundRepeat-no-repeat { background-repeat: no-repeat; }
+.backgroundRepeat-repeat { background-repeat: repeat; }
+.backgroundRepeat-repeat-x { background-repeat: repeat-x; }
+.backgroundRepeat-repeat-y { background-repeat: repeat-y; }
+.backgroundRepeat-round { background-repeat: round; }
+.backgroundRepeat-space { background-repeat: space; }
+
+/* background-size */
+
+.backgroundSize-auto { background-size: auto; }
+.backgroundSize-contain { background-size: contain; }
+.backgroundSize-cover { background-size: cover; }
+.backgroundSize-inherit { background-size: inherit; }
+
+/* border-color */
+
+.borderColor-\#fff,
+.borderColor-white { border-color: white; }
+.borderColor-currentcolor { border-color: currentcolor; }
+.borderColor-inherit { border-color: inherit; }
+.borderColor-transparent { border-color: transparent; }
+
+/* border-bottom-color */
+
+.borderBottomColor-\#fff,
+.borderBottomColor-white { border-bottom-color: white; }
+.borderBottomColor-currentcolor { border-bottom-color: currentcolor; }
+.borderBottomColor-inherit { border-bottom-color: inherit; }
+.borderBottomColor-transparent { border-bottom-color: transparent; }
+
+/* border-left-color */
+
+.borderLeftColor-\#fff,
+.borderLeftColor-white { border-left-color: white; }
+.borderLeftColor-currentcolor { border-left-color: currentcolor; }
+.borderLeftColor-inherit { border-left-color: inherit; }
+.borderLeftColor-transparent { border-left-color: transparent; }
+
+/* border-right-color */
+
+.borderRightColor-\#fff,
+.borderRightColor-white { border-right-color: white; }
+.borderRightColor-currentcolor { border-right-color: currentcolor; }
+.borderRightColor-inherit { border-right-color: inherit; }
+.borderRightColor-transparent { border-right-color: transparent; }
+
+/* border-top-color */
+
+.borderTopColor-\#fff,
+.borderTopColor-white { border-top-color: white; }
+.borderTopColor-currentcolor { border-top-color: currentcolor; }
+.borderTopColor-inherit { border-top-color: inherit; }
+.borderTopColor-transparent { border-top-color: transparent; }
+
+/* border-style */
+
+.borderStyle-dashed { border-style: dashed; }
+.borderStyle-dotted { border-style: dotted; }
+.borderStyle-inherit { border-style: inherit; }
+.borderStyle-none { border-style: none; }
+.borderStyle-solid { border-style: solid; }
+
+/* border-bottom-style */
+
+.borderBottomStyle-dashed { border-bottom-style: dashed; }
+.borderBottomStyle-dotted { border-bottom-style: dotted; }
+.borderBottomStyle-inherit { border-bottom-style: inherit; }
+.borderBottomStyle-none { border-bottom-style: none; }
+.borderBottomStyle-solid { border-bottom-style: solid; }
+
+/* border-left-style */
+
+.borderLeftStyle-dashed { border-left-style: dashed; }
+.borderLeftStyle-dotted { border-left-style: dotted; }
+.borderLeftStyle-inherit { border-left-style: inherit; }
+.borderLeftStyle-none { border-left-style: none; }
+.borderLeftStyle-solid { border-left-style: solid; }
+
+/* border-right-style */
+
+.borderRightStyle-dashed { border-right-style: dashed; }
+.borderRightStyle-dotted { border-right-style: dotted; }
+.borderRightStyle-inherit { border-right-style: inherit; }
+.borderRightStyle-none { border-right-style: none; }
+.borderRightStyle-solid { border-right-style: solid; }
+
+/* border-top-style */
+
+.borderTopStyle-dashed { border-top-style: dashed; }
+.borderTopStyle-dotted { border-top-style: dotted; }
+.borderTopStyle-inherit { border-top-style: inherit; }
+.borderTopStyle-none { border-top-style: none; }
+.borderTopStyle-solid { border-top-style: solid; }
+
+/* border-width */
+
+.borderWidth-0 { border-width: 0; }
+.borderWidth-1px { border-width: 1px; }
+.borderWidth-2px { border-width: 2px; }
+.borderWidth-3px { border-width: 3px; }
+.borderWidth-4px { border-width: 4px; }
+.borderWidth-5px { border-width: 5px; }
+
+/* border-bottom-width */
+
+.borderBottomWidth-0 { border-bottom-width: 0; }
+.borderBottomWidth-1px { border-bottom-width: 1px; }
+.borderBottomWidth-2px { border-bottom-width: 2px; }
+.borderBottomWidth-3px { border-bottom-width: 3px; }
+.borderBottomWidth-4px { border-bottom-width: 4px; }
+.borderBottomWidth-5px { border-bottom-width: 5px; }
+
+/* border-left-width */
+
+.borderLeftWidth-0 { border-left-width: 0; }
+.borderLeftWidth-1px { border-left-width: 1px; }
+.borderLeftWidth-2px { border-left-width: 2px; }
+.borderLeftWidth-3px { border-left-width: 3px; }
+.borderLeftWidth-4px { border-left-width: 4px; }
+.borderLeftWidth-5px { border-left-width: 5px; }
+
+/* border-right-width */
+
+.borderRightWidth-0 { border-right-width: 0; }
+.borderRightWidth-1px { border-right-width: 1px; }
+.borderRightWidth-2px { border-right-width: 2px; }
+.borderRightWidth-3px { border-right-width: 3px; }
+.borderRightWidth-4px { border-right-width: 4px; }
+.borderRightWidth-5px { border-right-width: 5px; }
+
+/* border-top-width */
+
+.borderTopWidth-0 { border-top-width: 0; }
+.borderTopWidth-1px { border-top-width: 1px; }
+.borderTopWidth-2px { border-top-width: 2px; }
+.borderTopWidth-3px { border-top-width: 3px; }
+.borderTopWidth-4px { border-top-width: 4px; }
+.borderTopWidth-5px { border-top-width: 5px; }
+
+/* bottom */
+
+.bottom-0 { bottom: 0; }
+.bottom-50% { bottom: 50%; }
+.bottom-100% { bottom: 100%; }
+
+/* box-sizing */
+
+.boxSizing-border-box { box-sizing: border-box; }
+.boxSizing-content-box { box-sizing: content-box; }
+.boxSizing-inherit { box-sizing: inherit; }
+.boxSizing-padding-box { box-sizing: padding-box; }
+
+/* clear */
+
+.clear-both { clear: both; }
+.clear-inherit { clear: inherit; }
+.clear-left { clear: left; }
+.clear-none { clear: none; }
+.clear-right { clear: right; }
+
+/* color */
+
+.color-#000,
+.color-black { color: black; }
+.color-\#fff,
+.color-white { color: white; }
+.color-inherit { color: inherit; }
+.color-transparent { color: transparent; }
+
+/* direction */
+
+.direction-inherit { direction: inherit; }
+.direction-ltr { direction: ltr; }
+.direction-rtl { direction: rtl; }
+
+/* display */
+
+.display-block { display: block; }
+.display-contents { display: contents; }
+.display-flex { display: flex; }
+.display-grid { display: grid; }
+.display-inherit { display: inherit; }
+.display-initial { display: initial; }
+.display-inline { display: inline; }
+.display-inline-block { display: inline-block; }
+.display-inline-flex { display: inline-flex; }
+.display-inline-grid { display: inline-grid; }
+.display-inline-table { display: inline-table; }
+.display-list-item { display: list-item; }
+.display-none { display: none; }
+.display-table { display: table; }
+.display-table-cell { display: table-cell; }
+.display-table-column { display: table-column; }
+.display-table-column-group { display: table-column-group; }
+.display-table-footer-group { display: table-footer-group; }
+.display-table-header-group { display: table-header-group; }
+.display-table-row { display: table-row; }
+.display-table-row-group { display: table-row-group; }
+.display-unset { display: unset; }
+
+/* flex-basis */
+
+.flexBasis-0 { flex-basis: 0%; }
+.flexBasis-auto { flex-basis: auto; }
+
+/* flex-direction */
+
+.flexDirection-column { flex-direction: column; }
+.flexDirection-column-reverse { flex-direction: column-reverse; }
+.flexDirection-row { flex-direction: row; }
+.flexDirection-row-reverse { flex-direction: row-reverse; }
+
+/* flex-grow */
+
+.flexGrow-0 { flex-grow: 0; }
+.flexGrow-1 { flex-grow: 1; }
+.flexGrow-2 { flex-grow: 2; }
+.flexGrow-3 { flex-grow: 3; }
+.flexGrow-4 { flex-grow: 4; }
+.flexGrow-5 { flex-grow: 5; }
+.flexGrow-6 { flex-grow: 6; }
+.flexGrow-7 { flex-grow: 7; }
+.flexGrow-8 { flex-grow: 8; }
+.flexGrow-9 { flex-grow: 9; }
+.flexGrow-10 { flex-grow: 10; }
+.flexGrow-11 { flex-grow: 11; }
+
+/* flex-shrink */
+
+.flexShrink-0 { flex-shrink: 0; }
+.flexShrink-1 { flex-shrink: 1; }
+.flexShrink-2 { flex-shrink: 2; }
+.flexShrink-3 { flex-shrink: 3; }
+.flexShrink-4 { flex-shrink: 4; }
+.flexShrink-5 { flex-shrink: 5; }
+.flexShrink-6 { flex-shrink: 6; }
+.flexShrink-7 { flex-shrink: 7; }
+.flexShrink-8 { flex-shrink: 8; }
+.flexShrink-9 { flex-shrink: 9; }
+.flexShrink-10 { flex-shrink: 10; }
+.flexShrink-11 { flex-shrink: 11; }
+
+/* flex-wrap */
+
+.flexWrap-nowrap { flex-wrap: nowrap; }
+.flexWrap-wrap { flex-wrap: wrap; }
+.flexWrap-wrap-reverse { flex-wrap: wrap-reverse; }
+
+/* float */
+
+.float-left { float: left; }
+.float-none { float: none; }
+.float-right { float: right; }
+
+/* font */
+
+.font-inherit { font: inherit; }
+
+/* font-family */
+
+.fontFamily-inherit { font-family: inherit; }
+.fontFamily-monospace { font-family: monospace; }
+.fontFamily-sans-serif { font-family: sans-serif; }
+.fontFamily-serif { font-family: serif; }
+
+/* font-size */
+
+.fontSize-100\% { font-size: 100%; }
+.fontSize-inherit { font-size: inherit; }
+
+/* font-style */
+
+.fontStyle-inherit { font-style: inherit; }
+.fontStyle-italic { font-style: italic; }
+.fontStyle-normal { font-style: normal; }
+.fontStyle-oblique { font-style: oblique; }
+
+/* font-weight */
+
+.fontWeight-100 { font-weight: 100; }
+.fontWeight-200 { font-weight: 200; }
+.fontWeight-300 { font-weight: 300; }
+.fontWeight-400 { font-weight: 400; }
+.fontWeight-500 { font-weight: 500; }
+.fontWeight-600 { font-weight: 600; }
+.fontWeight-700 { font-weight: 700; }
+.fontWeight-800 { font-weight: 800; }
+.fontWeight-900 { font-weight: 900; }
+.fontWeight-bold { font-weight: bold; }
+.fontWeight-bolder { font-weight: bolder; }
+.fontWeight-inherit { font-weight: inherit; }
+.fontWeight-lighter { font-weight: lighter; }
+.fontWeight-normal { font-weight: normal; }
+
+/* height */
+
+.height-0 { height: 0; }
+.height-10\% { height: 10%; }
+.height-12\.5\% { height: 12.5%; }
+.height-20\% { height: 20%; }
+.height-25\% { height: 25%; }
+.height-30\% { height: 30%; }
+.height-37\.5\% { height: 37.5%; }
+.height-40\% { height: 40%; }
+.height-50\% { height: 50%; }
+.height-60\% { height: 60%; }
+.height-62\.5\% { height: 62.5%; }
+.height-70\% { height: 70%; }
+.height-75\% { height: 75%; }
+.height-80\% { height: 80%; }
+.height-87\.5\% { height: 87.5%; }
+.height-90\% { height: 90%; }
+.height-100\% { height: 100%; }
+
+/* justify-content */
+
+.justifyContent-center { justify-content: center; }
+.justifyContent-flex-end { justify-content: flex-end; }
+.justifyContent-flex-start { justify-content: flex-start; }
+.justifyContent-space-around { justify-content: space-around; }
+.justifyContent-space-between { justify-content: space-between; }
+
+/* left */
+
+.left-0 { left: 0; }
+.left-50% { left: 50%; }
+.left-100% { left: 100%; }
+
+/* line-height */
+
+.lineHeight-inherit { line-height: inherit; }
+.lineHeight-normal { line-height: normal; }
+
+/* list-style */
+
+.listStyle-none { list-style: none; }
+
+/* margin */
+
+.margin-0 { margin: 0; }
+.margin-auto { margin: auto; }
+
+/* margin-bottom */
+
+.marginBottom-auto { margin-bottom: auto; }
+.marginBottom-0 { margin-bottom: 0; }
+.marginBottom-1em { margin-bottom: 1em; }
+.marginBottom-1rem { margin-bottom: 1rem; }
+
+/* margin-left */
+
+.marginLeft-auto { margin-left: auto; }
+.marginLeft-0 { margin-left: 0; }
+.marginLeft-1em { margin-left: 1em; }
+.marginLeft-1rem { margin-left: 1rem; }
+
+/* margin-right */
+
+.marginRight-auto { margin-right: auto; }
+.marginRight-0 { margin-right: 0; }
+.marginRight-1em { margin-right: 1em; }
+.marginRight-1rem { margin-right: 1rem; }
+
+/* margin-top */
+
+.marginTop-auto { margin-top: auto; }
+.marginTop-0 { margin-top: 0; }
+.marginTop-1em { margin-top: 1em; }
+.marginTop-1rem { margin-top: 1rem; }
+
+/* max-height */
+
+.maxHeight-100\% { max-height: 100%; }
+
+/* max-width */
+
+.maxWidth-100\% { max-width: 100%; }
+
+/* min-height */
+
+.minHeight-100\% { min-height: 100%; }
+
+/* min-width */
+
+.minWidth-100\% { min-width: 100%; }
+
+/* opacity */
+
+.opacity-0 { opacity: 0; }
+.opacity-0\.1 { opacity: 0.1; }
+.opacity-0\.2 { opacity: 0.2; }
+.opacity-0\.25 { opacity: 0.25; }
+.opacity-0\.3 { opacity: 0.3; }
+.opacity-0\.4 { opacity: 0.4; }
+.opacity-0\.5 { opacity: 0.5; }
+.opacity-0\.6 { opacity: 0.6; }
+.opacity-0\.7 { opacity: 0.7; }
+.opacity-0\.75 { opacity: 0.75; }
+.opacity-0\.8 { opacity: 0.8; }
+.opacity-0\.9 { opacity: 0.9; }
+.opacity-1 { opacity: 1; }
+
+/* order */
+
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-9 { order: 9; }
+
+/* overflow */
+
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-inherit { overflow: inherit; }
+.overflow-scroll { overflow: scroll; }
+.overflow-visible { overflow: visible; }
+
+/* overflow-x */
+
+.overflowX-auto { overflow-x: auto; }
+.overflowX-hidden { overflow-x: hidden; }
+.overflowX-inherit { overflow-x: inherit; }
+.overflowX-scroll { overflow-x: scroll; }
+.overflowX-visible { overflow-x: visible; }
+
+/* overflow-y */
+
+.overflowY-auto { overflow-y: auto; }
+.overflowY-hidden { overflow-y: hidden; }
+.overflowY-inherit { overflow-y: inherit; }
+.overflowY-scroll { overflow-y: scroll; }
+.overflowY-visible { overflow-y: visible; }
+
+/* padding */
+
+.padding-0 { padding: 0; }
+.padding-1em { padding: 1em; }
+.padding-1rem { padding: 1rem; }
+
+/* padding-bottom */
+
+.paddingBottom-0 { padding-bottom: 0; }
+.paddingBottom-1em { padding-bottom: 1em; }
+.paddingBottom-1rem { padding-bottom: 1rem; }
+
+/* padding-left */
+
+.paddingLeft-0 { padding-left: 0; }
+.paddingLeft-1em { padding-left: 1em; }
+.paddingLeft-1rem { padding-left: 1rem; }
+
+/* padding-right */
+
+.paddingRight-0 { padding-right: 0; }
+.paddingRight-1em { padding-right: 1em; }
+.paddingRight-1rem { padding-right: 1rem; }
+
+/* padding-top */
+
+.paddingTop-0 { padding-top: 0; }
+.paddingTop-1em { padding-top: 1em; }
+.paddingTop-1rem { padding-top: 1rem; }
+
+/* pointer-events */
+
+.pointerEvents-auto { pointer-events: auto; }
+.pointerEvents-none { pointer-events: none; }
+.pointerEvents-box-none { pointer-events: none; }
+.pointerEvents-box-none * { pointer-events: auto;}
+.pointerEvents-box-only { pointer-events: auto; }
+.pointerEvents-box-only * { pointer-events: none; }
+
+/* position */
+
+.position-absolute { position: absolute; }
+.position-fixed { position: fixed; }
+.position-relative { position: relative; }
+
+/* right */
+
+.right-0 { right: 0; }
+.right-50% { right: 50%; }
+.right-100% { right: 100%; }
+
+/* text-align */
+
+.textAlign-center { text-align: center; }
+.textAlign-end { text-align: end; }
+.textAlign-inherit { text-align: inherit; }
+.textAlign-left { text-align: left; }
+.textAlign-right { text-align: right; }
+.textAlign-justify { text-align: justify; }
+.textAlign-start { text-align: start; }
+
+/* text-decoration */
+
+.textDecoration-inherit { text-decoration: inherit; }
+.textDecoration-none { text-decoration: none; }
+.textDecoration-underline { text-decoration: underline; }
+
+/* text-overflow */
+
+.textOverflow-clip { text-overflow: clip; }
+.textOverflow-ellipsis { text-overflow: ellipsis; }
+
+/* text-rendering */
+
+.textRendering-auto { text-rendering: auto; }
+.textRendering-geometricPrecision { text-rendering: geometricPrecision; }
+.textRendering-inherit { text-rendering: inherit; }
+.textRendering-optimizeLegibility { text-rendering: optimizeLegibility; }
+.textRendering-optimizeSpeed { text-rendering: optimizeSpeed; }
+
+/* text-transform */
+
+.textTransform-capitalize { text-transform: capitalize; }
+.textTransform-lowercase { text-transform: lowercase; }
+.textTransform-none { text-transform: none; }
+.textTransform-uppercase { text-transform: uppercase; }
+
+/* top */
+
+.top-0 { top: 0; }
+.top-50% { top: 50%; }
+.top-100% { top: 100%; }
+
+/* unicode-bidi */
+
+.unicodeBidi-bidi-override { unicode-bidi: bidi-override; }
+.unicodeBidi-embed { unicode-bidi: embed; }
+.unicodeBidi-inherit { unicode-bidi: inherit; }
+.unicodeBidi-isolate { unicode-bidi: isolate; }
+.unicodeBidi-isolate-override { unicode-bidi: isolate-override; }
+.unicodeBidi-normal { unicode-bidi: normal; }
+.unicodeBidi-plaintext { unicode-bidi: plaintext; }
+
+/* user-select */
+
+.userSelect-all { user-select: all; }
+.userSelect-inherit { user-select: inherit; }
+.userSelect-none { user-select: none; }
+.userSelect-text { user-select: text; }
+
+/* visibility */
+
+.visibility-collapse { visibility: collapse; }
+.visibility-hidden { visibility: hidden; }
+.visibility-inherit { visibility: inherit; }
+.visibility-visible { visibility: visible; }
+
+/* white-space */
+
+.whiteSpace-normal { white-space: normal; }
+.whiteSpace-nowrap { white-space: nowrap; }
+.whiteSpace-pre { white-space: pre; }
+.whiteSpace-pre-line { white-space: pre-line; }
+.whiteSpace-pre-wrap { white-space: pre-wrap; }
+
+/* width */
+
+.width-0 { width: 0; }
+.width-10\% { width: 10%; }
+.width-12\.5\% { width: 12.5%; }
+.width-20\% { width: 20%; }
+.width-25\% { width: 25%; }
+.width-30\% { width: 30%; }
+.width-37\.5\% { width: 37.5%; }
+.width-40\% { width: 40%; }
+.width-50\% { width: 50%; }
+.width-60\% { width: 60%; }
+.width-62\.5\% { width: 62.5%; }
+.width-70\% { width: 70%; }
+.width-75\% { width: 75%; }
+.width-80\% { width: 80%; }
+.width-87\.5\% { width: 87.5%; }
+.width-90\% { width: 90%; }
+.width-100\% { width: 100%; }
+
+/* word-wrap */
+
+.wordWrap-break-word { word-wrap: break-word; }
+.wordWrap-normal { word-wrap: normal; }
+
+/* z-index */
+
+.zIndex--1 { z-index: -1; }
+.zIndex-0 { z-index: 0; }
+.zIndex-1 { z-index: 1; }
+.zIndex-2 { z-index: 2; }
+.zIndex-3 { z-index: 3; }
+.zIndex-4 { z-index: 4; }
+.zIndex-5 { z-index: 5; }
+.zIndex-6 { z-index: 6; }
+.zIndex-7 { z-index: 7; }
+.zIndex-8 { z-index: 8; }
+.zIndex-9 { z-index: 9; }
+.zIndex-10 { z-index: 10; }

src/modules/react-web-style/css/appearance.css

@@ -1 +0,0 @@
-.appearance-none { appearance: none; }

src/modules/react-web-style/css/background.css

@@ -1,44 +0,0 @@
-.backgroundAttachment-fixed { background-attachment: fixed; }
-.backgroundAttachment-inherit { background-attachment: inherit; }
-.backgroundAttachment-local { background-attachment: local; }
-.backgroundAttachment-scroll { background-attachment: scroll; }
-
-.backgroundClip-border-box { background-clip: border-box; }
-.backgroundClip-content-box { background-clip: content-box; }
-.backgroundClip-inherit { background-clip: inherit; }
-.backgroundClip-padding-box { background-clip: padding-box; }
-
-.backgroundColor-\#000,
-.backgroundColor-black { background-color: black; }
-.backgroundColor-\#fff,
-.backgroundColor-white { background-color: white; }
-.backgroundColor-currentcolor,
-.backgroundColor-currentColor { background-color: currentcolor; }
-.backgroundColor-inherit { background-color: inherit; }
-.backgroundColor-transparent { background-color: transparent; }
-
-.backgroundImage { background-image: none; }
-
-.backgroundOrigin-border-box { background-clip: border-box; }
-.backgroundOrigin-content-box { background-clip: content-box; }
-.backgroundOrigin-inherit { background-clip: inherit; }
-.backgroundOrigin-padding-box { background-clip: padding-box; }
-
-.backgroundPosition-bottom { background-position: bottom; }
-.backgroundPosition-center { background-position: center; }
-.backgroundPosition-left { background-position: left; }
-.backgroundPosition-right { background-position: right; }
-.backgroundPosition-top { background-position: top; }
-
-.backgroundRepeat-inherit { background-repeat: inherit; }
-.backgroundRepeat-no-repeat { background-repeat: no-repeat; }
-.backgroundRepeat-repeat { background-repeat: repeat; }
-.backgroundRepeat-repeat-x { background-repeat: repeat-x; }
-.backgroundRepeat-repeat-y { background-repeat: repeat-y; }
-.backgroundRepeat-round { background-repeat: round; }
-.backgroundRepeat-space { background-repeat: space; }
-
-.backgroundSize-auto { background-size: auto; }
-.backgroundSize-contain { background-size: contain; }
-.backgroundSize-cover { background-size: cover; }
-.backgroundSize-inherit { background-size: inherit; }

src/modules/react-web-style/css/border.css

@@ -1,100 +0,0 @@
-/* border-color */
-
-.borderColor-\#fff,
-.borderColor-white { border-color: white; }
-.borderColor-currentcolor { border-color: currentcolor; }
-.borderColor-inherit { border-color: inherit; }
-.borderColor-transparent { border-color: transparent; }
-
-.borderBottomColor-\#fff,
-.borderBottomColor-white { border-bottom-color: white; }
-.borderBottomColor-currentcolor { border-bottom-color: currentcolor; }
-.borderBottomColor-inherit { border-bottom-color: inherit; }
-.borderBottomColor-transparent { border-bottom-color: transparent; }
-
-.borderLeftColor-\#fff,
-.borderLeftColor-white { border-left-color: white; }
-.borderLeftColor-currentcolor { border-left-color: currentcolor; }
-.borderLeftColor-inherit { border-left-color: inherit; }
-.borderLeftColor-transparent { border-left-color: transparent; }
-
-.borderRightColor-\#fff,
-.borderRightColor-white { border-right-color: white; }
-.borderRightColor-currentcolor { border-right-color: currentcolor; }
-.borderRightColor-inherit { border-right-color: inherit; }
-.borderRightColor-transparent { border-right-color: transparent; }
-
-.borderTopColor-\#fff,
-.borderTopColor-white { border-top-color: white; }
-.borderTopColor-currentcolor { border-top-color: currentcolor; }
-.borderTopColor-inherit { border-top-color: inherit; }
-.borderTopColor-transparent { border-top-color: transparent; }
-
-/* border-style */
-
-.borderStyle-dashed { border-style: dashed; }
-.borderStyle-dotted { border-style: dotted; }
-.borderStyle-inherit { border-style: inherit; }
-.borderStyle-none { border-style: none; }
-.borderStyle-solid { border-style: solid; }
-
-.borderBottomStyle-dashed { border-bottom-style: dashed; }
-.borderBottomStyle-dotted { border-bottom-style: dotted; }
-.borderBottomStyle-inherit { border-bottom-style: inherit; }
-.borderBottomStyle-none { border-bottom-style: none; }
-.borderBottomStyle-solid { border-bottom-style: solid; }
-
-.borderLeftStyle-dashed { border-left-style: dashed; }
-.borderLeftStyle-dotted { border-left-style: dotted; }
-.borderLeftStyle-inherit { border-left-style: inherit; }
-.borderLeftStyle-none { border-left-style: none; }
-.borderLeftStyle-solid { border-left-style: solid; }
-
-.borderRightStyle-dashed { border-right-style: dashed; }
-.borderRightStyle-dotted { border-right-style: dotted; }
-.borderRightStyle-inherit { border-right-style: inherit; }
-.borderRightStyle-none { border-right-style: none; }
-.borderRightStyle-solid { border-right-style: solid; }
-
-.borderTopStyle-dashed { border-top-style: dashed; }
-.borderTopStyle-dotted { border-top-style: dotted; }
-.borderTopStyle-inherit { border-top-style: inherit; }
-.borderTopStyle-none { border-top-style: none; }
-.borderTopStyle-solid { border-top-style: solid; }
-
-/* border-width */
-
-.borderWidth-0 { border-width: 0; }
-.borderWidth-1px { border-width: 1px; }
-.borderWidth-2px { border-width: 2px; }
-.borderWidth-3px { border-width: 3px; }
-.borderWidth-4px { border-width: 4px; }
-.borderWidth-5px { border-width: 5px; }
-
-.borderBottomWidth-0 { border-bottom-width: 0; }
-.borderBottomWidth-1px { border-bottom-width: 1px; }
-.borderBottomWidth-2px { border-bottom-width: 2px; }
-.borderBottomWidth-3px { border-bottom-width: 3px; }
-.borderBottomWidth-4px { border-bottom-width: 4px; }
-.borderBottomWidth-5px { border-bottom-width: 5px; }
-
-.borderLeftWidth-0 { border-left-width: 0; }
-.borderLeftWidth-1px { border-left-width: 1px; }
-.borderLeftWidth-2px { border-left-width: 2px; }
-.borderLeftWidth-3px { border-left-width: 3px; }
-.borderLeftWidth-4px { border-left-width: 4px; }
-.borderLeftWidth-5px { border-left-width: 5px; }
-
-.borderRightWidth-0 { border-right-width: 0; }
-.borderRightWidth-1px { border-right-width: 1px; }
-.borderRightWidth-2px { border-right-width: 2px; }
-.borderRightWidth-3px { border-right-width: 3px; }
-.borderRightWidth-4px { border-right-width: 4px; }
-.borderRightWidth-5px { border-right-width: 5px; }
-
-.borderTopWidth-0 { border-top-width: 0; }
-.borderTopWidth-1px { border-top-width: 1px; }
-.borderTopWidth-2px { border-top-width: 2px; }
-.borderTopWidth-3px { border-top-width: 3px; }
-.borderTopWidth-4px { border-top-width: 4px; }
-.borderTopWidth-5px { border-top-width: 5px; }

src/modules/react-web-style/css/boxSizing.css

@@ -1,4 +0,0 @@
-.boxSizing-border-box { box-sizing: border-box; }
-.boxSizing-content-box { box-sizing: content-box; }
-.boxSizing-inherit { box-sizing: inherit; }
-.boxSizing-padding-box { box-sizing: padding-box; }

src/modules/react-web-style/css/clear.css

@@ -1,5 +0,0 @@
-.clear-both { clear: both; }
-.clear-inherit { clear: inherit; }
-.clear-left { clear: left; }
-.clear-none { clear: none; }
-.clear-right { clear: right; }

src/modules/react-web-style/css/color.css

@@ -1,6 +0,0 @@
-.color-#000,
-.color-black { color: black; }
-.color-\#fff,
-.color-white { color: white; }
-.color-inherit { color: inherit; }
-.color-transparent { color: transparent; }

src/modules/react-web-style/css/direction.css

@@ -1,3 +0,0 @@
-.direction-inherit { direction: inherit; }
-.direction-ltr { direction: ltr; }
-.direction-rtl { direction: rtl; }

src/modules/react-web-style/css/display.css

@@ -1,22 +0,0 @@
-.display-block { display: block; }
-.display-contents { display: contents; }
-.display-flex { display: flex; }
-.display-grid { display: grid; }
-.display-inherit { display: inherit; }
-.display-initial { display: initial; }
-.display-inline { display: inline; }
-.display-inline-block { display: inline-block; }
-.display-inline-flex { display: inline-flex; }
-.display-inline-grid { display: inline-grid; }
-.display-inline-table { display: inline-table; }
-.display-list-item { display: list-item; }
-.display-none { display: none; }
-.display-table { display: table; }
-.display-table-cell { display: table-cell; }
-.display-table-column { display: table-column; }
-.display-table-column-group { display: table-column-group; }
-.display-table-footer-group { display: table-footer-group; }
-.display-table-header-group { display: table-header-group; }
-.display-table-row { display: table-row; }
-.display-table-row-group { display: table-row-group; }
-.display-unset { display: unset; }

src/modules/react-web-style/css/flexbox.css

@@ -1,74 +0,0 @@
-.alignContent-center { align-content: center; }
-.alignContent-flex-end { align-content: flex-end; }
-.alignContent-flex-start { align-content: flex-start; }
-.alignContent-stretch { align-content: stretch; }
-.alignContent-space-around { align-content: space-around; }
-.alignContent-space-between { align-content: space-between; }
-
-.alignItems-center { align-items: center; }
-.alignItems-flex-end { align-items: flex-end; }
-.alignItems-flex-start { align-items: flex-start; }
-.alignItems-stretch { align-items: stretch; }
-.alignItems-space-around { align-items: space-around; }
-.alignItems-space-between { align-items: space-between; }
-
-.alignSelf-auto { align-self: auto; }
-.alignSelf-baseline { align-self: baseline; }
-.alignSelf-center { align-self: center; }
-.alignSelf-flex-end { align-self: flex-end; }
-.alignSelf-flex-start { align-self: flex-start; }
-.alignSelf-stretch { align-self: stretch; }
-
-.flexBasis-0 { flex-basis: 0%; }
-.flexBasis-auto { flex-basis: auto; }
-
-.flexDirection-column { flex-direction: column; }
-.flexDirection-column-reverse { flex-direction: column-reverse; }
-.flexDirection-row { flex-direction: row; }
-.flexDirection-row-reverse { flex-direction: row-reverse; }
-
-.flexGrow-0 { flex-grow: 0; }
-.flexGrow-1 { flex-grow: 1; }
-.flexGrow-2 { flex-grow: 2; }
-.flexGrow-3 { flex-grow: 3; }
-.flexGrow-4 { flex-grow: 4; }
-.flexGrow-5 { flex-grow: 5; }
-.flexGrow-6 { flex-grow: 6; }
-.flexGrow-7 { flex-grow: 7; }
-.flexGrow-8 { flex-grow: 8; }
-.flexGrow-9 { flex-grow: 9; }
-.flexGrow-10 { flex-grow: 10; }
-.flexGrow-11 { flex-grow: 11; }
-
-.flexShrink-0 { flex-shrink: 0; }
-.flexShrink-1 { flex-shrink: 1; }
-.flexShrink-2 { flex-shrink: 2; }
-.flexShrink-3 { flex-shrink: 3; }
-.flexShrink-4 { flex-shrink: 4; }
-.flexShrink-5 { flex-shrink: 5; }
-.flexShrink-6 { flex-shrink: 6; }
-.flexShrink-7 { flex-shrink: 7; }
-.flexShrink-8 { flex-shrink: 8; }
-.flexShrink-9 { flex-shrink: 9; }
-.flexShrink-10 { flex-shrink: 10; }
-.flexShrink-11 { flex-shrink: 11; }
-
-.flexWrap-nowrap { flex-wrap: nowrap; }
-.flexWrap-wrap { flex-wrap: wrap; }
-.flexWrap-wrap-reverse { flex-wrap: wrap-reverse; }
-
-.justifyContent-center { justify-content: center; }
-.justifyContent-flex-end { justify-content: flex-end; }
-.justifyContent-flex-start { justify-content: flex-start; }
-.justifyContent-space-around { justify-content: space-around; }
-.justifyContent-space-between { justify-content: space-between; }
-
-.order-1 { order: 1; }
-.order-2 { order: 2; }
-.order-3 { order: 3; }
-.order-4 { order: 4; }
-.order-5 { order: 5; }
-.order-6 { order: 6; }
-.order-7 { order: 7; }
-.order-8 { order: 8; }
-.order-9 { order: 9; }

src/modules/react-web-style/css/float.css

@@ -1,3 +0,0 @@
-.float-left { float: left; }
-.float-none { float: none; }
-.float-right { float: right; }

src/modules/react-web-style/css/font.css

@@ -1,37 +0,0 @@
-.font-inherit { font: inherit; }
-
-/* font-family */
-
-.fontFamily-inherit { font-family: inherit; }
-.fontFamily-monospace { font-family: monospace; }
-.fontFamily-sans-serif { font-family: sans-serif; }
-.fontFamily-serif { font-family: serif; }
-
-/* font-size */
-
-.fontSize-100\% { font-size: 100%; }
-.fontSize-inherit { font-size: inherit; }
-
-/* font-style */
-
-.fontStyle-inherit { font-style: inherit; }
-.fontStyle-italic { font-style: italic; }
-.fontStyle-normal { font-style: normal; }
-.fontStyle-oblique { font-style: oblique; }
-
-/* font-weight */
-
-.fontWeight-100 { font-weight: 100; }
-.fontWeight-200 { font-weight: 200; }
-.fontWeight-300 { font-weight: 300; }
-.fontWeight-400 { font-weight: 400; }
-.fontWeight-500 { font-weight: 500; }
-.fontWeight-600 { font-weight: 600; }
-.fontWeight-700 { font-weight: 700; }
-.fontWeight-800 { font-weight: 800; }
-.fontWeight-900 { font-weight: 900; }
-.fontWeight-bold { font-weight: bold; }
-.fontWeight-bolder { font-weight: bolder; }
-.fontWeight-inherit { font-weight: inherit; }
-.fontWeight-lighter { font-weight: lighter; }
-.fontWeight-normal { font-weight: normal; }

src/modules/react-web-style/css/height.css

@@ -1,20 +0,0 @@
-.height-0 { height: 0; }
-.height-10\% { height: 10%; }
-.height-12\.5\% { height: 12.5%; }
-.height-20\% { height: 20%; }
-.height-25\% { height: 25%; }
-.height-30\% { height: 30%; }
-.height-37\.5\% { height: 37.5%; }
-.height-40\% { height: 40%; }
-.height-50\% { height: 50%; }
-.height-60\% { height: 60%; }
-.height-62\.5\% { height: 62.5%; }
-.height-70\% { height: 70%; }
-.height-75\% { height: 75%; }
-.height-80\% { height: 80%; }
-.height-87\.5\% { height: 87.5%; }
-.height-90\% { height: 90%; }
-.height-100\% { height: 100%; }
-
-.maxHeight-100\% { max-height: 100%; }
-.minHeight-100\% { min-height: 100%; }

src/modules/react-web-style/css/lineHeight.css

@@ -1,2 +0,0 @@
-.lineHeight-inherit { line-height: inherit; }
-.lineHeight-normal { line-height: normal; }

src/modules/react-web-style/css/list.css

@@ -1 +0,0 @@
-.listStyle-none { list-style: none; }

src/modules/react-web-style/css/margin.css

@@ -1,22 +0,0 @@
-.margin-0 { margin: 0; }
-.margin-auto { margin: auto; }
-
-.marginBottom-auto { margin-bottom: auto; }
-.marginLeft-auto { margin-left: auto; }
-.marginRight-auto { margin-right: auto; }
-.marginTop-auto { margin-top: auto; }
-
-.marginBottom-0 { margin-bottom: 0; }
-.marginLeft-0 { margin-left: 0; }
-.marginRight-0 { margin-right: 0; }
-.marginTop-0 { margin-top: 0; }
-
-.marginBottom-1em { margin-bottom: 1em; }
-.marginLeft-1em { margin-left: 1em; }
-.marginRight-1em { margin-right: 1em; }
-.marginTop-1em { margin-top: 1em; }
-
-.marginBottom-1rem { margin-bottom: 1rem; }
-.marginLeft-1rem { margin-left: 1rem; }
-.marginRight-1rem { margin-right: 1rem; }
-.marginTop-1rem { margin-top: 1rem; }

src/modules/react-web-style/css/opacity.css

@@ -1,13 +0,0 @@
-.opacity-0 { opacity: 0; }
-.opacity-0\.1 { opacity: 0.1; }
-.opacity-0\.2 { opacity: 0.2; }
-.opacity-0\.25 { opacity: 0.25; }
-.opacity-0\.3 { opacity: 0.3; }
-.opacity-0\.4 { opacity: 0.4; }
-.opacity-0\.5 { opacity: 0.5; }
-.opacity-0\.6 { opacity: 0.6; }
-.opacity-0\.7 { opacity: 0.7; }
-.opacity-0\.75 { opacity: 0.75; }
-.opacity-0\.8 { opacity: 0.8; }
-.opacity-0\.9 { opacity: 0.9; }
-.opacity-1 { opacity: 1; }

src/modules/react-web-style/css/overflow.css

@@ -1,17 +0,0 @@
-.overflow-auto { overflow: auto; }
-.overflow-hidden { overflow: hidden; }
-.overflow-inherit { overflow: inherit; }
-.overflow-scroll { overflow: scroll; }
-.overflow-visible { overflow: visible; }
-
-.overflowX-auto { overflow-x: auto; }
-.overflowX-hidden { overflow-x: hidden; }
-.overflowX-inherit { overflow-x: inherit; }
-.overflowX-scroll { overflow-x: scroll; }
-.overflowX-visible { overflow-x: visible; }
-
-.overflowY-auto { overflow-y: auto; }
-.overflowY-hidden { overflow-y: hidden; }
-.overflowY-inherit { overflow-y: inherit; }
-.overflowY-scroll { overflow-y: scroll; }
-.overflowY-visible { overflow-y: visible; }

src/modules/react-web-style/css/padding.css

@@ -1,17 +0,0 @@
-.padding-0 { padding: 0; }
-.paddingTop-0 { padding-top: 0; }
-.paddingRight-0 { padding-right: 0; }
-.paddingBottom-0 { padding-bottom: 0; }
-.paddingLeft-0 { padding-left: 0; }
-
-.padding-1em { padding: 1em; }
-.paddingTop-1em { padding-top: 1em; }
-.paddingRight-1em { padding-right: 1em; }
-.paddingBottom-1em { padding-bottom: 1em; }
-.paddingLeft-1em { padding-left: 1em; }
-
-.padding-1rem { padding: 1rem; }
-.paddingTop-1rem { padding-top: 1rem; }
-.paddingRight-1rem { padding-right: 1rem; }
-.paddingBottom-1rem { padding-bottom: 1rem; }
-.paddingLeft-1rem { padding-left: 1rem; }

src/modules/react-web-style/css/pointerEvents.css

@@ -1,6 +0,0 @@
-.pointerEvents-auto { pointer-events: auto; }
-.pointerEvents-none { pointer-events: none; }
-.pointerEvents-box-none { pointer-events: none; }
-.pointerEvents-box-none * { pointer-events: auto;}
-.pointerEvents-box-only { pointer-events: auto; }
-.pointerEvents-box-only * { pointer-events: none; }

src/modules/react-web-style/css/position.css

@@ -1,18 +0,0 @@
-.position-absolute { position: absolute; }
-.position-fixed { position: fixed; }
-.position-relative { position: relative; }
-
-.bottom-0 { bottom: 0; }
-.left-0 { left: 0; }
-.right-0 { right: 0; }
-.top-0 { top: 0; }
-
-.bottom-50% { bottom: 50%; }
-.left-50% { left: 50%; }
-.right-50% { right: 50%; }
-.top-50% { top: 50%; }
-
-.bottom-100% { bottom: 100%; }
-.left-100% { left: 100%; }
-.right-100% { right: 100%; }
-.top-100% { top: 100%; }

src/modules/react-web-style/css/text.css

@@ -1,25 +0,0 @@
-.textAlign-center { text-align: center; }
-.textAlign-end { text-align: end; }
-.textAlign-inherit { text-align: inherit; }
-.textAlign-left { text-align: left; }
-.textAlign-right { text-align: right; }
-.textAlign-justify { text-align: justify; }
-.textAlign-start { text-align: start; }
-
-.textDecoration-inherit { text-decoration: inherit; }
-.textDecoration-none { text-decoration: none; }
-.textDecoration-underline { text-decoration: underline; }
-
-.textOverflow-clip { text-overflow: clip; }
-.textOverflow-ellipsis { text-overflow: ellipsis; }
-
-.textRendering-auto { text-rendering: auto; }
-.textRendering-geometricPrecision { text-rendering: geometricPrecision; }
-.textRendering-inherit { text-rendering: inherit; }
-.textRendering-optimizeLegibility { text-rendering: optimizeLegibility; }
-.textRendering-optimizeSpeed { text-rendering: optimizeSpeed; }
-
-.textTransform-capitalize { text-transform: capitalize; }
-.textTransform-lowercase { text-transform: lowercase; }
-.textTransform-none { text-transform: none; }
-.textTransform-uppercase { text-transform: uppercase; }

src/modules/react-web-style/css/unicodeBidi.css

@@ -1,7 +0,0 @@
-.unicodeBidi-bidi-override { unicode-bidi: bidi-override; }
-.unicodeBidi-embed { unicode-bidi: embed; }
-.unicodeBidi-inherit { unicode-bidi: inherit; }
-.unicodeBidi-isolate { unicode-bidi: isolate; }
-.unicodeBidi-isolate-override { unicode-bidi: isolate-override; }
-.unicodeBidi-normal { unicode-bidi: normal; }
-.unicodeBidi-plaintext { unicode-bidi: plaintext; }

src/modules/react-web-style/css/userSelect.css

@@ -1,4 +0,0 @@
-.userSelect-all { user-select: all; }
-.userSelect-inherit { user-select: inherit; }
-.userSelect-none { user-select: none; }
-.userSelect-text { user-select: text; }

src/modules/react-web-style/css/visibility.css

@@ -1,4 +0,0 @@
-.visibility-collapse { visibility: collapse; }
-.visibility-hidden { visibility: hidden; }
-.visibility-inherit { visibility: inherit; }
-.visibility-visible { visibility: visible; }

src/modules/react-web-style/css/whiteSpace.css

@@ -1,5 +0,0 @@
-.whiteSpace-normal { white-space: normal; }
-.whiteSpace-nowrap { white-space: nowrap; }
-.whiteSpace-pre { white-space: pre; }
-.whiteSpace-pre-line { white-space: pre-line; }
-.whiteSpace-pre-wrap { white-space: pre-wrap; }

src/modules/react-web-style/css/width.css

@@ -1,20 +0,0 @@
-.maxWidth-100\% { max-width: 100%; }
-.minWidth-100\% { min-width: 100%; }
-
-.width-0 { width: 0; }
-.width-10\% { width: 10%; }
-.width-12\.5\% { width: 12.5%; }
-.width-20\% { width: 20%; }
-.width-25\% { width: 25%; }
-.width-30\% { width: 30%; }
-.width-37\.5\% { width: 37.5%; }
-.width-40\% { width: 40%; }
-.width-50\% { width: 50%; }
-.width-60\% { width: 60%; }
-.width-62\.5\% { width: 62.5%; }
-.width-70\% { width: 70%; }
-.width-75\% { width: 75%; }
-.width-80\% { width: 80%; }
-.width-87\.5\% { width: 87.5%; }
-.width-90\% { width: 90%; }
-.width-100\% { width: 100%; }

src/modules/react-web-style/css/word.css

@@ -1,2 +0,0 @@
-.wordWrap-break-word { word-wrap: break-word; }
-.wordWrap-normal { word-wrap: normal; }

src/modules/react-web-style/css/zIndex.css

@@ -1,12 +0,0 @@
-.zIndex--1 { z-index: -1; }
-.zIndex-0 { z-index: 0; }
-.zIndex-1 { z-index: 1; }
-.zIndex-2 { z-index: 2; }
-.zIndex-3 { z-index: 3; }
-.zIndex-4 { z-index: 4; }
-.zIndex-5 { z-index: 5; }
-.zIndex-6 { z-index: 6; }
-.zIndex-7 { z-index: 7; }
-.zIndex-8 { z-index: 8; }
-.zIndex-9 { z-index: 9; }
-.zIndex-10 { z-index: 10; }

src/modules/react-web-style/strategy.js

@@ -1,38 +0,0 @@
-import autoprefix from './autoprefix';
-import styleMap from './styleMap';
-
-/**
- * Find declarations that correspond to single purpose classes
- */
-function getSinglePurposeClassName(prop, style) {
-  const uniqueClassName = `${prop}-${style[prop]}`;
-  if (
-    style.hasOwnProperty(prop) &&
-    styleMap[uniqueClassName]
-  ) {
-    return styleMap[uniqueClassName];
-  }
-}
-
-/**
- * Replace inline styles with single purpose classes where possible
- */
-export default function stylingStrategy(props) {
-  const { className: origClassName, style: origStyle } = props;
-  const classNames = [ origClassName ];
-  const style = {};
-
-  for (const prop in origStyle) {
-    const singlePurposeClassName = getSinglePurposeClassName(prop, origStyle);
-    if (singlePurposeClassName) {
-      classNames.push(singlePurposeClassName);
-    } else {
-      style[prop] = origStyle[prop];
-    }
-  }
-
-  const className = classNames.join(' ');
-  const prefixedStyle = autoprefix(style);
-
-  return { className, style: prefixedStyle };
-}

src/modules/react-web-style/styleMap.js

@@ -1,60 +0,0 @@
-import appearance from './css/appearance.css';
-import background from './css/background.css';
-import border from './css/border.css';
-import boxSizing from './css/boxSizing.css';
-import clear from './css/clear.css';
-import color from './css/color.css';
-import cssFloat from './css/float.css';
-import direction from './css/direction.css';
-import display from './css/display.css';
-import flexbox from './css/flexbox.css';
-import font from './css/font.css';
-import height from './css/height.css';
-import lineHeight from './css/lineHeight.css';
-import list from './css/list.css';
-import margin from './css/margin.css';
-import opacity from './css/opacity.css';
-import overflow from './css/overflow.css';
-import padding from './css/padding.css';
-import pointerEvents from './css/pointerEvents.css';
-import position from './css/position.css';
-import text from './css/text.css';
-import unicodeBidi from './css/unicodeBidi.css';
-import userSelect from './css/userSelect.css';
-import visibility from './css/visibility.css';
-import whiteSpace from './css/whiteSpace.css';
-import width from './css/width.css';
-import word from './css/word.css';
-import zIndex from './css/zIndex.css';
-
-const map = Object.assign({},
-  appearance,
-  background,
-  border,
-  boxSizing,
-  clear,
-  color,
-  cssFloat,
-  direction,
-  display,
-  flexbox,
-  font,
-  height,
-  list,
-  margin,
-  opacity,
-  overflow,
-  padding,
-  pointerEvents,
-  position,
-  text,
-  unicodeBidi,
-  userSelect,
-  visibility,
-  whiteSpace,
-  width,
-  word,
-  zIndex
-);
-
-export default map;