title: How to spread into export
body: <p>I have a javascript file where I simply define the css classes so I can use them through out my code and can maintain them in one place, like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>//css.js
  
  const pre = 'grc-';
  
  const backdropcss = {
    backdrop: `${pre}backdrop`,
  };
  const buttoncss = {
    btn: `${pre}btn`,
    btnSm: `${pre}btn--sm`,
    btnSecondary: `${pre}btn--secondary`,
    btnTertiary: `${pre}btn--tertiary`,
    btnLink: `${pre}btn--link`,
    btnFull: `${pre}btn--full`,
    btnHalf: `${pre}btn--half`,
    btnThird: `${pre}btn--third`,
  };
  
  //etc.
  </code></pre>
  
  <p>I am using it in two ways. For my component library I like to isolate the css names for the components like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>export {
    buttoncss,
    alertcss,
    checkboxcss,
    formcss,
    radioboxcss,
    drawercss,
    backdropcss,
    rangecss,
  };
  </code></pre>
  
  <p>So I can import only what I need.<br>
  But I also want a default export where all the definitions are combined. 
   (Note: so I <strong>don't</strong> want to use them as <code>cssjs.buttoncss</code> but rather as <code>cssjs</code> which has all the sub objects spread into)</p>
  
  <p>To create the object I spread all the sub objects and then I export it as default, like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>const cssjs = {
    ...buttoncss,
    ...alertcss,
    ...checkboxcss,
    ...formcss,
    ...radioboxcss,
    ...drawercss,
    ...backdropcss,
    ...rangecss,
  };
  
  export default cssjs;
  </code></pre>
  
  <p>Now, every time I create a new components it feels redundant to add it twice in those objects. So I wanted to create an <code>all</code> object:</p>
  
  <pre class="lang-js prettyprint-override"><code>const all = {
    buttoncss,
    alertcss,
    checkboxcss,
    formcss,
    radioboxcss,
    drawercss,
    backdropcss,
    rangecss,
  };
  </code></pre>
  
  <p>And spread them into the (named) export(s):</p>
  
  <pre class="lang-js prettyprint-override"><code>export { ...all}
  </code></pre>
  
  <p>Then I'll write some code to loop through the <code>all</code> object and spread every sub object into one big object (to create the <code>cssjs</code> object from before).</p>
  
  <p>But before I was able to write that last code I noticed that the <code>export { ...all}</code> syntax was not supported. Is there any way to accomplish what I want, or do I have to write everything twice like I do now?</p>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>Re-using variables if you set them as exports when declaring threw me off guard. This my code now:</p>
  
  <pre class="lang-js prettyprint-override"><code>//more definitions
  
  export const formcss = {
    formGroup: `${pre}form--group`,
  };
  
  export const radioboxcss = {
    radio: `${pre}radio`,
    radioStacked: `${pre}radio--stacked`,
  };
  
  export default {
    ...buttoncss,
    ...alertcss,
    ...checkboxcss,
    ...formcss,
    ...radioboxcss,
    ...drawercss,
    ...backdropcss,
    ...rangecss,
  };
  </code></pre>
  
  <p>This solved my particular question, but still makes me wonder why it's not possible to spread an object into an export declaration so you can export everything in the object as named within the object. So for other people who might come here through the title:</p>
  
  <p>Why can I do this</p>
  
  <pre class="lang-js prettyprint-override"><code>const one = 1
  const two = 2
  
  export { one, two, }
  </code></pre>
  
  <p>But not this</p>
  
  <pre class="lang-js prettyprint-override"><code>const one = 1
  const two = 2 
  const numbers = { one, two, }
  
  export { ...numbers, }
  </code></pre>