nest class not work

[oliver]

module: {
   .....
   rules: [
      {
        test: /\.(css|postcss)$/,
        use: [
           {
                loader: 'css-loader',
                 options: {
                     minimize: true,
                 },
             },
             {
                 loader: 'postcss-loader',
                 options: {
                       plugins: function () {
                           return [
                                require('postcss-nesting')(),
                                require('postcss-import')({
                                    path: [
                                         './src'
                                     ]
                                 }),
                                 require('postcss-flex-fallback')(),
                                 require('postcss-px2rem')({
                                      remUnit: 75,
                                 }),
                                 require('autoprefixer')({ browsers: ['last 2 versions'] }),
                             ]
                       },
                },
           },
          { 
              loader: 'style-loader',
          }]
      },
     ...
    ]
  },

in a.postcss file

.main {
  background: #f1f2f4;
  padding: 10px;
  height: 90vh;
  width: 375px;
  margin: 0 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  box-shadow: inset 0px 0px 5px 1px #ccc;

  & .nothingTip {
    height: 88vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6rem;
    color: #EAE9E9;
  }
}

after compiling...

[Dan Cseko]

Have you tried switching the order of the postcss plugins? The postcss-import README.md suggests that it should be first in the list.

[Mattia Astorino]

Same problem here:
MoOx/postcss-cssnext#406

---

Given the following CSS snippet:

.icon {
  
  @nest .small & {
    font-size: 16px;
  }
}

.positive {
  background-color: green;

  &.outline {
    background-color: transparent;
  }
}

I expected the nested .positive.outline rule to be transformed to:

.positive.outline {
  background-color: transparent;
}

But it fails silently.

You can also reproduce this by copy/pasting the snippet into the cssnext playground.

However, if you add anything (including comments) to the empty .icon rule it works as expected:

.icon {
  /* whatever */

  @nest .small & {
    font-size: 16px;
  }
}

.positive {
  background-color: green;

  &.outline {
    background-color: transparent;
  }
}

---

I suspect this is related.

This code:

.my-style {
  padding: 1.5em;

  @nest :global(.media-mobile) & {
    padding: 1em;
  }

  @nest :global(.media-narrow) & {
    padding: 0.6em 0.5em;
  }

  & .sub-style {
    font-size: 30px;
    font-family: accent-light-font;
  }
}

results in:

.my-style {
  padding: 1.5em
}
:global(.media-mobile) .my-style {
  padding: 1em
}
:global(.media-narrow) .my-style {
  padding: 0.6em 0.5em
}
.my-style {
  & .sub-style {
    font-size: 30px;
    font-family: accent-light-font;
  }
}

but this, with just one @nest:

.my-style {
  padding: 1.5em;

  @nest :global(.media-mobile) & {
    padding: 1em;
  }

  & .sub-style {
    font-size: 30px;
    font-family: accent-light-font;
  }
}

works properly:

.my-style {
  padding: 1.5em
}
:global(.media-mobile) .my-style {
  padding: 1em
}
.my-style .sub-style {
  font-size: 30px;
  font-family: accent-light-font;
}

[Jonathan Neal]

Fixed by #45