How to use autoprefixer - 10 common examples

var saveCss = function (css) {
        // remove local file path prefix
        if (settings.lineComments || settings.debugInfo) {
            var rootDir = options.paths[0] + path.sep;
                rootDir = rootDir.replace(/\\/g, '\\\\');
            css = css.replace(new RegExp(rootDir, 'g'), '');
        }

        // auto add css prefix
        if (settings.autoprefix) {
            css = require('autoprefixer').process(css).css;
            if (settings.sourceMap) {
                css = css + '\n/*# sourceMappingURL=' + path.basename(output) + '.map */'
            }
        }

        //write css code into output
        fs.writeFile(output, css, 'utf8', function (wErr) {
            if (wErr) {
                triggerError(wErr);
            } else {
                emitter.emit('done');
                emitter.emit('always');

                //add watch import file
                common.watchImports('less', filePath);
            }

const name = _filePath.split('/').slice(-2).join('/');
    const previewName = name.replace('/_preview.html', '');

    const example = fs.readFileSync(exampleHtmls[index], 'utf8');
    const preview = fs.readFileSync(_filePath, 'utf8');

    let resultCss;
    let resultCssString;

    try {
      resultCss = sass.renderSync({
        file: _filePath.replace('_preview.html', 'index.scss'),
        outputStyle: 'expanded',
      });
      resultCssString = autoprefixer.process(resultCss.css).css;
    } catch (error) {} // eslint-disable-line

    switch (previewName.substring(0, 2)) {
      case 'a-':
        createAmoComponents(ATOMS, previewName, 'Atom', preview, resultCssString, example);
        break;
      case 'm-':
        createAmoComponents(MOLECULES, previewName, 'Molecule', preview, resultCssString, example);
        break;
      case 'o-':
        createAmoComponents(ORGANISMS, previewName, 'Organism', preview, resultCssString, example);
        break;
      default:
        createAmoComponents(ORGANISMS, previewName, 'Organism', preview, resultCssString, example);
    }
  });

export function getStyleRules({
  bundleStylesWithJs = false,
  _config = config,
} = {}) {
  let styleRules;

  const postCssPlugins = [];
  if (_config.get('enablePostCssLoader')) {
    postCssPlugins.push(
      autoprefixer({
        grid: false,
      }),
    );
  }

  if (bundleStylesWithJs) {
    // In development, we bundle styles with the JS.
    styleRules = [
      {
        test: /\.(sc|c)ss$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader', options: { importLoaders: 2 } },
          {
            loader: 'postcss-loader',
            options: {

[
            'less',
            {
              plugins: [new NpmImport({ prefix: '~' })],
              javascriptEnabled: true,
              ...lessInRollupMode,
            },
          ],
          [
            'sass',
            {
              ...sassInRollupMode,
            },
          ],
        ],
        plugins: [autoprefixer(autoprefixerOpts), ...extraPostCSSPlugins],
      }),
      ...(injectOpts ? [inject(injectOpts)] : []),
      ...(replaceOpts && Object.keys(replaceOpts || {}).length ? [replace(replaceOpts)] : []),
      nodeResolve({
        mainFields: ['module', 'jsnext:main', 'main'],
        extensions,
        ...nodeResolveOpts,
      }),
      ...(isTypeScript
        ? [
          typescript2({
            cwd,
            // @see https://github.com/ezolenko/rollup-plugin-typescript2/issues/105
            objectHashIgnoreUnknownHack: true,
            // @see https://github.com/umijs/father/issues/61#issuecomment-544822774
            clean: true,

}
})
mainPlugins.push(plugin())

// mainPlugins.push(postcssMath())
mainPlugins.push(functions({
  functions: {
    rawUrl: (path) => {
      return `url(${path})`
    }
  }
}))
mainPlugins.push(postcssColor)
mainPlugins.push(postcssNested)
mainPlugins.push(postcssClean)
mainPlugins.push(autoprefixer({
  overrideBrowserslist: [
    '>1%',
    'ios_saf 8',
    'ie 10',
    'ie 11'
  ]
}))

class StylesManager {
  constructor (styles = []) {
    this.styles = styles
  }

  get () {
    return this.styles
  }

minify(_input: string | CssInputFile): MinifyOutput {

        const cssInputStr = typeof _input === 'string' ? _input : _input.data;

        let css: string;

        if (this.ap.use) {

            try {

                css = autoprefixer.process(cssInputStr, this.ap.options).toString();

            } catch (e) {

                return {
                    success: false,
                    warnings: [],
                    errors: [
                        // 'Autoprefixer failed to parse CSS. Probaly due to an syntax error.',
                         e.message
                    ]
                };

            }

        } else {

cssText = mixin + '\n' + cssText;

    // 编译 LESS
    less.render(cssText, function (err, res) {
        if (err) {
            printUtils.error(`编译 LESS 失败! ${name}`);
            throw err;
        } else {
            cssText = res.css;
        }
    });

    // 添加 CSS 浏览器前缀
    try {
        let prefixer = postcss([autoprefixer({
            browsers: runtime.config.autoprefixerBrowsers || autoprefixer.defaults
        })]);
        cssText = prefixer.process(cssText).css;
    } catch(e) {
        printUtils.error(`添加 CSS 浏览器前缀失败! ${name}`);
        throw e;
    }

    // 压缩 CSS 文件
    try {
        let cleanCss = new CleanCSS();
        cssText = cleanCss.minify(cssText).styles;
    } catch(e) {
        printUtils.error(`压缩样式表失败! ${name}`);
        throw e;
    }

return function autoprefixer_(assetGraph) {
    const cssAssets = assetGraph.findAssets({ type: 'Css', isLoaded: true });

    if (cssAssets.length > 0) {
      let autoprefixerVersionStr;
      try {
        autoprefixerVersionStr = require('autoprefixer/package.json').version;
      } catch (e) {
        e.message =
          `autoprefixer transform: Found ${cssAssets.length} css asset${
            cssAssets.length === 1 ? '' : 's'
          }, ` +
          `but no autoprefixer module is available. Please use npm to install autoprefixer in your project so ` +
          `the autoprefixer transform can require it.\n${e.message}`;
        assetGraph.info(e);
        return;
      }

      let autoprefixer;
      if (semver.satisfies(autoprefixerVersionStr, '>= 9.6.0')) {
        // https://github.com/postcss/autoprefixer/commit/6ed7c22bb6503968185935d807a61d6a593f352c
        autoprefixer = require('autoprefixer')(
          browsers ? { overrideBrowserslist: browsers } : {}

function css() {
  var plugins = [
    postcssImport(),
    precss(),
    autoprefixer({
      path: ["src/public/css"]
    }),
    cssnano()
  ];

  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.styles.dest));
}

less.render(data.toString('utf-8'), lessOptions, (err, css) => {
      if (err) throw err
      let results = autoprefixer.process(css.css).css

      fs.writeFile(cssFile, results, 'utf-8', (err) => {
        if (err) throw err
        console.log('CSS was successfully generated')
      })
    })