Media queries from other files gets merged in the current file

[htshah]

Below is the styles task from my gulpfile.js. My project has multiple css files which gets outputted in the assets folder. When the task is executed, I don't know why this plugin merges all the media queries from each file and outputs it to each file.

const postcss = require("gulp-postcss");
const postcssPresetEnv = require("postcss-preset-env");
const cssnano = require("cssnano");
const purgecss = require("gulp-purgecss");
const purgecssWordpress = require('purgecss-with-wordpress');
const postcssNormalize = require("postcss-normalize");
const atImport = require("postcss-easy-import");
const combineMediaQueries = require("postcss-combine-media-query");

function styles() {
  const sourcemaps = require("gulp-sourcemaps");

  const postcssProcessors = [
    atImport({
      root: "./src/css",
      path: "./src/css"
    }),
    postcssNormalize({ browsers: ["defaults", "IE >= 10"] }),
    require("postcss-nested")(),
    postcssPresetEnv({
      stage: 0,
      preserve: false,
      browsers: ["defaults", "IE >= 10"],
      autoprefixer: isProduction,
      features: { "nesting-rules": false },
      fontFace: true,
    }),
    combineMediaQueries()
  ];

  if (isProduction) {
    postcssProcessors.push(
      cssnano(),
    );
  }

  return src([
    "src/css/**/!(_)*.css", // select all css files
    "!src/css/**/_*/", // exclude all folder starting with _
    "!src/css/**/_*/**/*" //exclude files/subfolders in folders starting with '_'
  ])
    .pipe(gulpIf(!isProduction, sourcemaps.init()))
    .pipe(
      postcss(postcssProcessors, {
        parser: require("postcss-comment") // To handle inline comments
      })
    )
    .pipe(gulpIf(!isProduction, sourcemaps.write(".")))
    .pipe(dest("assets/css"))
    .pipe(gulpIf(!isProduction, browserSync.stream()));
}