title: Reference global class names from within a css module
body: <p>Picture a more traditional web application that is slowly introducing a React component in one page that is complex enough to need it.</p>
  
  <p>We're developing this new UI with Webpack, and we're using css modules for all the new css that the new UI needs. But we still need to reuse some css that's global and provided in the app via a traditional css stylesheet linked in the html.</p>
  
  <p>Therefore we need in our css modules to occasionally write rules that refer to a css class in the global namespace, not a class that's locally scoped to it and therefore converted to a more gem-like long css class name when the app is run:</p>
  
  <pre><code>.container {
    // rules for container
  }
  .container.pull-right {
    // rules for when the container element also has the pull-right class
  }
  </code></pre>
  
  <p>In the above example, <code>container</code> is meant to be a css class that the css module will contextualize to the particular component using this module.</p>
  
  <p>But <code>pull-right</code> is a class that exist in a css file available in the page, but not processed by css modules or Webpack. Therefore we need a way (a syntax probably) to tell css modules "hey, leave <code>pull-right</code> as is in your output. Do not mess with it or try to BEM the s**t out of it".</p>
  
  <p>I imagine something like this should exist, but I haven't been able to find it so far by googling around.</p>