Add svg prop enhancers (#131)

Resolves #130

Author: brandongregoryscott

README.md

@@ -145,6 +145,7 @@ All of these CSS properties are supported. You can pass either a string or a num
 - `content`
 - `cursor`
 - `display`
+- `fill`
 - `flex`
 - `flexBasis`
 - `flexDirection`
@@ -221,6 +222,12 @@ All of these CSS properties are supported. You can pass either a string or a num
 - `resize`
 - `right`
 - `rowGap`
+- `stroke`
+- `strokeDasharray`
+- `strokeDashoffset`
+- `strokeLinecap`
+- `strokeMiterlimit`
+- `strokeWidth`
 - `textAlign`
 - `textDecoration`
 - `textOverflow`
@@ -342,6 +349,7 @@ These enhancer groups are also exported. They're all objects with `{ propTypes,
 - `overflow`
 - `position`
 - `spacing`
+- `svg`
 - `text`
 - `transform`
 - `transition`

src/enhancers/index.ts

@@ -16,6 +16,7 @@ import * as position from './position'
 import * as resize from './resize'
 import * as selectors from './selectors'
 import * as spacing from './spacing'
+import * as svg from './svg'
 import * as text from './text'
 import * as transform from './transform'
 import * as transition from './transition'
@@ -40,6 +41,7 @@ export {
   resize,
   selectors,
   spacing,
+  svg,
   text,
   transform,
   transition
@@ -64,6 +66,7 @@ export const propTypes: PropTypesMapping = {
   ...resize.propTypes,
   ...selectors.propTypes,
   ...spacing.propTypes,
+  ...svg.propTypes,
   ...text.propTypes,
   ...transform.propTypes,
   ...transition.propTypes
@@ -90,6 +93,7 @@ export const propAliases: PropAliases = {
   ...resize.propAliases,
   ...selectors.propAliases,
   ...spacing.propAliases,
+  ...svg.propAliases,
   ...text.propAliases,
   ...transform.propAliases,
   ...transition.propAliases
@@ -114,6 +118,7 @@ export const propValidators: PropValidators = {
   ...resize.propValidators,
   ...selectors.propValidators,
   ...spacing.propValidators,
+  ...svg.propValidators,
   ...text.propValidators,
   ...transform.propValidators,
   ...transition.propValidators
@@ -138,6 +143,7 @@ export const propEnhancers: PropEnhancers = {
   ...resize.propEnhancers,
   ...selectors.propEnhancers,
   ...spacing.propEnhancers,
+  ...svg.propEnhancers,
   ...text.propEnhancers,
   ...transform.propEnhancers,
   ...transition.propEnhancers

src/enhancers/svg.ts

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types'
+import getCss from '../get-css'
+import { PropEnhancerValueType, PropValidators, PropEnhancers, PropTypesMapping, PropAliases } from '../types/enhancers'
+
+export const propTypes: PropTypesMapping = {
+  fill: PropTypes.string,
+  stroke: PropTypes.string,
+  strokeDasharray: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  strokeDashoffset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  strokeLinecap: PropTypes.string,
+  strokeMiterlimit: PropTypes.number,
+  strokeWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+}
+
+export const propAliases: PropAliases = {}
+export const propValidators: PropValidators = {}
+
+const fill = {
+  className: 'fill',
+  cssName: 'fill',
+  jsName: 'fill'
+}
+
+const stroke = { className: 'strk', cssName: 'stroke', jsName: 'stroke' }
+
+const strokeDasharray = {
+  className: 'strk-dshary',
+  cssName: 'stroke-dasharray',
+  jsName: 'strokeDasharray',
+  defaultUnit: ''
+}
+
+const strokeDashoffset = {
+  className: 'strk-dshofst',
+  cssName: 'stroke-dashoffset',
+  jsName: 'strokeDashoffset',
+  defaultUnit: ''
+}
+
+const strokeLinecap = { className: 'strk-lncp', cssName: 'stroke-linecap', jsName: 'strokeLinecap', safeValue: true }
+
+const strokeMiterlimit = {
+  className: 'strk-mtrlmt',
+  cssName: 'stroke-miterlimit',
+  jsName: 'strokeMiterlimit',
+  defaultUnit: ''
+}
+
+const strokeWidth = { className: 'strk-w', cssName: 'stroke-width', jsName: 'strokeWidth', defaultUnit: '' }
+
+export const propEnhancers: PropEnhancers = {
+  fill: (value: PropEnhancerValueType, selector: string) => getCss(fill, value, selector),
+  stroke: (value: PropEnhancerValueType, selector: string) => getCss(stroke, value, selector),
+  strokeDasharray: (value: PropEnhancerValueType, selector: string) => getCss(strokeDasharray, value, selector),
+  strokeDashoffset: (value: PropEnhancerValueType, selector: string) => getCss(strokeDashoffset, value, selector),
+  strokeLinecap: (value: PropEnhancerValueType, selector: string) => getCss(strokeLinecap, value, selector),
+  strokeMiterlimit: (value: PropEnhancerValueType, selector: string) => getCss(strokeMiterlimit, value, selector),
+  strokeWidth: (value: PropEnhancerValueType, selector: string) => getCss(strokeWidth, value, selector)
+}

src/types/enhancers.ts

@@ -150,7 +150,11 @@ export type CssProps = Pick<
   | 'wordWrap'
   | 'zIndex'
 > &
-  Pick<CSS.ObsoleteProperties, 'gridColumnGap' | 'gridGap' | 'gridRowGap'>
+  Pick<CSS.ObsoleteProperties, 'gridColumnGap' | 'gridGap' | 'gridRowGap'> &
+  Pick<
+    CSS.SvgProperties,
+    'fill' | 'stroke' | 'strokeDasharray' | 'strokeDashoffset' | 'strokeLinecap' | 'strokeMiterlimit' | 'strokeWidth'
+  >
 
 export type BoxCssProps<CP> = {
   // Enhance the CSS props with the ui-box supported values.

test/snapshots/box.tsx.md

@@ -9,7 +9,7 @@ Generated by [AVA](https://ava.li).
 > DOM
 
     <div
-      className="ub-a-nm_openAnimation_65p985 ub-a-dur_2-5s ub-a-itr-ct_infinite ub-a-tmng-fn_lvnx00 ub-a-dir_both ub-a-ply-ste_running ub-a-dly_0s ub-algn-cnt_center ub-algn-itms_center ub-algn-slf_center ub-bg_169mlyl ub-bg-blnd-md_multiply ub-bg-clp_padding-box ub-bg-clr_red ub-bg-img_181xl07 ub-bg-orgn_border-box ub-bg-pos_center ub-bg-rpt_no-repeat ub-bg-siz_cover ub-b-btm_1px-solid-black ub-b-lft_1px-solid-black ub-b-rgt_1px-solid-black ub-b-top_1px-solid-black ub-b-btm-clr_red ub-bblr_5px ub-bbrr_5px ub-b-btm-stl_dashed ub-b-btm-wdt_2px ub-b-lft-clr_red ub-b-rgt-clr_red ub-b-top-clr_red ub-b-lft-stl_dashed ub-b-lft-wdt_2px ub-btlr_5px ub-btrr_5px ub-b-rgt-stl_dashed ub-b-rgt-wdt_2px ub-b-top-stl_dashed ub-b-top-wdt_2px ub-btm_10px ub-bs_1yidkis ub-box-szg_border-box ub-clr_both ub-clearfix ub-color_blue ub-col-gap_3px ub-cnt_1qde24a ub-crsr_pointer ub-dspl_flex ub-flx_1 ub-flx-basis_10px ub-flx-drct_column ub-flx-flow_column-wrap ub-flx-grow_1 ub-flx-srnk_1 ub-flx-wrap_wrap ub-flt_left ub-fnt_foz7o3 ub-fnt-fam_1bil31i ub-fnt-sze_14px ub-fnt-stl_italic ub-f-vari_small-caps ub-f-wght_bold ub-gap_3px ub-grd_1lsuugy ub-grd-ara_15fp4eo ub-grd-ato-col_1mp9azz ub-grd-ato-flw_row-dense ub-grd-ato-row_1mp9azz ub-grd-col_1i1wt59 ub-grd-col-end_span-3 ub-grd-col-gap_3px ub-grd-col-str_span-3 ub-grd-gap_3px ub-grd-row_1i1wt59 ub-grd-row-end_span-3 ub-grd-row-gap_3px ub-grd-row-str_span-3 ub-grd-tmp_1b7k023 ub-grd-tmp-ara_1s7jr1l ub-grd-tmp-col_2czdni ub-grd-tmp-row_2czdni ub-h_100px ub-just-cnt_center ub-just-items_center ub-just-self_center ub-lft_10px ub-ltr-spc_0-4em ub-ln-ht_1-2 ub-ls_1j8swju ub-ls-img_iu2jf4 ub-ls-pos_inside ub-ls-typ_lower-greek ub-mb_10px ub-ml_10px ub-mr_10px ub-mt_10px ub-max-h_100prcnt ub-max-w_100prcnt ub-min-h_100px ub-min-w_100px ub-opct_1 ub-order_1 ub-otln_iu2jf4 ub-ovflw-x_auto ub-ovflw-y_auto ub-pb_10px ub-pl_10px ub-pr_10px ub-pt_10px ub-plc-cnt_center-center ub-plc-items_center-center ub-plc-self_center-center ub-ptr-evts_auto ub-pst_relative ub-rsz_none ub-rgt_10px ub-row-gap_3px ub-bg-clr_nfznl2 ub-txt-algn_right ub-txt-deco_underline-dotted ub-txt-ovrf_ellipsis ub-txt-shdw_1kcg6ht ub-txt-trns_capitalize ub-top_10px ub-tfrm_yf7huz ub-tfrm-orgn_tkeb9y ub-tstn_7vzx02 ub-tstn-dly_ru3mkq ub-tstn-drn_i11nm5 ub-tstn-pty_ayd6f0 ub-tstn-tf_r9onko ub-usr-slct_none ub-vsblt_visible ub-wht-spc_nowrap ub-w_10ae43h ub-wrd-brk_normal ub-wrd-wrp_break-word ub-z-idx_1"
+      className="ub-a-nm_openAnimation_65p985 ub-a-dur_2-5s ub-a-itr-ct_infinite ub-a-tmng-fn_lvnx00 ub-a-dir_both ub-a-ply-ste_running ub-a-dly_0s ub-algn-cnt_center ub-algn-itms_center ub-algn-slf_center ub-bg_169mlyl ub-bg-blnd-md_multiply ub-bg-clp_padding-box ub-bg-clr_red ub-bg-img_181xl07 ub-bg-orgn_border-box ub-bg-pos_center ub-bg-rpt_no-repeat ub-bg-siz_cover ub-b-btm_1px-solid-black ub-b-lft_1px-solid-black ub-b-rgt_1px-solid-black ub-b-top_1px-solid-black ub-b-btm-clr_red ub-bblr_5px ub-bbrr_5px ub-b-btm-stl_dashed ub-b-btm-wdt_2px ub-b-lft-clr_red ub-b-rgt-clr_red ub-b-top-clr_red ub-b-lft-stl_dashed ub-b-lft-wdt_2px ub-btlr_5px ub-btrr_5px ub-b-rgt-stl_dashed ub-b-rgt-wdt_2px ub-b-top-stl_dashed ub-b-top-wdt_2px ub-btm_10px ub-bs_1yidkis ub-box-szg_border-box ub-clr_both ub-clearfix ub-color_blue ub-col-gap_3px ub-cnt_1qde24a ub-crsr_pointer ub-dspl_flex ub-fill_black ub-flx_1 ub-flx-basis_10px ub-flx-drct_column ub-flx-flow_column-wrap ub-flx-grow_1 ub-flx-srnk_1 ub-flx-wrap_wrap ub-flt_left ub-fnt_foz7o3 ub-fnt-fam_1bil31i ub-fnt-sze_14px ub-fnt-stl_italic ub-f-vari_small-caps ub-f-wght_bold ub-gap_3px ub-grd_1lsuugy ub-grd-ara_15fp4eo ub-grd-ato-col_1mp9azz ub-grd-ato-flw_row-dense ub-grd-ato-row_1mp9azz ub-grd-col_1i1wt59 ub-grd-col-end_span-3 ub-grd-col-gap_3px ub-grd-col-str_span-3 ub-grd-gap_3px ub-grd-row_1i1wt59 ub-grd-row-end_span-3 ub-grd-row-gap_3px ub-grd-row-str_span-3 ub-grd-tmp_1b7k023 ub-grd-tmp-ara_1s7jr1l ub-grd-tmp-col_2czdni ub-grd-tmp-row_2czdni ub-h_100px ub-just-cnt_center ub-just-items_center ub-just-self_center ub-lft_10px ub-ltr-spc_0-4em ub-ln-ht_1-2 ub-ls_1j8swju ub-ls-img_iu2jf4 ub-ls-pos_inside ub-ls-typ_lower-greek ub-mb_10px ub-ml_10px ub-mr_10px ub-mt_10px ub-max-h_100prcnt ub-max-w_100prcnt ub-min-h_100px ub-min-w_100px ub-opct_1 ub-order_1 ub-otln_iu2jf4 ub-ovflw-x_auto ub-ovflw-y_auto ub-pb_10px ub-pl_10px ub-pr_10px ub-pt_10px ub-plc-cnt_center-center ub-plc-items_center-center ub-plc-self_center-center ub-ptr-evts_auto ub-pst_relative ub-rsz_none ub-rgt_10px ub-row-gap_3px ub-bg-clr_nfznl2 ub-strk_black ub-strk-dshary_10 ub-strk-dshofst_10 ub-strk-lncp_round ub-strk-mtrlmt_10 ub-strk-w_10 ub-txt-algn_right ub-txt-deco_underline-dotted ub-txt-ovrf_ellipsis ub-txt-shdw_1kcg6ht ub-txt-trns_capitalize ub-top_10px ub-tfrm_yf7huz ub-tfrm-orgn_tkeb9y ub-tstn_7vzx02 ub-tstn-dly_ru3mkq ub-tstn-drn_i11nm5 ub-tstn-pty_ayd6f0 ub-tstn-tf_r9onko ub-usr-slct_none ub-vsblt_visible ub-wht-spc_nowrap ub-w_10ae43h ub-wrd-brk_normal ub-wrd-wrp_break-word ub-z-idx_1"
       contentEditable={true}
     />
 
@@ -179,6 +179,9 @@ Generated by [AVA](https://ava.li).
       display: -webkit-flex;␊
       display: flex;␊
     }␊
+    .ub-fill_black {␊
+      fill: black;␊
+    }␊
     .ub-flx_1 {␊
       flex: 1;␊
     }␊
@@ -395,6 +398,24 @@ Generated by [AVA](https://ava.li).
     .ub-bg-clr_nfznl2:hover {␊
       background-color: blue;␊
     }␊
+    .ub-strk_black {␊
+      stroke: black;␊
+    }␊
+    .ub-strk-dshary_10 {␊
+      stroke-dasharray: 10;␊
+    }␊
+    .ub-strk-dshofst_10 {␊
+      stroke-dashoffset: 10;␊
+    }␊
+    .ub-strk-lncp_round {␊
+      stroke-linecap: round;␊
+    }␊
+    .ub-strk-mtrlmt_10 {␊
+      stroke-miterlimit: 10;␊
+    }␊
+    .ub-strk-w_10 {␊
+      stroke-width: 10;␊
+    }␊
     .ub-txt-algn_right {␊
       text-align: right;␊
     }␊
@@ -818,6 +839,27 @@ Generated by [AVA](https://ava.li).
     .ub-pt_inherit {␊
       padding-top: inherit;␊
     }␊
+    .ub-fill_inherit {␊
+      fill: inherit;␊
+    }␊
+    .ub-strk_inherit {␊
+      stroke: inherit;␊
+    }␊
+    .ub-strk-dshary_inherit {␊
+      stroke-dasharray: inherit;␊
+    }␊
+    .ub-strk-dshofst_inherit {␊
+      stroke-dashoffset: inherit;␊
+    }␊
+    .ub-strk-lncp_inherit {␊
+      stroke-linecap: inherit;␊
+    }␊
+    .ub-strk-mtrlmt_inherit {␊
+      stroke-miterlimit: inherit;␊
+    }␊
+    .ub-strk-w_inherit {␊
+      stroke-width: inherit;␊
+    }␊
     .ub-color_inherit {␊
       color: inherit;␊
     }␊
@@ -1253,6 +1295,27 @@ Generated by [AVA](https://ava.li).
     .ub-pt_initial {␊
       padding-top: initial;␊
     }␊
+    .ub-fill_initial {␊
+      fill: initial;␊
+    }␊
+    .ub-strk_initial {␊
+      stroke: initial;␊
+    }␊
+    .ub-strk-dshary_initial {␊
+      stroke-dasharray: initial;␊
+    }␊
+    .ub-strk-dshofst_initial {␊
+      stroke-dashoffset: initial;␊
+    }␊
+    .ub-strk-lncp_initial {␊
+      stroke-linecap: initial;␊
+    }␊
+    .ub-strk-mtrlmt_initial {␊
+      stroke-miterlimit: initial;␊
+    }␊
+    .ub-strk-w_initial {␊
+      stroke-width: initial;␊
+    }␊
     .ub-color_initial {␊
       color: initial;␊
     }␊

test/snapshots/box.tsx.snap

@@ -71,6 +71,7 @@ export default () => {
       content={`""`}
       cursor="pointer"
       display="flex"
+      fill="black"
       flex={1}
       flexBasis="10px"
       flexDirection="column"
@@ -152,6 +153,12 @@ export default () => {
           backgroundColor: 'blue'
         }
       }}
+      stroke="black"
+      strokeDasharray={10}
+      strokeDashoffset={10}
+      strokeLinecap="round"
+      strokeMiterlimit={10}
+      strokeWidth={10}
       textAlign="right"
       textDecoration="underline dotted"
       textOverflow="ellipsis"