How to use postcss-flexbugs-fixes - 4 common examples

export default function styles() {
  return gulp
    .src(appConfig.entry.styles, { sourcemaps: true })
    .pipe(sass({ precision: 10, importer: inlineCssImporter }).on('error', errorHandler))
    .pipe(postcss([autoprefixer({ cascade: false }), flexBugsFixes()]))
    .pipe(
      gulp.dest(`${paths.styleguide.dist}/${paths.styleguide.assets.styles}`, {
        sourcemaps: '.',
      }),
    )
    .on('error', errorHandler);
}

[
        "postcss-preset-env",
        "postcss-flexbugs-fixes",
        "postcss-sorting",
        production && "cssnano",
        production && "postcss-combine-duplicated-selectors",
        production && "css-mqpacker",
      ].filter(Boolean)
    )
  );
  log.debug("");

  const result = await nodePostcss(
    [
      postcssPresetEnv({ stage: 3, autoprefixer: { flexbox: "no-2009" } }),
      postcssFlexbugsFixes(),
      sorting({
        order: ["custom-properties", "declarations"],
        "properties-order": "alphabetical",
        "unspecified-properties-position": "bottom",
      }),
      production && combineMediaQueries(),
      production && combineDuplicatedSelectors,
      production && cssnano({ preset: "default" }),
    ].filter(Boolean)
  ).process(css, {
    from: srcFile,
    to: outFile,
    map: !production && { inline: false },
  });

  checkForInvalidCSS(result.css);

.pipe(gulp.dest, `${envPath}/${paths.assets.css}`);

  /**
   * Warning:
   *   1. Returning the gulp stream causes an uncompleted task, I suppose because of the lazypipe.
   *      So we used the cb function to finish the task.
   *   2. For best performance, don't add Sass partials to `gulp.src`
   */

  return gulp
    .src(appConfig.entry.styles, { sourcemaps: true })
    .pipe(sass({ precision: 10, importer: inlineCssImporter }).on('error', errorHandler))
    .pipe(
      postcss([
        autoprefixer({ cascade: false }),
        flexBugsFixes(),
        isProduction ? mqpacker() : () => {},
      ]),
    )

    .pipe(
      gulp.dest(`${envPath}/${paths.assets.css}`, {
        sourcemaps: isProduction ? false : '.',
      }),
    )
    .pipe(isProduction ? stylesMinChannel() : noop())
    .on('error', errorHandler)
    .on('end', cb);
}

$rmd-theme-light: ${tone === "light"};

@import 'react-md/dist/scss/styles';
`;

  const outFile = join(cssDist, `react-md.${theme}.min.css`);
  const unmodifiedCSS = renderSync({
    data,
    outFile,
    sourceMap: false,
    includePaths: [tempStylesDir],
  }).css.toString();

  const { css } = await postcss([
    postcssPresetEnv({ stage: 3, autoprefixer: { flexbox: "no-2009" } }),
    postcssFlexbugsFixes(),
    sorting({
      order: ["custom-properties", "declarations"],
      "properties-order": "alphabetical",
      "unspecified-properties-position": "bottom",
    }),
    combineMediaQueries(),
    combineDuplicatedSelectors,
    cssnano({ preset: "default" }),
  ]).process(unmodifiedCSS, { from: outFile });

  checkForInvalidCSS(css);
  await writeFile(outFile, css);
  return css;
}