How to use purgecss for WordPress with Gulp

Question

I am using Gulp for WordPress and would like to purge my css, but am getting this error when I run gulp: RangeError: Maximum call stack size exceeded.

Below are my gulpfile.js and package.json files.

// *** Gulp file ***

'use strict';

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass')(require('sass'));
const babel = require('gulp-babel');
const del = require('del');
const autoprefixer = require('gulp-autoprefixer');
const gcmq = require('gulp-group-css-media-queries');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const purgecssWordpress = require('purgecss-with-wordpress');

const scssFiles = \['src/main.scss'\];
const copyFilesImages = \['src/images/'\];
const copyFilesFonts = \['src/fonts/'\];
const outputFiles = 'dist/';
const purgeCSSfiles = \['./dist/css/\*.css'\];
const jsFiles = \[
    'node_modules/@babel/polyfill/dist/polyfill.min.js',
    'src/js/main.js'
\];

function styles() {
    return gulp.src(scssFiles)
      .pipe(sourcemaps.init())
      .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
      .pipe(autoprefixer({
      browsers: \['last 2 versions'\],
      cascade: false
}))
    .pipe(sourcemaps.write())
    .pipe(gcmq())
    .pipe(gulp.dest(outputFiles + 'css/'))
    .pipe(browserSync.stream());
}

function scripts() {
    return gulp.src(jsFiles)
      .pipe(babel({
      presets: \['@babel/env'\]
}))
    .on('error', function(e) {
    console.log('\*\*\*\*\*\*\*\* error **');
    console.log('Babel: ' + e.message + '\\n');
    console.log(e.codeFrame);
    console.log('**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*');
    this.emit('end');
})
// .pipe(concat('main.js'))
.pipe(gulp.dest(outputFiles+ 'js/'));
}

function distScripts() {
    return gulp.src(jsFiles)
    .pipe(babel({
    presets: \['@babel/env'\]
}))
    .on('error', function(e) {
    console.log('\*\*\*\*\*\*\*\* error **');
    console.log('Babel: ' + e.message + '\\n');
    console.log(e.codeFrame);
    console.log('**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*');
    this.emit('end');
})
    .pipe(concat('main.js'))
    .pipe(uglify({
    toplevel: true
}))
    .pipe(gulp.dest('dist/js/'));
}

function watch() {
    browserSync.init({
    server: {
    baseDir: './dist/',
    directory: true,
    open: true
 }
});

gulp.watch('src/**/*.scss', styles);
gulp.watch('src/images/*', gulp.series(copyImages, browserSync.reload));
gulp.watch('src/js/**/*.js', gulp.series(scripts));
gulp.watch('src/\*\*/*.html').on('change', gulp.series(copyHtml, browserSync.reload));
}

function clean() {
    return del(\['dist/'\]).then(paths =\> {
    console.log('Deleted files and folders:\\n', paths.join('\\n'));
 });
}

function distStyles() {
    return gulp.src(scssFiles)
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer({
    browsers: \['last 2 versions'\],
    cascade: false
}))
    .pipe(gcmq())
    .pipe(cleanCSS())
    .pipe(gulp.dest(outputFiles + 'css/'));
}

function copyFonts() {
    return gulp.src(copyFilesFonts + '\*\*/\*', { allowEmpty: true })
    .pipe(gulp.dest(outputFiles + 'fonts/'));
}

function copyImages() {
    return gulp.src(copyFilesImages + '\*\*/*', { allowEmpty: true })
    .pipe(gulp.dest(outputFiles + 'images/'));
}
function copyHtml() {
    return gulp.src('src/*.html', { allowEmpty: true })
    .pipe(gulp.dest(outputFiles));
}

function cssPurge () {
    return gulp.src(purgeCSSfiles + './dist/css/*.css', { allowEmpty: true })
    .pipe(cssPurge({
    content: \['.src/page-modules/*.php', '.src/*.html'\],
    css: \['.dist/css/*.css'\],
    // safelist: \['slick-slide','slick-slider', 'slick-dots', 'slick-track', 'slick-list', 'slides', 'textarea', 'slick-initialized', 'ds-mkto-form-override', 'mktoForm textarea', 'wpml-ls-flag', 'wpml-ls-sub-menu', 'rtl', 'wpml-ls-item', 'wpml-ls-item-toggle', 'wpml-ls-current-language', 'mktoForm', 'ds-mkto-form-override', 'mktoButtonRow', 'wpml-ls-legacy-dropdown', /^nav-/\],
    whitelist: purgecssWordpress.whitelist,
    whitelistPatterns: purgecssWordpress.whitelistPatterns,
    keyframes: true,
    fontFace: true,
    variables: true,
}))
    .pipe(gulp.dest(purgeCSSfiles + 'css/'));
}

gulp.task('styles', styles);
gulp.task('scripts', scripts);
gulp.task('watch', watch);
gulp.task('copy', gulp.series(copyFonts, copyImages, copyHtml));
gulp.task('clean', clean);
// gulp.task('purgecssWordpress', gulp.series(cssPurge));
gulp.task('default', gulp.series(copyFonts, copyImages, copyHtml, styles, scripts, cssPurge, gulp.parallel( watch)));
gulp.task('dist', gulp.series(clean, copyFonts, copyImages, copyHtml, gulp.parallel(distStyles, distScripts)));

// *** Package JSON file ***

{
  "name": "markup-gulp-norm",
  "author": "Ben & Ruben",
  "version": "1.0.0",
  "description": "Nomal file for gulp tasks",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "browser-sync": "^2.26.3",
    "del": "^3.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^3.10.0",
    "gulp-concat": "^2.6.1",
    "gulp-group-css-media-queries": "^1.2.2",
    "gulp-purgecss": "^5.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "purgecss": "^5.0.0",
    "purgecss-with-wordpress": "^6.0.0-alpha.0",
    "sass": "^1.69.5"
  }
}

What exact call stack size is being exceeded?

Thank you!