fannypack-v5

<!doctype html> <html lang="en"> <head> <title>Code coverage report for src/utils/useStyle.ts</title> <meta charset="utf-8" /> <link rel="stylesheet" href="../../prettify.css" /> <link rel="stylesheet" href="../../base.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type='text/css'> .coverage-summary .sorter { background-image: url(../../sort-arrow-sprite.png); } </style> </head> <body> <div class='wrapper'> <div class='pad1'> <h1> <a href="../../index.html">All files</a> / <a href="index.html">src/utils</a> useStyle.ts </h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 95.65% Statements 66/69 </div> <div class='fl pad1y space-right2'> 88.89% Branches 32/36 </div> <div class='fl pad1y space-right2'> 100% Functions 12/12 </div> <div class='fl pad1y space-right2'> 95.59% Lines 65/68 </div> </div> Press n or j to go to the next uncovered block, b, p or k for the previous block. </div> <div class='status-line high'></div> <pre><table class="coverage"> <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a> <a name='L2'></a><a href='#L2'>2</a> <a name='L3'></a><a href='#L3'>3</a> <a name='L4'></a><a href='#L4'>4</a> <a name='L5'></a><a href='#L5'>5</a> <a name='L6'></a><a href='#L6'>6</a> <a name='L7'></a><a href='#L7'>7</a> <a name='L8'></a><a href='#L8'>8</a> <a name='L9'></a><a href='#L9'>9</a> <a name='L10'></a><a href='#L10'>10</a> <a name='L11'></a><a href='#L11'>11</a> <a name='L12'></a><a href='#L12'>12</a> <a name='L13'></a><a href='#L13'>13</a> <a name='L14'></a><a href='#L14'>14</a> <a name='L15'></a><a href='#L15'>15</a> <a name='L16'></a><a href='#L16'>16</a> <a name='L17'></a><a href='#L17'>17</a> <a name='L18'></a><a href='#L18'>18</a> <a name='L19'></a><a href='#L19'>19</a> <a name='L20'></a><a href='#L20'>20</a> <a name='L21'></a><a href='#L21'>21</a> <a name='L22'></a><a href='#L22'>22</a> <a name='L23'></a><a href='#L23'>23</a> <a name='L24'></a><a href='#L24'>24</a> <a name='L25'></a><a href='#L25'>25</a> <a name='L26'></a><a href='#L26'>26</a> <a name='L27'></a><a href='#L27'>27</a> <a name='L28'></a><a href='#L28'>28</a> <a name='L29'></a><a href='#L29'>29</a> <a name='L30'></a><a href='#L30'>30</a> <a name='L31'></a><a href='#L31'>31</a> <a name='L32'></a><a href='#L32'>32</a> <a name='L33'></a><a href='#L33'>33</a> <a name='L34'></a><a href='#L34'>34</a> <a name='L35'></a><a href='#L35'>35</a> <a name='L36'></a><a href='#L36'>36</a> <a name='L37'></a><a href='#L37'>37</a> <a name='L38'></a><a href='#L38'>38</a> <a name='L39'></a><a href='#L39'>39</a> <a name='L40'></a><a href='#L40'>40</a> <a name='L41'></a><a href='#L41'>41</a> <a name='L42'></a><a href='#L42'>42</a> <a name='L43'></a><a href='#L43'>43</a> <a name='L44'></a><a href='#L44'>44</a> <a name='L45'></a><a href='#L45'>45</a> <a name='L46'></a><a href='#L46'>46</a> <a name='L47'></a><a href='#L47'>47</a> <a name='L48'></a><a href='#L48'>48</a> <a name='L49'></a><a href='#L49'>49</a> <a name='L50'></a><a href='#L50'>50</a> <a name='L51'></a><a href='#L51'>51</a> <a name='L52'></a><a href='#L52'>52</a> <a name='L53'></a><a href='#L53'>53</a> <a name='L54'></a><a href='#L54'>54</a> <a name='L55'></a><a href='#L55'>55</a> <a name='L56'></a><a href='#L56'>56</a> <a name='L57'></a><a href='#L57'>57</a> <a name='L58'></a><a href='#L58'>58</a> <a name='L59'></a><a href='#L59'>59</a> <a name='L60'></a><a href='#L60'>60</a> <a name='L61'></a><a href='#L61'>61</a> <a name='L62'></a><a href='#L62'>62</a> <a name='L63'></a><a href='#L63'>63</a> <a name='L64'></a><a href='#L64'>64</a> <a name='L65'></a><a href='#L65'>65</a> <a name='L66'></a><a href='#L66'>66</a> <a name='L67'></a><a href='#L67'>67</a> <a name='L68'></a><a href='#L68'>68</a> <a name='L69'></a><a href='#L69'>69</a> <a name='L70'></a><a href='#L70'>70</a> <a name='L71'></a><a href='#L71'>71</a> <a name='L72'></a><a href='#L72'>72</a> <a name='L73'></a><a href='#L73'>73</a> <a name='L74'></a><a href='#L74'>74</a> <a name='L75'></a><a href='#L75'>75</a> <a name='L76'></a><a href='#L76'>76</a> <a name='L77'></a><a href='#L77'>77</a> <a name='L78'></a><a href='#L78'>78</a> <a name='L79'></a><a href='#L79'>79</a> <a name='L80'></a><a href='#L80'>80</a> <a name='L81'></a><a href='#L81'>81</a> <a name='L82'></a><a href='#L82'>82</a> <a name='L83'></a><a href='#L83'>83</a> <a name='L84'></a><a href='#L84'>84</a> <a name='L85'></a><a href='#L85'>85</a> <a name='L86'></a><a href='#L86'>86</a> <a name='L87'></a><a href='#L87'>87</a> <a name='L88'></a><a href='#L88'>88</a> <a name='L89'></a><a href='#L89'>89</a> <a name='L90'></a><a href='#L90'>90</a> <a name='L91'></a><a href='#L91'>91</a> <a name='L92'></a><a href='#L92'>92</a> <a name='L93'></a><a href='#L93'>93</a> <a name='L94'></a><a href='#L94'>94</a> <a name='L95'></a><a href='#L95'>95</a> <a name='L96'></a><a href='#L96'>96</a> <a name='L97'></a><a href='#L97'>97</a> <a name='L98'></a><a href='#L98'>98</a> <a name='L99'></a><a href='#L99'>99</a> <a name='L100'></a><a href='#L100'>100</a> <a name='L101'></a><a href='#L101'>101</a> <a name='L102'></a><a href='#L102'>102</a> <a name='L103'></a><a href='#L103'>103</a> <a name='L104'></a><a href='#L104'>104</a> <a name='L105'></a><a href='#L105'>105</a> <a name='L106'></a><a href='#L106'>106</a> <a name='L107'></a><a href='#L107'>107</a> <a name='L108'></a><a href='#L108'>108</a> <a name='L109'></a><a href='#L109'>109</a> <a name='L110'></a><a href='#L110'>110</a> <a name='L111'></a><a href='#L111'>111</a> <a name='L112'></a><a href='#L112'>112</a> <a name='L113'></a><a href='#L113'>113</a> <a name='L114'></a><a href='#L114'>114</a> <a name='L115'></a><a href='#L115'>115</a> <a name='L116'></a><a href='#L116'>116</a> <a name='L117'></a><a href='#L117'>117</a> <a name='L118'></a><a href='#L118'>118</a> <a name='L119'></a><a href='#L119'>119</a> <a name='L120'></a><a href='#L120'>120</a> <a name='L121'></a><a href='#L121'>121</a> <a name='L122'></a><a href='#L122'>122</a> <a name='L123'></a><a href='#L123'>123</a> <a name='L124'></a><a href='#L124'>124</a> <a name='L125'></a><a href='#L125'>125</a> <a name='L126'></a><a href='#L126'>126</a> <a name='L127'></a><a href='#L127'>127</a> <a name='L128'></a><a href='#L128'>128</a> <a name='L129'></a><a href='#L129'>129</a> <a name='L130'></a><a href='#L130'>130</a> <a name='L131'></a><a href='#L131'>131</a> <a name='L132'></a><a href='#L132'>132</a> <a name='L133'></a><a href='#L133'>133</a> <a name='L134'></a><a href='#L134'>134</a> <a name='L135'></a><a href='#L135'>135</a> <a name='L136'></a><a href='#L136'>136</a> <a name='L137'></a><a href='#L137'>137</a> <a name='L138'></a><a href='#L138'>138</a> <a name='L139'></a><a href='#L139'>139</a> <a name='L140'></a><a href='#L140'>140</a> <a name='L141'></a><a href='#L141'>141</a> <a name='L142'></a><a href='#L142'>142</a> <a name='L143'></a><a href='#L143'>143</a> <a name='L144'></a><a href='#L144'>144</a> <a name='L145'></a><a href='#L145'>145</a> <a name='L146'></a><a href='#L146'>146</a> <a name='L147'></a><a href='#L147'>147</a> <a name='L148'></a><a href='#L148'>148</a> <a name='L149'></a><a href='#L149'>149</a> <a name='L150'></a><a href='#L150'>150</a> <a name='L151'></a><a href='#L151'>151</a> <a name='L152'></a><a href='#L152'>152</a> <a name='L153'></a><a href='#L153'>153</a> <a name='L154'></a><a href='#L154'>154</a> <a name='L155'></a><a href='#L155'>155</a> <a name='L156'></a><a href='#L156'>156</a> <a name='L157'></a><a href='#L157'>157</a> <a name='L158'></a><a href='#L158'>158</a> <a name='L159'></a><a href='#L159'>159</a> <a name='L160'></a><a href='#L160'>160</a> <a name='L161'></a><a href='#L161'>161</a> <a name='L162'></a><a href='#L162'>162</a> <a name='L163'></a><a href='#L163'>163</a> <a name='L164'></a><a href='#L164'>164</a> <a name='L165'></a><a href='#L165'>165</a> <a name='L166'></a><a href='#L166'>166</a> <a name='L167'></a><a href='#L167'>167</a> <a name='L168'></a><a href='#L168'>168</a> <a name='L169'></a><a href='#L169'>169</a> <a name='L170'></a><a href='#L170'>170</a> <a name='L171'></a><a href='#L171'>171</a> <a name='L172'></a><a href='#L172'>172</a> <a name='L173'></a><a href='#L173'>173</a> <a name='L174'></a><a href='#L174'>174</a> <a name='L175'></a><a href='#L175'>175</a> <a name='L176'></a><a href='#L176'>176</a> <a name='L177'></a><a href='#L177'>177</a> <a name='L178'></a><a href='#L178'>178</a> <a name='L179'></a><a href='#L179'>179</a> <a name='L180'></a><a href='#L180'>180</a> <a name='L181'></a><a href='#L181'>181</a> <a name='L182'></a><a href='#L182'>182</a> <a name='L183'></a><a href='#L183'>183</a> <a name='L184'></a><a href='#L184'>184</a> <a name='L185'></a><a href='#L185'>185</a> <a name='L186'></a><a href='#L186'>186</a> <a name='L187'></a><a href='#L187'>187</a> <a name='L188'></a><a href='#L188'>188</a> <a name='L189'></a><a href='#L189'>189</a> <a name='L190'></a><a href='#L190'>190</a> <a name='L191'></a><a href='#L191'>191</a> <a name='L192'></a><a href='#L192'>192</a></td><td class="line-coverage quiet">                  75x 75x 75x                                     75x                                             75x 75x   75x               3x 3x 3x           24x 24x 23x   1x       321x 321x 301x   20x       317x 317x 310x   7x       48x 48x 48x           15x 15x 15x           7655x   7655x 7655x 7655x 7655x 1157x 1157x 8x   1157x     7655x 1161x 1161x 1099x   1161x 5x 5x               1156x 1106x 1106x 3x   1106x 24x   1106x 321x   1106x 317x   1106x 48x   1106x 15x   1106x   1102x         4x                     1156x           7655x       7650x 7650x    </td><td class="text"><pre class="prettyprint lang-js">import * as React from 'react'; import _get from 'lodash/get'; import _kebabCase from 'lodash/kebabCase';   import { ThemeContext, css } from '../styled'; import { border, borderRadius, breakpoint, fontSize, palette, space, fontWeight } from './theme';   import { cssProps as cssPropsMap, pickCSSProps } from './cssProps';   const borderAttributes = ['border']; const borderRadiusAttributes = ['borderRadius']; const colorAttributes = [ 'color', 'backgroundColor', 'borderBlockEndColor', 'borderBlockStartColor', 'borderBottomColor', 'borderColor', 'borderInlineEndColor', 'borderInline-startColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'borderBottomColor', 'caretColor', 'columnRuleColor', 'outlineColor', 'textDecorationColor', 'textEmphasisColor' ]; const spaceAttributes = [ 'margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'marginX', 'marginY', 'padding', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'paddingX', 'paddingY', 'top', 'left', 'bottom', 'right', 'grid-gap', 'grid-column-gap', 'grid-row-gap' ]; const fontSizeAttributes = ['fontSize']; const fontWeightAttributes = ['fontWeight'];   const attributeMaps = { marginY: ['marginTop', 'marginBottom'], paddingY: ['paddingTop', 'paddingBottom'], marginX: ['marginLeft', 'marginRight'], paddingX: ['paddingLeft', 'paddingRight'] };   function getBorderValue({ theme, value }) { const borderValue = border(value)({ theme }); Eif (borderValue) { return `${borderValue.width} solid ${borderValue.color}`; } return value; }   function getBorderRadiusValue({ theme, value }) { const borderRadiusValue = borderRadius(value)({ theme }); if (borderRadiusValue) { return borderRadiusValue; } return value; }   function getColorValue({ theme, value }) { const color = palette(value)({ theme }); if (color) { return color; } return value; }   function getSpaceValue({ theme, value }) { const spacing = space(value)({ theme }); if (spacing) { return `${spacing}rem`; } return value; }   function getFontSizeValue({ theme, value }) { const size = fontSize(value)({ theme }); Eif (size) { return `${size}rem`; } return value; }   function getFontWeightValue({ theme, value }) { const weight = fontWeight(value)({ theme }); Eif (weight) { return weight; } return value; }   function getStyleFromProps(props, theme) { const cssProps = pickCSSProps(props);   let style = { ...cssProps }; Eif (style) { let styleEntries = Object.entries(style); styleEntries = styleEntries.reduce((prevStyle, [attribute, value]) => { let entries = [[attribute, value]]; if (attributeMaps[attribute]) { entries = attributeMaps[attribute].map(attribute => [attribute, value]); } return [...prevStyle, ...entries]; }, []);   style = styleEntries.reduce((prevStyle, [attribute, value]) => { let newValue = value; if (typeof newValue === 'string') { newValue = { default: value }; } if (attribute.includes('_')) { const pseudoSelector = cssPropsMap[attribute]; return css` ${prevStyle};   ${pseudoSelector} { ${getStyleFromProps(value, theme)} } `; } const newStyle = Object.entries(newValue || {}).reduce((prevStyle, [bp, value]) => { let newValue = value; if (borderAttributes.includes(attribute)) { newValue = getBorderValue({ theme, value }); } if (borderRadiusAttributes.includes(attribute)) { newValue = getBorderRadiusValue({ theme, value }); } if (colorAttributes.includes(attribute)) { newValue = getColorValue({ theme, value }); } if (spaceAttributes.includes(attribute)) { newValue = getSpaceValue({ theme, value }); } if (fontSizeAttributes.includes(attribute)) { newValue = getFontSizeValue({ theme, value }); } if (fontWeightAttributes.includes(attribute)) { newValue = getFontWeightValue({ theme, value }); } if (bp === 'default') { // @ts-ignore return css` ${prevStyle} ${_kebabCase(attribute)}: ${newValue} !important; `; } return css` ${prevStyle}; ${breakpoint( bp, // @ts-ignore css` ${_kebabCase(attribute)}: ${newValue} !important; ` )({ theme })}; `; }, css``); return css` ${prevStyle} ${newStyle}; `; }, css``); }   return style; }   export function useStyle(props) { const theme = React.useContext(ThemeContext); return getStyleFromProps(props, theme); }  </pre></td></tr> </table></pre> <div class='push'></div> </div> <div class='footer quiet pad2 space-top1 center small'> Code coverage generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Mon Mar 09 2020 00:30:47 GMT+1100 (Australian Eastern Daylight Time) </div> </div> <script src="../../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../../sorter.js"></script> <script src="../../block-navigation.js"></script> </body> </html>