How to reference multiple selectors (mix of local and global) with js css-modules?

Question

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.

What I am looking to do is select some Ant classes based on a parent divs class thats generated using css-modules.

Currently I have this which isnt right:

.container
    flex-grow: 1 !important

.container
    \:global &.ant-layout-sider-collapsed
        .anticon
            font-size: 16px
            margin-left: 8px
        .nav-text
            display: none
        .ant-menu-submenu-vertical > .ant-menu-submenu-title:after
            display: none

This produces the following:

.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 > .ant-menu-submenu-title:after {
  display: none; 

What I am looking to get is this:

.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 > .ant-menu-submenu-title:after {
  display: none; 

Help is appreciated, ive tried googling for more information on how this works in css-modules but couldnt find much information.

Answer 1

Below is the proper syntax:

.container {
    &:global(.ant-layout-sider-collapsed) {
         :global(.anticon) {
              //anticon css
         }
    }
}