title: How to reference multiple selectors (mix of local and global) with js css-modules?
body: <p>I would like to know how I could accomplish the following. I am using Ant Design framework in my react project together with css-modules bundling.</p>
  
  <p>What I am looking to do is select some Ant classes based on a parent divs class thats generated using css-modules.</p>
  
  <p>Currently I have this which isnt right:</p>
  
  <pre><code>.container
      flex-grow: 1 !important
  
  .container
      \:global &amp;.ant-layout-sider-collapsed
          .anticon
              font-size: 16px
              margin-left: 8px
          .nav-text
              display: none
          .ant-menu-submenu-vertical &gt; .ant-menu-submenu-title:after
              display: none
  </code></pre>
  
  <p>This produces the following:</p>
  
  <pre><code>.Navigation__container___1S9AX {
    flex-grow: 1 !important; }
  
  .container.ant-layout-sider-collapsed .anticon {
    font-size: 16px;
    margin-left: 8px; }
  
  .container.ant-layout-sider-collapsed .nav-text {
    display: none; }
  
  .container.ant-layout-sider-collapsed .ant-menu-submenu-vertical &gt; .ant-menu-submenu-title:after {
    display: none; 
  </code></pre>
  
  <p>What I am looking to get is this:</p>
  
  <pre><code>.Navigation__container___1S9AX {
    flex-grow: 1 !important; }
  
  .Navigation__container___1S9AX.ant-layout-sider-collapsed .anticon {
    font-size: 16px;
    margin-left: 8px; }
  
  .Navigation__container___1S9AX.ant-layout-sider-collapsed .nav-text {
    display: none; }
  
  .Navigation__container___1S9AX.ant-layout-sider-collapsed .ant-menu-submenu-vertical &gt; .ant-menu-submenu-title:after {
    display: none; 
  </code></pre>
  
  <p>Help is appreciated, ive tried googling for more information on how this works in css-modules but couldnt find much information.</p>