How to use postcss-preset-env - 6 common examples

const PROD = process.env.NODE_ENV === 'production';
const plugins = [];

if (PROD) {
  // Purge unused CSS rules
  // https://tailwindcss.com/docs/controlling-file-size
  plugins.push(
    purgecss({
      content: ['./client/**/*.tsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?

$rmd-theme-secondary: $${secondary}-a-${weight};
$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;
}

'element-ui',
      'vue-awesome',
    ],
    plugins: [
      env && replace({
        'process.env.NODE_ENV': JSON.stringify(env),
      }),
      node({
        extensions: ['.js', '.vue'],
      }),
      cjs(),
      postcss({
        extract: false,
        minimize: true,
        plugins: [
          postcssPresetEnv()
        ]
      }),
      vue({
        defaultLang: {
          style: 'scss',
        },
        style: {
          postcssPlugins: [
            cssnext(),
            cssnano(),
          ],
        },
      }),
      babel({
        exclude: 'node_modules/**',
        runtimeHelpers: true,

export function editorStylesAfterReplacementStream() {
	const config = getThemeConfig();

	const postcssPlugins = [
		stylelint(),
		postcssPresetEnv({
			importFrom: (
				configValueDefined('config.dev.styles.importFrom') ?
				appendBaseToFilePathArray(config.dev.styles.importFrom, paths.styles.srcDir) :
				[]
			),
			stage: (
				configValueDefined('config.dev.styles.stage') ?
				config.dev.styles.stage :
				3
			),
			autoprefixer: (
				configValueDefined('config.dev.styles.autoprefixer') ?
				config.dev.styles.autoprefixer :
				{}
			),
			preserve: false,

export function stylesAfterReplacementStream() {
	const config = getThemeConfig();

	const postcssPlugins = [
		stylelint(),
		postcssPresetEnv({
			importFrom: (
				configValueDefined('config.dev.styles.importFrom') ?
				appendBaseToFilePathArray(config.dev.styles.importFrom, paths.styles.srcDir) :
				[]
			),
			stage: (
				configValueDefined('config.dev.styles.stage') ?
				config.dev.styles.stage :
				3
			),
			autoprefixer: (
				configValueDefined('config.dev.styles.autoprefixer') ?
				config.dev.styles.autoprefixer :
				{}
			),
			features: (

list(
      [
        "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 },
  });