How to use gulp-postcss - 10 common examples

return () => gulp.src(config.src, { dot: true })

  // Start sourcemaps
    .pipe(sourcemaps.init())

  // Process Sass
    .pipe(sass(options.sass).on('error', sass.logError))

  // Process PostCSS
    .pipe(postcss([
      autoprefixer(options.autoprefixer),
      csswring(options.csswring),
      mqpacker(options.mqpacker),
    ]))

  // Rename
    .pipe(rename({
      extname: '.min.css',
    }))

  // Write to files
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(config.dest))

  // Reload in browser
    .pipe(browserSync.stream({ match: '**/*.css' }));

postcssUrl(),
    postcssCssnext({
      browsers: '> 1%, last 2 versions, Safari > 5, ie > 9, Firefox ESR',
    }),
    postcssReporter(),
  ];
  // Compress in production.
  if (isProd()) {
    processors.push(cssnano({autoprefixer: false}));
  }

  return gulp.src([
    './src/css/index.css',
    './src/css/chartjs-visualizations.css',
  ]).pipe(plumber({errorHandler: streamError}))
      .pipe(postcss(processors))
      .pipe(gulp.dest('public/css'));
};

export function styles() {
	const plugins = [
		autoprefixer,
		postcssImport,
		postcssMixins,
		postcssNested,
		postcssInlineSvg,
		postcssCalc,
		postcssHexrgba,
		cssMqpacker,
	];

	return gulp.src( paths.styles.src )
		.pipe( postcss( plugins ) )
		.pipe( cleanCSS() )
		// pass in options to the stream
		.pipe( rename( {
			suffix: '.min',
			extname: '.css'
		} ) )
		.pipe( gulp.dest( paths.styles.dest ) );
}

function css() {
  var plugins = [
    postcssImport(),
    precss(),
    autoprefixer({
      path: ["src/public/css"]
    }),
    cssnano()
  ];

  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.styles.dest));
}

() => gulp.src(src_files.css)
			.pipe(rename({extname: '.css'}))
			.pipe(sourcemaps.init())
			.pipe(postcss(processors))
			.pipe(sourcemaps.write('.'))
			.pipe(gulp.dest(dist_dirs.css)),
		() => gulp.src(dir_css.map((f) => dist_dirs.css + f))

function css () {
  return gulp.src('src/assets/scss/app.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({ includePaths: PATHS.sassLibs }).on('error', sass.logError))
    .pipe(gulpif(PRODUCTION, postcss([autoprefixer(), cssnano()])))
    .pipe(gulpif(!PRODUCTION, sourcemaps.write('.')))
    .pipe(gulp.dest(`${PATHS.dist}/assets/css`))
}

gulp.task('styles-dev', () => {
  gulp.src('./src/scss/styles.scss')
    .pipe(sourcemaps.init({ loadMaps : true}))
    .pipe(plumber())
    .pipe(sass({
      importer: tildeImporter,
      outputStyle: 'expanded',
      includePaths: ['./node_modules']
    }))
    .pipe(postcss(postcssPlugins))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./public/assets/css/'))
    .pipe(server.stream({match: '**/*.css'}))
})

const functionPostCSS = (file) => {
  const buildFiles = (file == null) ? ['src/**/*.css'] : file

  return gulp.src(buildFiles, { base: 'src' })
  .pipe(postcss([
    cssnext({ browsers })
  ]))
  .pipe(gulp.dest('build'))
}

export function styles() {
  return src(CSS_GLOB)
    .pipe(postcss(processors))
    .pipe(postcss([minify]))
    .pipe(rev())
    .pipe(dest(BUILD_DIR))
    .pipe(rev.manifest())
    .pipe(dest(BUILD_DIR));
}

gulp.task('styles', () => {
	return gulp
		.src(`${PATHS.source.styles.common}/index.css`)
		.pipe(plumber(getPluginOptions('plumber')))
		.pipe(postcss([
			easyImport(getPluginOptions('postcssEasyImport')),
			cssnext(),
			csso(),
			flexbugsFixes(),
			reporter({ clearAllMessages: true }),
		]))
		.pipe(rename('main.css'))
		.pipe(gulp.dest(PATHS.build.styles));
});