B
B
b4rret2019-05-04 21:35:16
css
b4rret, 2019-05-04 21:35:16

How to setup nesting and other plugins with postcss-preset-env?

Postcss-preset-env plugin options don't work, VSCode swears at unknown @custom-media and @custom-selector properties, nesting, autoprefixer don't work either, although I seem to have connected everything in the options. What am I doing wrong?

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'));
});

Plugin repository

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question