Merge pull request #12 from jxnblk/source-order-patch

Source order patch
jxnblk · Jan 5, 2017 · a801f17 · a801f17
2 parents b86b72a + f910243
commit a801f17
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 45 deletions.
diff --git a/packages/axs-ui/src/Button.js b/packages/axs-ui/src/Button.js
@@ -3,15 +3,12 @@ import React from 'react'
 import { Box, config } from 'axs'
 import resets from './resets'
 
-const Button = ({ href, css, ...props }) => {
+const Button = ({ href, ...props }) => {
   return (
     <Box
       is={href ? 'a' : 'button'}
       href={href}
-      css={{
-        ...cx,
-        ...css
-      }}
+      _css={cx}
       bold
       rounded
       white

diff --git a/packages/axs-ui/src/Checkbox.js b/packages/axs-ui/src/Checkbox.js
@@ -6,7 +6,6 @@ import { Line, X } from 'reline'
 class Checkbox extends React.Component {
   render () {
     const {
-      css,
       id,
       name,
       checked,
@@ -36,16 +35,16 @@ class Checkbox extends React.Component {
         display='inline-block'
         blue
         {...props}
-        css={{...cx.root, ...css}}>
+        _css={cx.root}>
         <Box
           is='input'
           type='checkbox'
           {...inputProps}
-          css={cx.input}
+          _css={cx.input}
         />
         <Box
           rounded
-          css={{
+          _css={{
             ...cx.box,
             backgroundColor: checked ? 'currentcolor' : config.colors.gray3
           }}>

diff --git a/packages/axs-ui/src/Heading.js b/packages/axs-ui/src/Heading.js
@@ -5,7 +5,6 @@ import { Text } from 'axs'
 const Heading = ({
   level = 2,
   fontSize,
-  css,
   ...props
 }) => {
   const comp = 'h' + level
@@ -17,9 +16,8 @@ const Heading = ({
       bold
       {...props}
       is={comp}
-      css={{
-        lineHeight: 1.25,
-        ...css
+      _css={{
+        lineHeight: 1.25
       }}
     />
   )

diff --git a/packages/axs-ui/src/Input.js b/packages/axs-ui/src/Input.js
@@ -5,20 +5,15 @@ import resets from './resets'
 
 class Input extends React.Component {
   render () {
-    const { css, ...props } = this.props
-
     return (
       <Box
         is='input'
-        css={{
-          ...cx,
-          ...css
-        }}
+        _css={cx}
         rounded
         border
         borderGray3
         width={1}
-        {...props}
+        {...this.props}
       />
     )
   }

diff --git a/packages/axs-ui/src/Progress.js b/packages/axs-ui/src/Progress.js
@@ -2,14 +2,14 @@
 import React from 'react'
 import { Box, config } from 'axs'
 
-const Progress = ({ css, ...props }) => (
+const Progress = (props) => (
   <Box
     is='progress'
     display='block'
     width={1}
     blue
     border={false}
-    css={{ ...cx, ...css }}
+    _css={cx}
     {...props}
   />
 )

diff --git a/packages/axs-ui/src/Radio.js b/packages/axs-ui/src/Radio.js
@@ -5,7 +5,6 @@ import { Box, config } from 'axs'
 class Radio extends React.Component {
   render () {
     const {
-      css,
       id,
       name,
       checked,
@@ -34,15 +33,15 @@ class Radio extends React.Component {
       <Box
         display='inline-block'
         {...props}
-        css={{...cx.root, ...css}}>
+        _css={cx.root}>
         <Box
           is='input'
           type='radio'
           {...inputProps}
-          css={cx.input}
+          _css={cx.input}
         />
         <Box
-          css={{
+          _css={{
             ...cx.dot,
             backgroundColor: checked ? config.colors.white : 'currentcolor',
             borderStyle: checked ? 'solid' : null,

diff --git a/packages/axs-ui/src/Select.js b/packages/axs-ui/src/Select.js
@@ -6,21 +6,19 @@ import resets from './resets'
 
 class Select extends React.Component {
   render () {
-    const { css, ...props } = this.props
-
     return (
-      <Box css={{ ...cx.root, ...css }}>
+      <Box _css={cx.root}>
         <Box
           is='select'
-          css={cx.select}
+          _css={cx.select}
           width={1}
           rounded
           border
           borderGray3
-          {...props}
+          {...this.props}
         />
         <Box is={SmallChevron}
-          css={cx.chevron} />
+          _css={cx.chevron} />
       </Box>
     )
   }

diff --git a/packages/axs-ui/src/Slider.js b/packages/axs-ui/src/Slider.js
@@ -4,18 +4,16 @@ import { Box, config } from 'axs'
 
 class Slider extends React.Component {
   render () {
-    const { css, ...props } = this.props
-
     return (
       <Box
         is='input'
         type='range'
-        css={{ ...cx, ...css }}
+        _css={cx}
         display='block'
         width={1}
         m0
         bgGray3
-        {...props}
+        {...this.props}
       />
     )
   }

diff --git a/packages/axs-ui/src/Textarea.js b/packages/axs-ui/src/Textarea.js
@@ -5,20 +5,15 @@ import resets from './resets'
 
 class Textarea extends React.Component {
   render () {
-    const { css, ...props } = this.props
-
     return (
       <Box
         is='textarea'
-        css={{
-          ...cx,
-          ...css
-        }}
+        _css={cx}
         rounded
         border
         borderGray3
         width={1}
-        {...props}
+        {...this.props}
       />
     )
   }

diff --git a/src/parse-props.js b/src/parse-props.js
@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import merge from 'deepmerge'
 import config from './config'
 
-const AXS_PROPS = /^(css)$/
+const AXS_PROPS = /^(css|_css)$/
 
 const parseProps = (original = {}) => {
   const options = config.get()
@@ -25,8 +25,9 @@ const parseProps = (original = {}) => {
 
   const styles = merge.all([
     { margin: 0 },
+    (original._css || {}),
+    propStyles,
     (original.css || {}),
-    propStyles
   ])
 
   const cxsClassName = cxs(styles)