Why did Prettier format JS strings differently?

Question

JavaScript

There is the following function for Gulp, in this form it is formatted by Prettier

function CSS() {
  return gulp
    .src("./src/style/style.scss")
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        errLogToConsole: true,
        outputStyle: argv.prod ? "compressed" : "expanded",
        includePaths: ["node_modules"],
      }).on("error", sass.logError),
    )
    .pipe(
      argv.prod
        ? autoPrefixer({
            cascade: true,
            overrideBrowserslist: ["last 3 versions"],
          })
        : emptyStream(),
    )
    .pipe(argv.prod ? csso() : emptyStream())
    .pipe(sourcemaps.write("."))
    .pipe(
      argv.prod ? gulp.dest("./build/style/") : gulpMem.dest("./build/style/"),
    )
    .pipe(browserSync.stream());
}

Prettier's config -

{
  "useTabs": true,
  "bracketSameLine": true,
  "trailingComma": "all",
  "singleQuote": false,
  "semi": true,
  "quoteProps": "as-needed",
  "proseWrap": "never",
  "endOfLine": "auto"
}

The question is what is different

.pipe(
      argv.prod ? gulp.dest("./build/style/") : gulpMem.dest("./build/style/"),
    )

why did he split it into three lines and add a .pipe(argv.prod ? csso() : emptyStream())
comma?
If I put the result the same except for the comma "trailingComma": "es5"

Answer 1

Line length varies.