CssSyntaxError in plugin "gulp-postcss" / You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Question

I'm using this plugin for years now, and it's the first time I get this error. I'm working on an old project which i recently upgraded to the latests versions of node & npm, so I'm working with node v16.15.0 and npm v8.5.5. I also upgraded all of my npm packages to their latests versions (yes, I like to live dangerously).

Gulp v4.0.2 with gulpfile.js as such (there is some commented code in it because I'm still in the process of making it work with these versions of node & npm. Originally, this project was running fine with node v12.6.0 and npm v7.20.03 . After upgrading, I encountered many errors, as for example the need to switch from node-sass to dart-sass, because it's deprecated. ) :

// MODULES
// ----------------------------------------------------------------------------
const gulp = require('gulp'),
    //sass = require('gulp-sass')(require('dart-sass'), require('node-sass')),
    sass = require('gulp-sass')(require('sass'), require('dart-sass')),
    globImporter = require('node-sass-glob-importer'),
    postcss = require('gulp-postcss'),
    stylelint = require('gulp-stylelint'),
    svgstore = require('gulp-svgstore'),
    rename = require('gulp-rename'),
    cssnano = require('cssnano'),
    uglifyjs = require('uglify-js'),
    del = require('del'),
    autoprefixer = require('autoprefixer'),
    // This is based on node-sass, which is deprecated
    // find a replacement which works with something else...
    //inliner = require('sass-inline-svg'),
    connect = require('gulp-connect'),
    openBrowser = require('open');

// Basic config for paths (cfg = config)
// ----------------------------------------------------------------------------
const cfg = {
  scssDir: 'src/scss/',
  builtCssDir: 'dist/css/',
  scssPattern: '**/*.scss',

  svgDir: 'src/assets/svg/',
  compiledSvgDir: 'dist/svg/',
  compiledSvgFileName: 'symbols.twig',
  svgPattern: '**/*.svg',

  jsLibsDir: 'src/js/libs/',
  jsDir: 'src/js/',
  compiledJsLibsDir: 'dist/js/libs/',
  compiledJsDir: 'dist/js/',
  jsPattern: '*.js'
}

// Launch a server
// ----------------------------------------------------------------------------
function serve() {
  connect.server({
    port: 8080, 
    livereload: true,
    root: ['src']
  });
}

// Open application in browser
// ----------------------------------------------------------------------------
async function open() {
  await openBrowser('http://localhost:8080/');
}

// Construct style.css (Combine all scss files into one css final file)
// ----------------------------------------------------------------------------
function style() {
  return gulp
  .src(cfg.scssDir+cfg.scssPattern)
  // Test files with `gulp-stylelint` to ckeck the coding style
  /*.pipe(stylelint({
    reporters: [
      {formatter: 'compact', console: true}
    ]
  }))*/
  /*.pipe(sass({
    importer: globImporter(),
    functions: {
      svg: inliner(cfg.svgDir, {encodingFormat: 'uri'})
    }
  }))*/
  .on('error', sass.logError)
  // Use postcss with autoprefixer and compress the compiled file using cssnano
  .pipe(postcss([autoprefixer(), cssnano()]))
  .pipe(gulp.dest(cfg.builtCssDir))
}

// Construct svg symbol file (Combine svg files into one with <symbol> elements)
// ----------------------------------------------------------------------------
/*function svg() {
  return gulp
  .src(cfg.svgDir+cfg.svgPattern, {base: cfg.svgDir})
  .pipe(rename((filePath) => {
    const name = filePath.dirname !== '.' ? filePath.dirname.split(filePath.sep) : []
    name.push(filePath.basename)
    filePath.basename = `symbol-${name.join('-')}`
  }))
  .pipe(svgstore({ inlineSvg: true }))
  .pipe(rename(cfg.compiledSvgFileName))
  .pipe(gulp.dest(cfg.compiledSvgDir));
}*/

// Catch JS libs and transfer it to dist folder
// ----------------------------------------------------------------------------
async function jslibs() {
  return gulp
  .src(cfg.jsLibsDir+cfg.jsPattern)
  .pipe(gulp.dest(cfg.compiledJsLibsDir));
}

// Compile JS 
// ----------------------------------------------------------------------------
async function js() {
  return gulp
  .src(cfg.jsDir+cfg.jsPattern)
  .pipe(gulp.dest(cfg.compiledJsDir));
}

// Watcher
// ----------------------------------------------------------------------------
function watch() {
  gulp.watch('../'+cfg.scssDir+cfg.scssPattern, style)
  gulp.watch('../'+cfg.scssDir+cfg.scssPattern)
  gulp.watch(cfg.scssDir+cfg.scssPattern, style)
  gulp.watch(cfg.svgDir+cfg.svgPattern, svg)
  gulp.watch(cfg.scssDir+cfg.scssPattern);
}

// Empty the build folder of its front asset like css & svg (We're not emptying it totally, because there is other assets in it)
function clean() {
  return del([
    cfg.builtCssDir,
    cfg.compiledSvgDir+'/'+cfg.compiledSvgFileName,
    cfg.compiledJsDir
  ], {force: true});
}
clean.description = 'Delete the content of the build folder.';

// Serve
// ----------------------------------------------------------------------------
// Launch server

const launch = gulp.series(open, serve);

// Builder
// ----------------------------------------------------------------------------
// Regenerate the build folder.

const build = gulp.series(clean, style, jslibs, js);

// Export default task
// ----------------------------------------------------------------------------
// Regenerate the build folder & launch watcher
const defaultTask = gulp.series(clean, style, jslibs, js, watch);

// Export Tasks
// ----------------------------------------------------------------------------
module.exports = {
  open,
  serve,
  launch,
  clean,
  style,
  jslibs,
  js,
  build,
  watch,
  default: defaultTask
};

I get the following error when I try to throw my gulp default task in my terminal :

error

[11:42:55] CssSyntaxError in plugin "gulp-postcss"
Message:
    /Users/emma/Desktop/www/photosbroth/src/scss/styles.scss:3:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

  1 | @charset "UTF-8";
  2 |
> 3 | // Import EXTERNAL libs
    | ^
  4 | // - `sass-mq` for breakpoints management
  5 | @import '../../node_modules/sass-mq/mq';

Apparently, it doesn't like the // scss comments, which were perfectly fine before I tried to upgrade my stack.

Could anyone help please ? I wasn't able to find a solution to this.

I tried this in the gulpfile :

postcss = require('gulp-postcss')(require('postcss'))

this

postcss = require('gulp-postcss')(require('postcss-scss'))

and this

postcss = require('gulp-postcss')(require('postcss'), require('postcss-scss'))

None of those expressions worked.

Is this a bug or anything else ? Am I missing something ?

Thank you.