How to use the autoprefixer function in autoprefixer

To help you get started, we’ve selected a few autoprefixer examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mozilla / addons-frontend / webpack-common.js View on Github external
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: {
github umijs / father / packages / father-build / src / getRollupConfig.ts View on Github external
[
            '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,
github VisualComposer / builder / public / editor / services / stylesManager / service.js View on Github external
}
})
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
  }
github HandshakeAlliance / HNScan / gulpfile.babel.js View on Github external
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));
}
github bitrix-tools / cli / src / rollup.config.js View on Github external
postcssBackgroundUrl(
					cssImages,
					output.css,
					context,
				),
				(() => {
					if (cssImages.svgo !== false)
					{
						return postcssSvgo({
							encode: true,
						});
					}

					return undefined;
				})(),
				autoprefixer({
					overrideBrowserslist: [
						'ie >= 11',
						'last 4 version',
					],
				}),
			],
		}));
	}

	if (plugins.babel !== false)
	{
		enabledPlugins.push(babel(plugins.babel || {
			sourceMaps: true,
			presets: [
				[
					resolvePackageModule('@babel/preset-env'),
github swaponline / swap.react / webpack / rules / scss.js View on Github external
plugins: () => [
            autoprefixer(AUTOPREFIXER),
          ],
        },
github ONSdigital / eq-survey-runner / gulp / styles.js View on Github external
export function styles() {
  const minifyAssets =
    process.env.EQ_MINIMIZE_ASSETS === undefined ||
    process.env.EQ_MINIMIZE_ASSETS === 'True'

  let postCssPlugins = [
    autoprefixer({
      browsers: [
        'last 2 versions',
        'Explorer >= 8',
        'Android >= 4.1',
        'Safari >= 7',
        'iOS >= 7'
      ]
    }),
    pixrem({
      replace: false
    }),
    inlineblock(),
    pseudoelements(),
    reporter({ clearMessages: true })
  ]
github acgotaku / YAAW-for-Chrome / gulpfile.babel.js View on Github external
export function styles () {
  return gulp.src(paths.styles.src, { sourcemaps: config.env.dev })
    .pipe(plumber(config.plumberConfig))
    .pipe(stylelint({
      reporters: [
        { formatter: 'string', console: true }
      ]
    }))
    .pipe(sass({
      outputStyle: 'nested',
      precision: 3,
      includePaths: ['.']
    }))
    .pipe(postcss([
      autoprefixer()
    ]))
    .pipe(gulpIf(config.env.prod, cleanCSS()))
    .pipe(gulp.dest(paths.styles.dest), { sourcemaps: config.env.dev })
}
github pgbross / vue-material-adapter / rollup.config.js View on Github external
function createUmdConfig(module, env, extract) {
  const isPlugin = PLUGINS.includes(module);
  const isProduction = env === `production`;
  const isDevelopment = env === `development`;
  const dist = isPlugin ? `dist/${module}/${module}` : 'dist/' + module;
  const name = isPlugin ? 'VueMDC' + capitalize(module) : 'VueMDCAdapter';
  const input = 'components/' + (isPlugin ? module + '/' : '') + 'entry.js';

  const banner = BANNER.replace('{{module}}', isPlugin ? module : '').replace(
    '{{name}}',
    name,
  );

  const postcssPlugins = isDevelopment
    ? [autoprefixer()]
    : [autoprefixer(), csso()];

  const postCssOptions = {
    from: undefined,
  };

  const sassConfig = {
    include: ['**/*.css', '**/*.scss'],
    options: { includePaths: ['node_modules'] },
    processor: css =>
      postcss(postcssPlugins)
        .process(css, postCssOptions)
        .then(result => result.css),
  };

  const output = {