multi-level nest in postcss doesn't work

Question

when I use postcss-loader and postcss-cssnext plugin, the css-class can be effect in the front of the second nest, in the third nest will doesn't work

style.css

    .root {
        background-color: #ccc;

        & .header {
            height: 60px;
            background-color: #dcdcdc;
        }

        & .content {
            border: 1px solid red;

            & .test { /* doesn't work */
                background-color: #00f;
                height: 200px;
            }
        }
    }

app.tsx

    <div className={style.root}>
        <div className={style.header}>
          Hello test
        </div>
        <div className={style.content}>
            <div className={style.test}>

            </div>
        </div>
    </div>

postcss-loader config

    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true,
        sourceComments: true,
        plugins: [
          require('postcss-import')({
            root: path.join(__dirname, './'),
            path: [ path.join(__dirname, './src/toolkit') ]
          }),
          require('postcss-at-rules-variables')({
            variables: makeAtRulesVariables(injectedCssVariables)
          }),
          require('postcss-modules-values'),
          require('postcss-mixins')(),
          require('postcss-each')(),
          require('postcss-cssnext')({
            features: {
              customProperties: {
                variables: injectedCssVariables
              }
            }
          }),
          require('postcss-reporter')({
            clearMessages: true
          })
        ]
      }
    }

Answer 1

Can you please make these changes in your stylesheet and config file.

style.css

.root {
    background-color: #ccc;

    .header {
        height: 60px;
        background-color: #dcdcdc;
    }

    .content {
        border: 1px solid red;

        .test { /* doesn't work */
            background-color: #00f;
            height: 200px;
        }
    }
}

postcss-loader config

{
  loader: 'postcss-loader',
  options: {
    sourceMap: true,
    sourceComments: true,
    plugins: [
      require('postcss-import')({
        root: path.join(__dirname, './'),
        path: [ path.join(__dirname, './src/toolkit') ]
      }),
      require('postcss-at-rules-variables')({
        variables: makeAtRulesVariables(injectedCssVariables)
      }),
      require('postcss-mixins')(),
      require('postcss-each')(),
      require('postcss-cssnext')({
        features: {
          customProperties: {
            variables: injectedCssVariables
          }
        }
      }),
      require('postcss-modules-values'),
      require('postcss-reporter')({
        clearMessages: true
      })
    ]
  }
}