Postcss Based Project Starter Kit. I name primary postcss file as 'main.pcss' or index.pcss. Files ending with pcss extension are converted to css file

.env

NODE_ENV=development

gulpfile.js

require('dotenv').config();
const postcss = require('gulp-postcss');
const gulp = require('gulp');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const postcss_import = require('postcss-import');
const postcss_nested = require('postcss-nested');
const postcss_custom_properties = require('postcss-custom-properties');
const purgecss = require('@fullhuman/postcss-purgecss');
const easy_media_query = require('postcss-easy-media-query');
const rename = require('gulp-rename');

gulp.task('css', function() {
    
    const plugins = [
        autoprefixer(),
        postcss_import(),
        postcss_nested(),
        easy_media_query(),
        postcss_custom_properties(),
        ...process.env.NODE_ENV === 'production'
        ? [cssnano(), purgecss()]
        : []
    ];

    return gulp.src('./css/*.pcss')
        .pipe(postcss(plugins))
        .pipe(rename(function (path) {
            path.extname = ".css";
        }))
        .pipe(gulp.dest('./dest'));
});

gulp.task('serve', gulp.series('css', function(){
    gulp.watch(["./css/*.pcss", "./css/**/*.css"], gulp.series('css'));
}));

gulp.task('default', gulp.series('serve'));

package.json

{
  "name": "Homepage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "autoprefixer": "^9.7.0",
    "cssnano": "^4.1.10",
    "dotenv": "^8.2.0",
    "gulp": "^4.0.2",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "normalize.css": "^8.0.1",
    "postcss-custom-properties": "^9.0.2",
    "postcss-easy-media-query": "^1.0.0",
    "postcss-import": "^12.0.1",
    "postcss-nested": "^4.1.2"
  }
}