title: How to make an optionally invoked function?
body: <p>I have module called styles. </p>
  
  <pre><code>export default (props = {}) =&gt; ({
  
    tile: {
      width: props.width,
      listStyle: "none"
    },
   banner: {
    color: 'red',
   }
  })
  </code></pre>
  
  <p>If I <code>import styles from './styles.js;</code> I basically want to be able to two things:  </p>
  
  <p>get tile styles like this: <code>styles({width:}).tile</code> </p>
  
  <p>and get the banner styles like this: <code>styles.banner</code>, so without calling it like <code>styles().banner</code>.</p>
  
  <p>How to do this?</p>
  
  <p>EDIT: I'm so sorry, failed to make my question clear. The object <em>defined</em> should always have the structure as: </p>
  
  <pre><code>tile: {
      width: props.width,
      listStyle: "none"
    },
   banner: {
    color: 'red',
   }
  </code></pre>
  
  <p>The function that returns this object can look whatever you want to. </p>