Getting mixed output

[atelierseneca]

I'm a beginner with PostCSS and I can't figure out why I get both nested and unnested output.

I have the following setup:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var atImport = require('postcss-import');
var postcssMixins = require("postcss-mixins");
var postcssSimpleVars = require("postcss-simple-vars");
var postcssNested = require("postcss-nested");
var sourcemaps = require('gulp-sourcemaps');

gulp.task('css', function () {
  var plugins = [
    atImport,
        postcssMixins,
        postcssSimpleVars,
        postcssNested
  ];
  return gulp.src('./src/style.css')
    .pipe(sourcemaps.init())
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('.'));
});

My input is:

.title {
  color: blue;

 .sub {
    opacity: 0.5
  }
}

The output is:

.title {
  color: blue;

 .title .sub {
    opacity: 0.5
  }
}

.title .sub {
    opacity: 0.5
  }

The output should be:

.title {
  color: blue;
}

.title .sub {
    opacity: 0.5
  }

Is there something I'm missing? Thanks!

[atelierseneca]

Fixed it. I was using an old version of PostCSS. The issue is fixed.

[ai]

Good work. It was a strange big and I am not sure that I find reason so quickly as you did.