How to use postcss

postcss([autoprefixer]).process(result.css, { from: src }).then(res => {
 res.warnings().forEach(warn => {
  console.warn(warn.toString())
 })
 fs.writeFile(dest, res.css, (err) => {
  if (err) {
   throw err

  const ctx = postcss(opts.plugins);
  const out = yield ctx.process(file.data.toString(), opts);
  file.data = Buffer.from(out.css); // write new data
} catch (err) {

var saved;
var percent;
cssnano.process(String(file.contents), _.assign({
 map: false,
 zindex: false,
 from: file.relative,
 to: file.relative
}, opts)).then(function (result) {
 file.contents = new Buffer(result.css);
 optimizedSize = file.contents.length;

cssProcessor: cssnano({
 safe: true
}),

}), new OptimizeCssAssetsPlugin({
 assetNameRegExp: /\.css$/g,
 cssProcessor: cssnano({
  safe: true
 }),

gulp.task('vendor:styles', () =>
 gulp.src(`${src}/assets/styles/vendor/vendor.scss`)
  .pipe(when(!production, sourcemaps.init()))
  .pipe(sass({ importer: moduleImporter() }))
  .pipe(postcss([
   autoprefixer({ browsers }),
  ]))
  .pipe(concat('vendor.css'))
  .pipe(when(!production, sourcemaps.write('.')))
  .on('error', onError)
  .pipe(gulp.dest(`${dist}/assets/css`))
)

extractTextWebpackPluginInstance.extract({
            use: [
              { loader: 'css-loader', options: { minimize: true, importLoaders: 1 } },
              { loader: 'postcss-loader', options: { ident: 'postcss', plugins: (loader) => [ postcssAutoprefixer({browsers: ['since 2012']}) ] } },
              { loader: 'sass-loader' }
            ],
            fallback: 'style-loader',
            publicPath: publicPathName
          })

function getCommonStyleLoaders(enableModules) {
  let cssOptions = {};
  if (enableModules) {
    cssOptions = { sourceMap: true, modules: true, importLoaders: 1, localIdentName: '[name]__[local]___[hash:base64:5]' };
  }
  return [
    { loader: 'css-loader', options: cssOptions },
    { loader: 'postcss-loader', options: { sourceMap: true, plugins: () => [autoprefixer({ browsers: ['last 2 versions'] })] } },
    { loader: 'resolve-url-loader' },
  ];
}

fn() {
  return payloads.map(
   ({ payload, options }) => processor.process(payload, options).css
  );
 }

gulp.task('css', function () {
  return gulp.src('./test/src/css/**/*.css')
    .pipe(postcss([lazyimagecss({
      imagePath: ['../img', '../slice']
    })]))
    .pipe(gulp.dest('./test/dist/css'));
});

async processCss(assetName, asset, assets) {
  let css = asset.source();
  css = await postcss([autoprefixer({browsers: this.options.browsers})]).process(css).css;

  const result = csso.minify(css, Object.assign({filename: assetName}, this.options));
  css = result.css;

  if (this.options.sourceMap) {
   assets.setAsset(`${assetName}.map`, result.map.toString());
   css += `/*# sourceMappingURL=${path.basename(assetName)}.map */`;
  }

  return css;
 }

// sass

gulp.task("sass", function() {
 const postcss = require("gulp-postcss");
 const autoprefixer = require("autoprefixer");
 const sass = require("gulp-sass");

 return gulp.src("./public/app/style.scss")
  .pipe(sass().on("error", sass.logError))
  .pipe(postcss([ autoprefixer({ browsers: ["last 8 Chrome versions"] }) ]))
  .pipe(gulp.dest("./public/app/"));
});

cssProcessor: cssnano({
 safe: true
}),

}), new OptimizeCssAssetsPlugin({
 assetNameRegExp: /\.css$/g,
 cssProcessor: cssnano({
  safe: true
 }),

async processCss(assetName, asset, assets) {
  let css = asset.source();
  css = await postcss([autoprefixer({browsers: this.options.browsers})]).process(css).css;

  const result = csso.minify(css, Object.assign({filename: assetName}, this.options));
  css = result.css;

  if (this.options.sourceMap) {
   assets.setAsset(`${assetName}.map`, result.map.toString());
   css += `/*# sourceMappingURL=${path.basename(assetName)}.map */`;
  }

  return css;
 }