Bug with nesting

[sc0rp10]

Hi, I found strange bug that I cannot reproduce in playground.
I have following foo.css:

.foo {
    color: #000;
    &__bar {
        color: #aaa;
    }

    &__baz {
        color: #bbb;

        &:hover {
            color: #ccc;
        }
    }
}

And next gulpfile.js:

const gulp = require("gulp");
const postcss = require("gulp-postcss");

gulp.task('css', function () {
    return gulp.src('foo.css')
        .pipe( postcss([ require('postcss-cssnext') ]) )
        .pipe( gulp.dest('build/') );
});

package.json:

{
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.0",
    "postcss-cssnext": "^2.11.0"
  }
}

I expect:

.foo {
    color: #000
}
.foo__bar {
    color: #aaa
}
.foo__baz {
    color: #bbb
}
.foo__baz:hover {
    color: #ccc
}

But I found:

.foo__baz {
        color: #bbb;

        &:hover {
            color: #ccc;
        }
}.foo {
    color: #000
}

.foo__bar {
        color: #aaa;
}

What am I doing wrong?
Can you please help me with the right setup?
Thanks!

[MoOx]

I think the notation you used is incorrect, per spec. Poke @jonathantneal

[sc0rp10]

oh, but why playground works as me expected?

[jonathantneal]

Yes, that notation is incorrect. It is using Sassy combinations, which might be best to transpile using a non-spec plugin like postcss-nested. See csstools/postcss-nesting#17 for further information and commentary from the spec author.

[mselmany]

Also, some plugins in the cssnext wasnt updated to v6. It causes the problem.
Try install only updated plugins one by one.
Look updated plugins here : #374

[daniladaniladanila]

@jonathantneal Thanks for your answer!
But I have the same problem as @sc0rp10. My code has been working for two years, and now it is broken, I can't understand why.

And if we with @sc0rp10 use wrong notation, why your own Playground works as we expected?

I updated postcss-nesting manually, but it didn't help

[skipjack]

I ran into the same issue and thought it was caused by postcss-nested however it turned out the issue was with this plugin not being compatible with the latest version of postcss. See webpack-contrib/postcss-loader#210 and #374.

@sc0rp10 if you've updated postcss-loader and other plugins, this is likely the cause of the issue as postcss-loader uses the latest version of postcss behind the scenes.

I put together a small demo repo, mentioned in the postcss-loader issue I linked to, if that helps anyone. It seems we should be tracking #374 for a fix for this.

[peirix]

This bug shows up from time to time even if not using sassy combinations.

.icon {
    width: 45px;
    height: 45px;

    & svg {
        stroke: #fff;
    }

    & div {
        border-color: #000;

        & svg {
            stroke: #000;
        }
    }
}

This outputs to:

.icon div {
        border-color: #000;

        & svg {
            stroke: #000;
        }
}.icon {
    width: 45px;
    height: 45px
}

.icon svg {
        stroke: #fff;
}

So as you can see it's both jumbled (as others have described as well), and also not compiling correctly.

Setup:

"devDependencies": {
    "gulp": "^*",
    "gulp-postcss": "^7.0.0"
  }

var gulp			= require("gulp"),
	postcss 		= require('gulp-postcss'),
	cssnext 		= require('postcss-cssnext');

gulp.task('css', function () {
    var plugins = [
        cssnext({browsers: ['last 2 version']})
    ];
    return gulp.src('./*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

[gcedo]

It's happening to me too. I updated postcss-cssnext during a migration to Webpack 2 to 2.11.0, then I had to downgrade it to 2.9.0 because of #357.

Then both nesting and apply plugins were not working properly anymore. More specifically, nesting would not work if the nesting level was deeper than one, as reported in react-boilerplate/react-boilerplate#853, whereas apply would simply not work.

I managed to fix this issue with the following packages and postcss setup:

    "postcss-apply": "^0.8.0",
    "postcss-cli": "^4.1.0",
    "postcss-cssnext": "2.9.0",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-nesting": "^4.0.1",

const path = require('path');

module.exports = {
  loader: 'postcss-loader',
  options: {
    plugins: () => [
      require('postcss-import')({
        path: [path.resolve(__dirname, '../../src/css')],
      }),
      require('postcss-apply')(),
      require('postcss-cssnext')(),
      require('postcss-nesting')(),
    ],
  },
};

[donaldshen]

I have this issue:

.swiper-slide {
    background-color: white;

    & > img {
        height: 100%;
    }

    & > div {
        padding: 2rem 1rem;

    }
}

compile with gulp-postcss & postcss-cssnext:

.swiper-slide {
    background-color: white
}

.swiper-slide > img {
        height: 100%;
}

It can only compile the first & block. Btw, it's ok with playground.

[MoOx]

Hopefully update of deps in #400 will fix this.

[jdinartejesus]

@MoOx I updated to the new v3 and this still an issue with the nested class it was added as CSS properties. I had to downgrade to v2.11.0 to make it run again.

[MoOx]

Example of #389 (comment) in playground of v3 is not having the bug. Feel free to reopen an issue with a proper detailed example and config.

[jdinartejesus]

@MoOx I'm having when using something merge class names meaning:

.swiper {
    &-slide {
      background-color: blue; 
   }
}

I'm using Webpack with the biolarplate from Vuejs and the output was:

.swiper {
    &-slide { background-color: blue
    };
}