refactor: getStyles function

src/config/background.ts

@@ -1,7 +1,7 @@
 import type * as CSS from 'csstype'
-import type { CSSObject } from 'styled-components'
 
-import type { Props, ThemeProp } from '../types'
+import type { Props, Config, ThemeProp } from '../types'
+import { getStyles } from '../utils'
 
 export type BackgroundProps = Props<{
   background: CSS.Property.Background
@@ -11,12 +11,14 @@ export type BackgroundProps = Props<{
   backgroundRepeat: CSS.Property.BackgroundRepeat
 }>
 
-export const background = (props: BackgroundProps & ThemeProp): CSSObject => {
-  return {
-    background: props.background,
-    backgroundImage: props.backgroundImage,
-    backgroundSize: props.backgroundSize,
-    backgroundPosition: props.backgroundPosition,
-    backgroundRepeat: props.backgroundRepeat,
-  }
+const config: Config[] = [
+  { property: 'background' },
+  { property: 'backgroundImage' },
+  { property: 'backgroundSize' },
+  { property: 'backgroundPosition' },
+  { property: 'backgroundRepeat' },
+]
+
+export const background = (props: BackgroundProps & ThemeProp) => {
+  return getStyles(config, props)
 }

src/config/border.ts

@@ -1,8 +1,7 @@
 import type * as CSS from 'csstype'
-import type { CSSObject } from 'styled-components'
 
-import type { Props, ThemeProp, ThemeValues } from '../types'
-import { get } from '../utils'
+import type { Props, ThemeProp, Config, ThemeValues } from '../types'
+import { getStyles } from '../utils'
 
 export type BorderProps = Props<{
   border: CSS.Property.Border
@@ -32,32 +31,34 @@ export type BorderProps = Props<{
   borderLeftColor: ThemeValues<'colors'> | CSS.Property.BorderLeftColor
 }>
 
-export const border = (props: BorderProps & ThemeProp): CSSObject => {
-  return {
-    border: props.border,
-    borderWidth: get(props.borderWidth, props.theme, 'borderWidths'),
-    borderStyle: props.borderStyle,
-    borderColor: get(props.borderColor, props.theme, 'colors'),
-    borderRadius: get(props.borderRadius, props.theme, 'radii'),
-    borderTop: props.borderTop,
-    borderTopWidth: get(props.borderTopWidth, props.theme, 'borderWidths'),
-    borderTopStyle: props.borderTopStyle,
-    borderTopColor: get(props.borderTopColor, props.theme, 'colors'),
-    borderTopLeftRadius: get(props.borderTopLeftRadius, props.theme, 'radii'),
-    borderTopRightRadius: get(props.borderTopRightRadius, props.theme, 'radii'),
-    borderRight: props.borderRight,
-    borderRightWidth: get(props.borderRightWidth, props.theme, 'borderWidths'),
-    borderRightStyle: props.borderRightStyle,
-    borderRightColor: get(props.borderRightColor, props.theme, 'colors'),
-    borderBottom: props.borderBottom,
-    borderBottomWidth: get(props.borderBottomWidth, props.theme, 'borderWidths'),
-    borderBottomStyle: props.borderBottomStyle,
-    borderBottomColor: get(props.borderBottomColor, props.theme, 'colors'),
-    borderBottomLeftRadius: get(props.borderBottomLeftRadius, props.theme, 'radii'),
-    borderBottomRightRadius: get(props.borderBottomRightRadius, props.theme, 'radii'),
-    borderLeft: props.borderLeft,
-    borderLeftWidth: get(props.borderLeftWidth, props.theme, 'borderWidths'),
-    borderLeftStyle: props.borderLeftStyle,
-    borderLeftColor: get(props.borderLeftColor, props.theme, 'colors'),
-  }
+const config: Config[] = [
+  { property: 'border' },
+  { property: 'borderWidth', scope: 'borderWidths' },
+  { property: 'borderStyle' },
+  { property: 'borderColor', scope: 'colors' },
+  { property: 'borderRadius', scope: 'radii' },
+  { property: 'borderTop' },
+  { property: 'borderTopWidth', scope: 'borderWidths' },
+  { property: 'borderTopStyle' },
+  { property: 'borderTopColor', scope: 'colors' },
+  { property: 'borderTopLeftRadius', scope: 'radii' },
+  { property: 'borderTopRightRadius', scope: 'radii' },
+  { property: 'borderRight' },
+  { property: 'borderRightWidth', scope: 'borderWidths' },
+  { property: 'borderRightStyle' },
+  { property: 'borderRightColor', scope: 'colors' },
+  { property: 'borderBottom' },
+  { property: 'borderBottomWidth', scope: 'borderWidths' },
+  { property: 'borderBottomStyle' },
+  { property: 'borderBottomColor', scope: 'colors' },
+  { property: 'borderBottomLeftRadius', scope: 'radii' },
+  { property: 'borderBottomRightRadius', scope: 'radii' },
+  { property: 'borderLeft' },
+  { property: 'borderLeftWidth', scope: 'borderWidths' },
+  { property: 'borderLeftStyle' },
+  { property: 'borderLeftColor', scope: 'colors' },
+]
+
+export const border = (props: BorderProps & ThemeProp) => {
+  return getStyles(config, props)
 }

src/config/color.ts

@@ -1,19 +1,20 @@
 import type * as CSS from 'csstype'
-import type { CSSObject } from 'styled-components'
 
-import type { Props, ThemeProp, ThemeValues } from '../types'
-import { get } from '../utils'
+import type { Config, Props, ThemeProp, ThemeValues } from '../types'
+import { getStyles } from '../utils'
 
 export type ColorProps = Props<{
   color: ThemeValues<'colors'> | CSS.Property.Color
   backgroundColor: ThemeValues<'colors'> | CSS.Property.BackgroundColor
   opacity: CSS.Property.Opacity
 }>
 
-export const color = (props: ColorProps & ThemeProp): CSSObject => {
-  return {
-    color: get(props.color, props.theme, 'colors'),
-    backgroundColor: get(props.backgroundColor, props.theme, 'colors'),
-    opacity: props.opacity,
-  }
+const config: Config[] = [
+  { property: 'color', scope: 'colors' },
+  { property: 'backgroundColor', scope: 'colors' },
+  { property: 'opacity' },
+]
+
+export const color = (props: ColorProps & ThemeProp) => {
+  return getStyles(config, props)
 }

src/config/flex.ts

@@ -1,7 +1,7 @@
 import type * as CSS from 'csstype'
-import type { CSSObject } from 'styled-components'
 
-import type { Props, ThemeProp } from '../types'
+import type { Config, Props, ThemeProp } from '../types'
+import { getStyles } from '../utils'
 
 export type FlexProps = Props<{
   alignItems: CSS.Property.AlignItems
@@ -19,20 +19,22 @@ export type FlexProps = Props<{
   order: CSS.Property.Order
 }>
 
-export const flex = (props: FlexProps & ThemeProp): CSSObject => {
-  return {
-    alignItems: props.alignItems,
-    alignContent: props.alignContent,
-    justifyItems: props.justifyItems,
-    justifyContent: props.justifyContent,
-    flexWrap: props.flexWrap,
-    flexDirection: props.flexDirection,
-    flex: props.flex,
-    flexGrow: props.flexGrow,
-    flexShrink: props.flexShrink,
-    flexBasis: props.flexBasis,
-    justifySelf: props.justifySelf,
-    alignSelf: props.alignSelf,
-    order: props.order,
-  }
+const config: Config[] = [
+  { property: 'alignItems' },
+  { property: 'alignContent' },
+  { property: 'justifyItems' },
+  { property: 'justifyContent' },
+  { property: 'flex' },
+  { property: 'flexBasis' },
+  { property: 'flexDirection' },
+  { property: 'flexGrow' },
+  { property: 'flexShrink' },
+  { property: 'flexWrap' },
+  { property: 'justifySelf' },
+  { property: 'alignSelf' },
+  { property: 'order' },
+]
+
+export const flex = (props: FlexProps & ThemeProp) => {
+  return getStyles(config, props)
 }

src/config/grid.ts

@@ -1,8 +1,7 @@
 import type * as CSS from 'csstype'
-import type { CSSObject } from 'styled-components'
 
-import type { Props, ThemeProp, ThemeValues } from '../types'
-import { get } from '../utils'
+import type { Config, Props, ThemeProp, ThemeValues } from '../types'
+import { getStyles } from '../utils'
 
 export type GridProps = Props<{
   gridGap: ThemeValues<'spaces'> | CSS.Property.GridGap
@@ -19,19 +18,21 @@ export type GridProps = Props<{
   gridTemplateAreas: CSS.Property.Grid
 }>
 
-export const grid = (props: GridProps & ThemeProp): CSSObject => {
-  return {
-    gridGap: get(props.gridGap, props.theme, 'spaces'),
-    gridRowGap: get(props.gridRowGap, props.theme, 'spaces'),
-    gridColumnGap: get(props.gridColumnGap, props.theme, 'spaces'),
-    gridColumn: props.gridColumn,
-    gridRow: props.gridRow,
-    gridArea: props.gridArea,
-    gridAutoFlow: props.gridAutoFlow,
-    gridAutoRows: props.gridAutoRows,
-    gridAutoColumns: props.gridAutoColumns,
-    gridTemplateRows: props.gridTemplateRows,
-    gridTemplateColumns: props.gridTemplateColumns,
-    gridTemplateAreas: props.gridTemplateAreas,
-  }
+const config: Config[] = [
+  { property: 'gridGap', scope: 'spaces' },
+  { property: 'gridRowGap', scope: 'spaces' },
+  { property: 'gridColumnGap', scope: 'spaces' },
+  { property: 'gridColumn' },
+  { property: 'gridRow' },
+  { property: 'gridArea' },
+  { property: 'gridAutoFlow' },
+  { property: 'gridAutoRows' },
+  { property: 'gridAutoColumns' },
+  { property: 'gridTemplateRows' },
+  { property: 'gridTemplateColumns' },
+  { property: 'gridTemplateAreas' },
+]
+
+export const grid = (props: GridProps & ThemeProp) => {
+  return getStyles(config, props)
 }

src/config/layout.ts

@@ -1,8 +1,7 @@
 import type * as CSS from 'csstype'
-import type { CSSObject } from 'styled-components'
 
-import type { Props, ThemeProp, ThemeValues } from '../types'
-import { get } from '../utils'
+import type { Config, Props, ThemeProp, ThemeValues } from '../types'
+import { getStyles } from '../utils'
 
 export type LayoutProps = Props<{
   w: ThemeValues<'sizes'> | CSS.Property.Width
@@ -18,18 +17,20 @@ export type LayoutProps = Props<{
   overflowY: CSS.Property.OverflowY
 }>
 
-export const layout = (props: LayoutProps & ThemeProp): CSSObject => {
-  return {
-    width: get(props.w, props.theme, 'sizes'),
-    height: get(props.h, props.theme, 'sizes'),
-    minWidht: get(props.minW, props.theme, 'sizes'),
-    maxWidth: get(props.maxW, props.theme, 'sizes'),
-    minHeight: get(props.minH, props.theme, 'sizes'),
-    maxHeight: get(props.maxH, props.theme, 'sizes'),
-    display: props.display,
-    verticalAlign: props.verticalAlign,
-    overflow: props.overflow,
-    overflowX: props.overflowX,
-    overflowY: props.overflowY,
-  }
+const config: Config[] = [
+  { property: 'w', scope: 'sizes' },
+  { property: 'h', scope: 'sizes' },
+  { property: 'minW', scope: 'sizes' },
+  { property: 'maxW', scope: 'sizes' },
+  { property: 'minH', scope: 'sizes' },
+  { property: 'maxH', scope: 'sizes' },
+  { property: 'display' },
+  { property: 'verticalAlign' },
+  { property: 'overflow' },
+  { property: 'overflowX' },
+  { property: 'overflowY' },
+]
+
+export const layout = (props: LayoutProps & ThemeProp) => {
+  return getStyles(config, props)
 }

src/config/other.ts

@@ -1,7 +1,7 @@
 import type * as CSS from 'csstype'
-import type { CSSObject } from 'styled-components'
 
-import type { Props, ThemeProp } from '../types'
+import type { Config, Props, ThemeProp } from '../types'
+import { getStyles } from '../utils'
 
 export type OtherProps = Props<{
   cursor: CSS.Property.Cursor
@@ -12,13 +12,15 @@ export type OtherProps = Props<{
   visibility: CSS.Property.Visibility
 }>
 
-export const other = (props: OtherProps & ThemeProp): CSSObject => {
-  return {
-    cursor: props.cursor,
-    float: props.float,
-    objectFit: props.objectFit,
-    objectPosition: props.objectPosition,
-    transform: props.transform,
-    visibility: props.visibility,
-  }
+const config: Config[] = [
+  { property: 'cursor' },
+  { property: 'float' },
+  { property: 'objectFit' },
+  { property: 'objectPosition' },
+  { property: 'transform' },
+  { property: 'visibility' },
+]
+
+export const other = (props: OtherProps & ThemeProp) => {
+  return getStyles(config, props)
 }

src/config/position.ts

@@ -1,8 +1,7 @@
 import type * as CSS from 'csstype'
-import type { CSSObject } from 'styled-components'
 
-import type { Props, ThemeProp, ThemeValues } from '../types'
-import { get } from '../utils'
+import type { Config, Props, ThemeProp, ThemeValues } from '../types'
+import { getStyles } from '../utils'
 
 export type PositionProps = Props<{
   position: CSS.Property.Position
@@ -13,13 +12,15 @@ export type PositionProps = Props<{
   left: ThemeValues<'spaces'> | CSS.Property.Left
 }>
 
-export const position = (props: PositionProps & ThemeProp): CSSObject => {
-  return {
-    position: props.position,
-    zIndex: props.zIndex,
-    top: get(props.top, props.theme, 'spaces'),
-    right: get(props.right, props.theme, 'spaces'),
-    bottom: get(props.bottom, props.theme, 'spaces'),
-    left: get(props.left, props.theme, 'spaces'),
-  }
+const config: Config[] = [
+  { property: 'position' },
+  { property: 'zIndex' },
+  { property: 'top', scope: 'spaces' },
+  { property: 'right', scope: 'spaces' },
+  { property: 'bottom', scope: 'spaces' },
+  { property: 'left', scope: 'spaces' },
+]
+
+export const position = (props: PositionProps & ThemeProp) => {
+  return getStyles(config, props)
 }

src/config/space.ts

@@ -1,8 +1,7 @@
 import type * as CSS from 'csstype'
-import type { CSSObject } from 'styled-components'
 
-import type { Props, ThemeProp, ThemeValues } from '../types'
-import { get } from '../utils'
+import type { Config, Props, ThemeProp, ThemeValues } from '../types'
+import { getStyles } from '../utils'
 
 export type SpaceProps = Props<{
   m: ThemeValues<'spaces'> | CSS.Property.Margin
@@ -21,17 +20,23 @@ export type SpaceProps = Props<{
   px: ThemeValues<'spaces'> | CSS.Property.Padding
 }>
 
-export const space = (props: SpaceProps & ThemeProp): CSSObject => {
-  return {
-    margin: get(props.m, props.theme, 'spaces'),
-    marginTop: get(props.mt || props.my, props.theme, 'spaces'),
-    marginRight: get(props.mr || props.mx, props.theme, 'spaces'),
-    marginBottom: get(props.mb || props.mb, props.theme, 'spaces'),
-    marginLeft: get(props.ml || props.mx, props.theme, 'spaces'),
-    padding: get(props.p, props.theme, 'spaces'),
-    paddingTop: get(props.pt || props.py, props.theme, 'spaces'),
-    paddingRight: get(props.pr || props.px, props.theme, 'spaces'),
-    paddingBottom: get(props.pb || props.pb, props.theme, 'spaces'),
-    paddingLeft: get(props.pl || props.px, props.theme, 'spaces'),
-  }
+const config: Config[] = [
+  { property: 'm', scope: 'spaces' },
+  { property: 'mt', scope: 'spaces' },
+  { property: 'mr', scope: 'spaces' },
+  { property: 'mb', scope: 'spaces' },
+  { property: 'ml', scope: 'spaces' },
+  { property: 'my', scope: 'spaces' },
+  { property: 'mx', scope: 'spaces' },
+  { property: 'p', scope: 'spaces' },
+  { property: 'pt', scope: 'spaces' },
+  { property: 'pr', scope: 'spaces' },
+  { property: 'pb', scope: 'spaces' },
+  { property: 'pl', scope: 'spaces' },
+  { property: 'py', scope: 'spaces' },
+  { property: 'px', scope: 'spaces' },
+]
+
+export const space = (props: SpaceProps & ThemeProp) => {
+  return getStyles(config, props)
 }