postcss-cssnextといういプラグインについて

Question

postcss-cssnextといういプラグインをサイトの説明通りに入れたのですが、これは、
下記一覧のきのう すべてがパッケージになっていると考えてよろしいでしょうか？
下記のようにCSSのネストを試したのですが、トランスパイルしてもうまくいきませんでした。

・CSS

.logo {
color: var(--brand-color);
width: 3rem;
	.button {
		size: 4rem 5rem;
	}
}

・ある機能（足りないおすすめの機能はありますか？）
http://cssnext.io/より

automatic vendor prefixes custom properties & var() reduced calc() custom media queries media queries ranges custom selectors nesting color() function hwb() function gray() function #rrggbbaa colors rgba function (rgb fallback) rebeccapurple color font-variant property filter property (svg fallback) initial value rem unit (px fallback) :any-link pseudo-class :matches pseudo-class :not pseudo-class (to l.3) ::pseudo syntax (: fallback) overflow-wrap property (word-wrap fallback)

//gulpfile.js

var gulp = require('gulp');              //gulpをインポート
var postcss = require('gulp-postcss');   //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
 
gulp.task('css', function () {           //”css”タスクを登録
  var plugins = [  
  cssnext                      //一旦空の配列を作成
  ];
  return gulp.src('./src-before/*.css')         //src-before下にある.cssファイルを指定
    .pipe(postcss(plugins))              //PostCSSにファイルを処理してもらう
    .pipe(gulp.dest('./dest-after'));          //生成されたCSSをdest-after下に配置
});

これはセットなので、POSTCSSで必要なものだけ入れるよりはだいぶ重いのでしょうね。