Как настроить nesting и другие плагины с postcss-preset-env?

Question

[b4rret]

Не работают опции плагина postcss-preset-env, VSCode ругается на неизвестные свойства @custom-media и @custom-selector, вложенность, автопрефиксер тоже не срабатывают, хотя в опциях вроде все подключил. Что делаю не так?

const gulp = require('gulp'),
  postcss = require('gulp-postcss'),
  postcssPresetEnv = require('postcss-preset-env'),
  gutil = require('gulp-util'),
  sourcemaps = require('gulp-sourcemaps'),

  source = 'process/css/',
  dest = 'builds/nextgen/';

gulp.task('css', function() {
  gulp.src(source + 'style.css')
  .pipe(sourcemaps.init())
  .pipe(postcss([
    require('postcss-partial-import')({prefix: '_', extension: '.css'}),
    postcssPresetEnv({
      features: {
        'nesting-rules': true,
        'color-mod-function': true,
        'custom-selectors': true,
        'custom-media-queries': true,
        'autoprefixer': true
      }
      // ,importFrom: './process/css/_variables.css'
    })
  ]))
  .on('error', gutil.log)
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest(dest + 'css'));
});

Репозиторий плагина

Comments

[sim3x]

Аутопрефиксер не нужен если не работаете с <ие11
Используйте sass
Зачем импортировать что-то если при сборке все и так нужно собирать в один файл?

[b4rret]

sim3x, Я пробую PostCSS. Чтобы полностью отказаться от препроцессоров, иначе в чем тогда смысл, все те же задачи можно выполнить и на sass-е. Данный пример составлен исходя из документации, если использовать cssnext, то всё отробатывает корректно, но в доке написано что лучше уже переходить на postcss-preset-env

[sim3x]

b4rret,
Если есть лишнее время - пробуйте

пост такой же препроцессор, как и все остальные

[b4rret]

sim3x, ну пока что я бы не сказал что такой же )) с другими препроцами никогда не было проблем ) Тут же не понятно почему не работает, что то не так делаю может.

[sim3x]

b4rret, ))
Ето одна из причин почему я его недолюбливаю