title: CSS :export blocks
body: <p>I've just had my mind blown a little bit...</p>
  <p>I've been looking into alternative ways to share variables between CSS/JS for the sake of having a single source of reference.</p>
  <p>In <em>half-following</em> one or two tutorials, I've ended up with an <code>:export {}</code> block declaration in a CSS file being referenced in a React Component:</p>
  <p><a href="https://i.stack.imgur.com/l3ZQI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l3ZQI.png" alt="Screenshot of source" /></a></p>
  <p>This example shows the CSS <code>:export</code> declaration, the import reference in my Component and the rendered DOM of my test app.</p>
  <p>Validation services tell me this is not valid CSS (as well as the helpful comments below), even though the syntax resembles a pseudo-selector.</p>
  <p>I found this solution in <a href="https://frontend-cookbook.ack.ee/pages/implementation/SharingVariables.html" rel="nofollow noreferrer">this book</a>. Why I'm both confused and excited is that this solution is compiling, but I'm not leveraging Webpack's <a href="https://github.com/webpack/css-loader" rel="nofollow noreferrer">css-loader</a> or <a href="https://github.com/outpunk/postcss-modules" rel="nofollow noreferrer">PostCSS-Modules</a> as dependencies.</p>
  <p>Is anyone able to provide an explanation as to why <code>:export</code> in CSS or SCSS is behaving like <code>module.exports</code>?</p>